レスポンシブWeb制作時に便利なmatchMediaメソッド

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

レスポンシブWebデザインのサイトを作る場合、CSSではメディアクエリを使って幅によってレイアウトを変更するということができます。例えば、下記のような感じ。

上記は、ブラウザの表示領域の幅が600px未満なら背景を赤に、600px以上900px未満なら背景を緑に、900px以上なら背景を青にするという指定です。ブラウザの幅を変更するだけで背景色が変わります。

このメディアクエリの機能はCSSでの指定で、JavaScriptで同じことをやりたい場合、window.onresizeを使って随時幅をチェックしなきゃいけないんだろうなぁ。とずっと思っていたのですが、JavaScriptにwindow.matchMediaというメディアクエリの機能を使えるメソッドがあるということを、モダンWeb ―新しいWebプラットフォームの基盤技術という本で知りました。

例えば下記のような感じ。

実行サンプル:matchMediaのテスト

ブラウザの幅を変更するとブラウザに表示されるテキストが変更されるのが分かると思います(背景色はCSSで指定しています)。

もちろん、幅の指定だけではなく、orientationを指定すると、横長か縦長かの指定でイベントを実行することもできます。
参考:window.matchMedia – Web API インターフェイス | MDN
参考:JavaScript でメディアクエリを行う window.matchMedia の使い方 | Mozilla Developer Street (modest)

これでレスポンシブWebデザインのサイト制作時のJavaScriptの完結に記述できそうですね。
なお、一応言っておくと、matchMediaはwindowオブジェクトのメンバなので、『window.』は省略可能です。

モダンWeb ―新しいWebプラットフォームの基盤技術
モダンWeb ―新しいWebプラットフォームの基盤技術

覚えやすい様々なウェブサービスの異なるパスワードを作る方法

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

GoogleだとかYahooだとかTwitterだとか、いろんなところでパスワードは必要になってきますが、みなさんはそれぞれのパスワードを使いまわしたりしていないでしょうか。自分も前まで使いまわしていたのですが、最近はセキュリティ面のことも考えて、それぞれ異なるパスワードを使うようにしています。

ただ、そこで問題となるのが、複数のパスワードを覚えられないということ。Googleは、『ashufdhsa』で、Twitterは『ahsiudf9』で、Yahooは『ys6978fhan』なんてつけても確実に覚えられません。

でも、ちょっとした工夫をすることで、それぞれのウェブサービスに異なるパスワードをつけて、かつ覚えられる、というより思い出せるようにすることができます。それは、ドメイン名やウェブサービス名からパスワードを作るルールを作って、それをパスワードにすることで異なるパスワードを設定することができます。
詳しくは下記ページを参考。
ちょっとセキュアな「いつもの」パスワード – ぼくはまちちゃん!(Hatena)

この方法をやる場合、まず一つ、『いつものパスワード』というものが必要になります。とりあえず、ここでは『q2w3er5t79』とします。

次にパスワードを作成するルールを決めます。今回は下記のように決めました。

  • ドメイン名のニ文字目をパスワードの3文字目(wの箇所)に置き換える
  • ドメイン名の文字数の下一桁をパスワードの4文字目(3の箇所)に置き換える
  • ドメイン名の一文字目をシーザー暗号のようにアルファベット順で一文字ずらした文字をパスワードの6文字目(rの箇所)に置き換える
  • ドメイン名の最後の文字の大文字をパスワードの8文字目(tの箇所)に置き換える

あまりルールを設けすぎると覚えづらくなって本末転倒なので、このへんで。

では、上記のルールでいろいろなウェブサービスのパスワードを作ってみます。

例えば、Googleだと、変換に利用する文字列は『google』となります(ドメインがwww.google.co.jpなため)。この文字列の二文字目は『o』、文字数は『6』、一文字目を一文字ずらした文字は『h』、最後の文字の大文字は『E』となるので、変換後のパスワードは『q2o6eh5E79』となります。

同じ要領で、ニコニコ動画だと変換に利用する文字列は『nicovideo』なので、変換後パスワードは『q2i9eo5O79』となります。

住信SBIネット銀行だと、変換に利用する文字列は『netbk』ですが、サービス名と全く関連がないのでここでは『sbi』を変換に利用する文字列とします。すろと変換後のパスワードは『q2b3et5I79』となります。

Yahoo! JAPANだと、変換に利用する文字列は『yahoo』なので、変換後のパスワードは『q2a5ez5O79』となりますす。が、Yahoo!JAPANの場合はかなりチェックが厳しいので、これだと「登録情報から推測されにくいパスワードを入力してください」なんて表示されてしまうかもしれません。自分も昨年、パスワードを変更するように促されたため、思いつくかぎりのいろいろな文字列を試してたのですが、だめでした。なので、パスワード生成ツールか何かを使って本当にランダムな20文字の文字列を生成してそれをパスワードにしています。覚えれる自信が全くありません。

他にもいろいろ工夫できそうですね。ちょっとセキュアな「思い出せる」パスワード – 考えたことや、学んだことの記録というブログエントリーにもパスワードを作る工夫が記述されています。他には、QWERTY配列をヒントに作るという手もあるかもしれませんね。ドメイン3文字目のキーの右隣の文字とか。スマホでも大概の場合、パスワード入力しようとすると、QWERTY配列のソフトウェアキーボードが表示されることが多いですし、QWERTY配列を覚えなければいけないという自体にはほとんどならないと思います。

JavaScriptで縮小画像を作成してサーバーにPOST送信する方法

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

本日、JavaScriptで縮小画像の作成 | while(isプログラマ)のコメント欄にて、慎之助さんから下記のようにコメントがありました。

「画像を縮小して表示」サンプルと
「canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法 | while(isプログラマ)」のサンプルを元にして、
「JavaScriptで縮小画像を作成してサーバーにPOST送信する方法」を試行錯誤しながら作っていますが、なかなか出来ません。
そのやり方のサンプルを掲載されることを、とてもとても楽しみにいたしております。

canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法 | while(isプログラマ)を使って縮小画像をサーバーに送りたいのだけれども、できないということらしい。

自分も上記エントリーの最後に「できそうです」と書いているものの、実際に試したわけではないので、今回試してみました。

とりあえず、『JavaScriptで縮小画像の作成』で作ったサンプルページをもとに、それをPOST送信するようなプログラムを作ってみることにします。利用するサーバー側プログラムのPHPは『canvasで描いた絵をバイナリ形式でサーバーにPOST送信する方法』でも利用したPHPを何も変更せずに利用することに。

結論からいうと、できました。
サンプルページ:画像を縮小して表示してPOSTでサーバーに送信
画像をアップすると、その下にアップした画像を指定分縮小した画像が表示されます。ファイルを選択するとすぐにアップロードする仕組みになっているので、ネットに公開したくない画像を間違って選択してしまわないように注意してください。もし間違えた場合は、すぐに公開してもいい画像をアップロードしてください。

『JavaScriptで縮小画像の作成』で作ったサンプルページの変更点としては、jQueryを使ってなかったので、jQueryを呼び出し、base64形式の文字列をBLOB形式にするbase64ToBlobという関数とBLOB形式のファイルをPOSTで送信するsendImageBinary関数を追加しています。

後は、canvasのtoDataURLメソッドでBase64形式の文字列を取得し、それをbase64ToBlobの引数にいれて、さらにその戻り値をsendImageBinaryの引数にいれるということをしています。

ただ、そもそも慎之助さんがどこで躓いていたのかが分からないので、注意点を言っておくと、古いブラウザだと動きません。例えば、IEだと10以降でないと動きません。また、サーバーの設定でファイルの作成や書き込みができないようになっているとうまくいきませんし、アップする画像が大きい場合にもうまくいかない可能性があります。

さて、ここまできたら、ExifのOrientationを見たうえでcanvasに画像を表示できるJSライブラリ | while(isプログラマ)で書いた内容をもとに、Exifも考慮して縮小画像を作成し、POSTで送信するということもできるはずです。そこまでは実装してませんが、興味ある人は試してみてください。

JSの開発作業自動化ツールのgulpを軽く触ってみた

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

前回のエントリーでGruntを紹介しましたが、最近は、gulpというツールのほうが使われているようです。

実は、Gruntを触ってみた時に、Gruntfile.jsの階層が深く、記述が冗長で分かりにくいように感じました(後出しでなんですが)。今回、gulpを調べてみると、その箇所が少し分かりやすくなったように思えます。というわけで、前回Gruntで試したことをgulpでもやってみることにしました。

今回、参考にしたサイトは下記サイト。
gulp.jsで始めるWeb開発爆速自動化入門:便利なGruntの弱点を補うgulp.jsのインストールと使い方 (1/3) – @IT

まずは、node.jsをインストールしてない場合は、インストール。

続いて、npmからグローバル環境とプロジェクトのディレクトリにgulpのインストール。それと、gulpのUglifyJSプラグインもインストール。

つづいて、下記のようなgulpfile.jsの作成

後はgulpコマンドでuglifyを呼んだらできるはず。

これで、前回Gruntでやったように、sample01.jsとsample02.jsをミニファイして結合したoutput.min.jsができるはず・・・。

予想に反して、『output.min.js』という名前のフォルダができました。中を見てみると、その中にミニファイされたsample01.jsとsample02.jsがありました。

とりあず、『ビルドツール「gulp」を触ってみた – E-riverstyle Vanguard』を参考に、gulp-concatをインストールしてgulpfile.jsを下記のように変更。

その後、『gulp concat』と実行すれば、無事、output.min.jsが出力されました。中身は下記のようになっていました。

改行がついていますが、結合はできたようです。

分からないなりにやってみましたが、やっぱりまだよく分からないところも多いので、もう少し調べてみようと思います。

追記:
concatとuglifyの順番を逆にすると改行なしで出力できました。

JSの開発作業自動化ツールのGruntを軽く触ってみた

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

最近、会社で遭遇したいくつかの現象をブログに書こうと何度か思ったのですが、なぜか自宅ではそれらの現象が再現できないということが何度かあって更新頻度が減っています(ただのいいわけ)。

先日、フロントエンド開発徹底攻略 (WEB+DB PRESS plus)に収録されていたGruntの詳しい解説を読んでちょっとだけ触ってみた。

実行にはNode.jsが必要なようなので、下記ページからNode.jsをインストールして実行。
node.js
grunt

コマンドプロンプトを開いて、nodeコマンドの確認

インストールできていることが確認できる。

続いて、Gruntコマンドをnpmからインストール。自分の環境だと下記のようになった。

インストール時に-gオプションをつけることで、システムグローバルなパスにインストールすることになるらしい。試しにユーザー環境変数のPATHを調べてみると、”C:\Users\FMVF56DDRZ\AppData\Roaming\npm”が追加されており、そのフォルダを見てみると、”grunt”と”grunt.cmd”というファイルが追加されていた。

ところで、上記でインストールしたのはGruntのフロントエンドであるコマンド郡なだけで、バックエンドのGrunt本体は別途インストール必要があるよう(このあたり、まだよく分かってません。本に書いてあったことをそのまま書いてるだけです)。
というわけで、Gruntを動かそうとしているパスに移動して、Grunt本体をインストールすることに。

本当は、package.jsonというものを作って、–save-devオプションをつけてインストールするのがいいらしい。ただ、自分自身がよく分かってないのでそこまでしないことに。

とりあえず、UglifyJSというJavaScriptファイルをミニファイするツールを使ってみることにしてみる。

UglifyJSをインストールしてみようとすると、なぜかワーニングが表示された。見た感じ、package.jsonを用意してないのが悪いのだろうか? このあたりはよく分かってない。

つづいて、ミニファイを行う2つのJavaScriptファイルを置く(さすがに全く同じなのもなんなので、本に書かれているコードとは少し変えている)。

それと、Gruntを実行するには、Gruntfile.jsというファイルが必要なようなので、下記のように書いて置く。

いろいろ書いてありますが、とりあえずこれでsample01.jsとsample02.jsをミニファイルしたoutput.min.jsというファイルを作成する準備ができました。

というわけで実行。

ちゃんと作成されました。試しにoutput.min.jsを開いてみると、下記のようになっていました。

改行やムダなスペースをなくすだけでなく、変数名の短縮や、ちょっとした実装の変更まで行ってくれるようです。

他にも、Gruntには、grunt-contrib-watchというプラグインを使えばファイルの更新を検知して自動的にタスクを実行してくれるという便利な機能があるようです。

Gruntは名前ぐらいは聞いたことあったのですが、確かにすごい便利そうです。もう少し勉強して使いこなせるようになりたいと思います。ただ、それ以前に自分の場合は、Node.jsの勉強をしたほうがいいのかもしれませんが・・・。

2014/10/18追記:
どうやら、最近はGruntよりgulpというツールのほうがよく使われているようです。
JSの開発作業自動化ツールのgulpを軽く触ってみた | while(isプログラマ)