Monthly Archives: 6月 2016

Node.js #023 – gulpとBrowsersyncでブラウザ同期

 

今回は、「gulp」と「Browsersync」でブラウザ同期する方法を紹介しようと思います。

 

node.js_016_02

 

node.js_023_01

 

作業フォルダでnpmでbrowser-syncをローカルインストールします。

 

node.js_023_02

 

gulpfile.js

 

最新のBrowsersyncでは少し書き方が違うようです。ハムさんに教えて頂きました。ありがとうございます。
※どちらの記述方法でも動きます。

gulpfile.js

 

作業フォルダでgulpを実行すると下記のようにコマンドプロンプトに表示されます。

 

node.js_023_06

 

処理が実行されると、ローカルサーバーが立ち上がり「index.html」が表示されます。

node.js_023_03

 

index.html

 

「index.html」を修正して保存するとリアルタイムにブラウザ同期され自動でリロードされます。

node.js_023_05

 

gulpとBrowsersyncを利用することにより、gulpで保存監視・Browsersyncでローカルサーバーが立ち上がりオートリロードされます。そのため、監視するファイルを指定すればファイルが更新された時点で、ブラウザが自動でリロードされます。構築内容をリアルタイムに確認することが可能になります。
今までのように手動でリロードすることがなくなります。すごく便利なツールだと思います。私は、Bracketsのライブプレビューと使い分けて利用しています。

 
 

  • 参考文献

gulp
ICS MEDIA

 

Materialize #005 – スライダー

 

Materializeでスライダーを構築するには下記のように記述します。

 

Materializeのサイト内のMediaを確認すると、サンプルがあるのでそれを参考にスライダーの機能を実装してみます。

Materialize_005_01

 

「index.html」と「script.js」を修正します。

 

index.html

 

script.js

 

作成したindex.htmlを実行すると下記のように表示されます。
スライダーが表示され一定間隔で画像が切り替わります。

Materialize_005_02

 

スライドインジケータを非表示:
indicatorsを変更します。

 

スライダーの切り替わる間隔を変更:
intervalを変更します。

 

スライダーの動きはJSで設定します。既存タグでは文字サイズ・色・配置はHTML側で設定します。独自でタグを割り当てればCSSで指定することも可能です。

 
 

  • 参考文献

Materialize

 

Walking #055

 

日付 曜日 歩数
2016.06.19 7589
2016.06.20 14034
2016.06.21 9178
2016.06.22 8429
2016.06.23 5679
2016.06.24 5541
2016.06.25 3329
合計
53779

 

Mac #010 – MacでParallelsのWindows日本語入力の設定

 

今回は、MacでParallelsのWindows日本語入力の設定をする部分でハマったので解決方法を紹介します。

通常は「Inforati」のような記事に載っている内容で解決するので、「かな」や「英数」キーを押せば切り替わると思います。

ただ、ParallelsでWindowsをインストールした場合はそれだけではうまくいきませんでした。上記の設定をしてもParallelsでWindowsを起動した時には、「かな」や「英数」キーを押しても日本語入力には切り替わりませんでした。

 

どうやらParallelsにWindowsをインストールするとENG(英語)も入ってしまうようなので、それを全て削除して日本語のキー入力のみ残します。
Mac_010_01

 

削除するとデフォルトで、「かな」や「英数」キーで切り替えれるようになりました。
Mac_010_02

 

試しにParallelsでWindowsのExcelを起動して入力すると日本語が記述できました。
Mac_010_03

 

ParallelsでのWindows日本語入力については、色々と検索してもあまり書かれていなく理由がなかなかわかりませんでした。

 
 

Mac #009 – エイリアスの設定

 

今回は、Macでエイリアスの設定をする方法を紹介します。

エイリアスの設定をするとターミナルで独自の組み合わせのコマンドを設定し実行することが可能になります。

 

まず、ホームディレクトリにある「.bash_profile」を開きます。隠しファイルを表示していない場合は一度表示してください。そして、下記のような記述をするとコマンドを独自につけたコマンド名で実行可能になります。今回は、ローカルサーバーの起動・IP表示・メモリ解放をそれぞれserver・ip・puで設定してみました。

 

Mac_009_01

 

実際に実行してみます。ターミナルに、「server」と入力するだけでローカルサーバーが起動します。
Mac_009_02

 

ターミナルに、「pu」と入力するだけでメモリが解放されます。
Mac_009_03

 

独自にコマンド名をつけると、全てを記述しなくてもコマンドを実行できます。よく使うコマンドを割り当てると便利だと思います。

 
 

Walking #054

 

日付 曜日 歩数
2016.06.12 10215
2016.06.13 8328
2016.06.14 4009
2016.06.15 8513
2016.06.16 6332
2016.06.17 8802
2016.06.18 8325
合計
54524

 

Mac #008 – ローカルサーバー起動

 

今回は、Macで手軽にローカルサーバーを起動する方法を紹介します。

Windowsとかだとローカルサーバーを起動するには色々とインストールしたりしなければいけないのですが、MacだとSimpleHTTPServerを利用すると手軽にローカルサーバーを立ち上げられます。

 

まず、ターミナルを開いてローカルサーバーを立ち上げたい任意のフォルダに移動します。
そして下記のコマンドを実行するとローカルサーバーが起動します。
※ポート番号は8888じゃなくても他とかぶらなければ大丈夫です。

 

Mac_008_01

 

そしてブラウザで「http://localhost:8888/ファイル名」にアクセスします。Webサイトが確認できます。
Mac_008_02

 

停止するには、control + Cを押します。
Mac_008_03

 

ローカルサーバーを立ち上げるにはApacheを入れたり、node.jsで起動したり色々と方法はありますが、SimpleHTTPServerはサクッと立ち上げられるのが魅力です。選択肢の一つとしてありかなと思います。

HTML・CSS・Javascript等のフロント部分の確認であればこの方法は便利です。

 
 

Walking #053

 

日付 曜日 歩数
2016.06.05 14873
2016.06.06 4050
2016.06.07 8256
2016.06.08 11970
2016.06.09 15185
2016.06.10 17594
2016.06.11 7151
合計
79079

 

Walking #052

 

日付 曜日 歩数
2016.05.29 7953
2016.05.30 7577
2016.05.31 10238
2016.06.01 6804
2016.06.02 7606
2016.06.03 3878
2016.06.04 2273
合計
46329