javaScript – masomi79の日記

CentOSにnode.jsをインストールする

Posted on 19/10/2019 by masomi79

$ node --version

-bash: node: コマンドが見つかりません

$ curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -
[sudo] パスワード:

## Installing the NodeSource Node.js 8.x LTS Carbon repo…

## Inspecting system…

+ rpm -q –whatprovides redhat-release || rpm -q –whatprovides centos-release || rpm -q –whatprovides cloudlinux-release || rpm -q –whatprovides sl-release
+ uname -m

## Confirming “el7-x86_64” is supported…

+ curl -sLf -o /dev/null ‘https://rpm.nodesource.com/pub_8.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm’

## Downloading release setup RPM…

+ mktemp
+ curl -sL -o ‘/tmp/tmp.XOyX3qzAtS’ ‘https://rpm.nodesource.com/pub_8.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm’

## Installing release setup RPM…

+ rpm -i –nosignature –force ‘/tmp/tmp.XOyX3qzAtS’

## Cleaning up…

+ rm -f ‘/tmp/tmp.XOyX3qzAtS’

## Checking for existing installations…

+ rpm -qa ‘node|npm’ | grep -v nodesource

## Run `sudo yum install -y nodejs` to install Node.js 8.x LTS Carbon and npm.
## You may also need development tools to build native addons:
sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum install yarn

[upla@os3-364-15302 ~]$ sudo yum install nodejs
読み込んだプラグイン:fastestmirror, langpacks
Determining fastest mirrors
epel/x86_64/metalink | 4.9 kB 00:00
* base: mirrors.cat.net
* epel: ftp.jaist.ac.jp
* extras: ty1.mirror.newmediaexpress.com
* remi-safe: ftp.riken.jp
* updates: ty1.mirror.newmediaexpress.com
base | 3.6 kB 00:00
epel | 5.4 kB 00:00
extras | 2.9 kB 00:00
nodesource | 2.5 kB 00:00
remi-safe | 3.0 kB 00:00
updates | 2.9 kB 00:00
(1/8): extras/7/x86_64/primary_db | 152 kB 00:00
(2/8): base/7/x86_64/group_gz | 165 kB 00:00
(3/8): nodesource/x86_64/primary_db | 48 kB 00:00
(4/8): remi-safe/primary_db | 1.6 MB 00:00
(5/8): epel/x86_64/updateinfo | 1.0 MB 00:01
(6/8): base/7/x86_64/primary_db | 6.0 MB 00:01
(7/8): updates/7/x86_64/primary_db | 1.9 MB 00:01
(8/8): epel/x86_64/primary_db | 6.8 MB 00:02
依存性の解決をしています
–> トランザクションの確認を実行しています。
—> パッケージ nodejs.x86_64 2:8.16.2-1nodesource をインストール
–> 依存性解決を終了しました。

依存性を解決しました

================================================================================
Package アーキテクチャー
バージョンリポジトリー容量
================================================================================
インストール中:
nodejs x86_64 2:8.16.2-1nodesource nodesource 16 M

トランザクションの要約
================================================================================
インストール 1 パッケージ

総ダウンロード容量: 16 M
インストール容量: 49 M
Is this ok [y/d/N]: y
Downloading packages:
警告: /var/cache/yum/x86_64/7/nodesource/packages/nodejs-8.16.2-1nodesource.x86_64.rpm: ヘッダー V4 RSA/SHA512 Signature、鍵 ID 34fa74dd: NOKEY
nodejs-8.16.2-1nodesource.x86_64.rpm の公開鍵がインストールされていません
nodejs-8.16.2-1nodesource.x86_64.rpm | 16 MB 00:02
file:///etc/pki/rpm-gpg/NODESOURCE-GPG-SIGNING-KEY-EL から鍵を取得中です。
Importing GPG key 0x34FA74DD:
Userid : “NodeSource ”
Fingerprint: 2e55 207a 95d9 944b 0cc9 3261 5ddb e8d4 34fa 74dd
Package : nodesource-release-el7-1.noarch (installed)
From : /etc/pki/rpm-gpg/NODESOURCE-GPG-SIGNING-KEY-EL
上記の処理を行います。よろしいでしょうか？ [y/N]y
Running transaction check
Running transaction test
Transaction test succeeded
Running transaction
警告: RPMDB は yum 以外で変更されました。
インストール中 : 2:nodejs-8.16.2-1nodesource.x86_64 1/1
検証中 : 2:nodejs-8.16.2-1nodesource.x86_64 1/1

インストール:
nodejs.x86_64 2:8.16.2-1nodesource

完了しました!

$ node -v
v8.16.2

node.jsのこと

PHPと同じところ
・サーバーサイド言語
違うところ
・非同期処理を行う
・単純な処理を同時に高速に行える

テストアプリ(my-app)を作ってみます

$ npx create-react-app my-app
npx: 91個のパッケージを7.62秒でインストールしました。

Creating a new React app in /[directory]/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts…

> core-js@2.6.10 postinstall /[directory]/my-app/node_modules/babel-runtime/node_modules/core-js
> node postinstall || echo “ignore”

> core-js@3.2.1 postinstall /[directory]/my-app/node_modules/core-js
> node scripts/postinstall || echo “ignore”

+ react@16.10.2
+ react-dom@16.10.2
+ react-scripts@3.2.0
added 1496 packages from 687 contributors and audited 904959 packages in 72.04s
found 0 vulnerabilities

Success! Created my-app at /[directory]/my-app
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd my-app
npm start

Happy hacking!

機種を判別して内容を変更する

Posted on 26/09/201401/07/2019 by masomi79

最近スマホの案件が増えてきました。
機種によって導線を変えることも多そうなのでここにメモを。。。

HTML

<!-- 初期設定はiosに。。。-->
<div id="download">
<a href="http://store.apple.com/" id="href_appdownload">
<img src="../img/bnr_dl_ios_a.png" id="btn_appdownload">
</a>
</div>

javaScript

/**
 *  UAを判定してダウンロードボタンの内容を変更する
 */
$(document).ready(function(){
var agent = navigator.userAgent;
var ua='';
if(agent.search(/iPhone/)!=-1){
ua = 'ios';
}else if(agent.search(/Android/)!=-1){
ua = 'android';
}else{
ua = 'pc';
}
if(ua == 'ios'){
;
}else if(ua == 'android'){
$("#href_appdownload").attr("href","http://play.google.com/");
$("#btn_appdownload").attr("src","../img/bnr_dl_android.png");
}else if(ua == 'pc'){
$("#href_appdownload").attr("href","");
$("#btn_appdownload").attr("src","../img/bnr_dl_pc.png");
}
});

スクロールに合わせて位置が変わるレフトメニュー

Posted on 25/05/2014 by masomi79

パララックスのお勉強

page.html

<html>
<head>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='js/scrollMenu.js'></script>
</head>
<body>
<div id="page_bg">
<div id="header">
</div>
<div id="wrapper">
<div id="side_menu">
メニューの内容
</div>
<div id="contents">
コンテンツ
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

scrollMenu.js

/* ページの高さを取得する */
var pageheight = $('#page_bg').height();
/* レフトメニューの高さを取得する */
var menuheight = $('#side_menu').height();
/* レフトメニューの上端の位置を取得する */
var vsidemenu = $('#side_menu').offset().top;
/* フッターの上端の位置を取得する */
var vfooter = $('#footer').offset().top;
$(window).scroll(function() {
/* スクロールの位置を取得する */
var value = $(this).scrollTop();
/* スクロール値がメニュー上端の値より小さいときはそのまま */
if (value < vsidemenu) {
$('#side_menu').css('position', 'static');
/* 大きくなったら画面の上端に固定　*/
}else if(vsidemenu < value) {
$('#side_menu').css('position', 'fixed');
$('#side_menu').css('top', 0);
}
/* フッターのところまで来たら重ならないように、スクロールに合わせて上へ移動 */
/* しきい値は(ページの高さ) - (メニューの高さ + フッターの上端)	 */
var shikii = pageheight - menuHeight - footerheight;
/* メニュー表示位置は(しきい値) - (メニューの高さ) */
var menutop = shikii - menuheight;
/* スクロール値がしきい値を超えたら、メニューの配置をrelativeにしてメニューの上端を固定する*/
if(value > shikii){
$('#side_menu').css('position', 'relative');
$('#side_menu').css('top', menutop);
}

要素の高さを取得する

Posted on 20/05/2014 by masomi79

var height = $('#hogehoge').height();

WordPressでLightboxを使えるプラグイン

Posted on 30/03/2013 by masomi79

なにかとお世話になるフォトギャラリーの定番Lightboxですが、今作成中のWordPressサイトでうまく作動しませんでした。
たぶんjQueryの競合だと思うのですが。。。

いろいろ探したところLightboxと同様に動作するjQuery Lightboxというプラグインがあったので試したところOKでした。

つ　http://wordpress.org/extend/plugins/wp-jquery-lightbox/

jQueryで作るシンプルなスライドショー

Posted on 23/01/201301/07/2019 by masomi79

HTMLの部分
目標はとにかくキレイなコードにすること。

<div id="slideshow">
　<img src="images/image01.jpg" alt="" class="active" />
　<img src="images/image02.jpg" alt="" />
　<img src="images/image03.jpg" alt="" />
</div>

CSSの部分
activeに指定した画像が一番上にくるようにCSSを設定します。
画像がきれいに重なるようにdevの高さを指定しています。
3つの異なるz-indexを指定しているのに気づかれるでしょうか？
後でjQueryでこれらを操作します。

#slideshow {
position:relative;
height:200px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}

javascriptの部分

スライドショーアニメーションのために、各写真を定期的に入れ替える必要があります。では、アクティブになっているイメージの上に新しいイメージを表示する部分から書き始めましょう。

<script type="text/javascript" src="js/vendor/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
　　　　　　　　var $next = $active.next();
$active.addClass('active');
$active.removeClass('active');
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>

ここで5秒ごとにsildeSwitch()を呼び出すようjavascriptを設定しています。
そしてslideSwitch()はCSSのactiveを次に呼び出す画像に適用して一番上に持ってきます。

次に、画像の重なりを加えます。
こういうギャラリーにはフェードイン･フェードアウトは重要ですね。

<script type="text/javascript" src="js/vendor/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
　　　　　　　　var $next = $active.next();
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>

最初に設定した’last-active’クラスを適用します。
‘last-active’はスタイルシートの中で’active’のつぎにきますのでz-indexが9のほうが上にきます。そして一番上の画像は一段下がります。
次に新しい画像のopacityを0にしてanimate()functionをつかってフェードします。
最後に、前の画像のz-indexを消去するためにcallbackを使います。

これでこのスライドショーは大体動いていますが、まず、back-endの負担を軽くするためにデフォルトのactiveイメージを設定します。
あと、ループするようにします。

<script type="text/javascript" src="js/vendor/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last')
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>

参考サイト：
http://jonraasch.com/blog/a-simple-jquery-slideshow

基本的な書き方

Posted on 21/01/201301/07/2019 by masomi79

文末はセミコロン
途中で空白、改行やタブを入れられる
大文字･小文字の区別

HTMLファイルにjavascriptを組み込むには