dataに配列を定義した時、リアクティブデータとしてリアルタイムに更新されるようにするにはいくつか制約があるので注意が必要。配列を操作する場合は以下のメソッドを使えばVue.jsが変更を検知してくれる。つまりはリアクティブデータとしてリアルタイムに変更が反映される。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

ところが、直接indexを指定して中身を書き換えたり

items[2] = 'foo'

配列を空にするためにlengthを0にしたり

items.length = 0

上記のやり方はVue.jsが配列の変更を検知できないので、リアクティブデータとして反映されない。これはJavascriptの言語仕様上の制約らしい。

Vue.jsで配列の中身をまるっと空にしたい場合はsplice()を使って以下のように書く。

items.splice(0)

splice()の第一引数は削除開始する位置。第二引数は配列から削除する要素の数となる。第二引数を指定しない場合は第一引数で指定した位置から後ろ全てが削除される。items.splice(0)とだけ書けば配列の中身を空っぽにしてくれる。最初items.length=0で配列を空にするやり方でやってて変更が反映されないのでちょっとハマった。

Vue.jsはsplice()を使っての変更はちゃんと検知してくれるので、Vue.jsを使ってリアクティブデータを保ったまま配列を空にしたい人はお試しあれ。

参考サイト

• Vue.js公式 [配列の変化を検出]
• Array.prototype.splice() – JavaScript | MDN – Mozilla

1.Xcodeをインストール

App Storeに行ってXcodeを探しインストールをします。

2.コマンドライン・ディベロッパーツールをインストール

ターミナルを開き、以下コマンドを入力して実行します。

$ xcode-select --install

実行するとポップアップウィンドウが開いてインストールするか聞かれるので、インストールを選択します。

3.Xcodeを一度起動してライセンスに同意しておく

はい、これをやらずにhomebrewをインストールしようとすると私みたいにエラーになります(苦笑)

なぜエラーになるのかは以下のようなエラーログが出て教えてくれます

You have not agreed to the Xcode license.
Before running the installer again please agree to the license by opening
Xcode.app or running:

4.ターミナルからhomebrewをインストールする

ターミナルからHomebrewをインストールするコマンドを入れて実行します。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

上記コマンドはHomebrewの公式サイトに書いてありますので不安な人はそちらを確認してコピペしてください。

5.brew doctorを実行してちゃんとインストールされているか確認する

インストールが終わったら、Homebrewがちゃんとインストールされているか確認しましょう

brew doctor

入力し、実行すると

Your system is ready to brew.

上記のように表示されていればHomebrewがインストールされています。これでHomebrewを使って様々なパッケージをインストールできるようになりました。めでたしめでたし。

以前このブログでも書いたようにHTMLとCSSを教える事に関してはほぼ方法論が確立していて、今も毎年マイナーチェンジはしていますがそのやり方はほとんど変わっていません。

しかし、ことプログラム「JavaScriptをデザイナー志望の子に教える」という難題はここ数年来毎年頭を悩ませて来ました。そしてようやくここ最近になってよりベターな方法が確立しつつあるので自身の教え方の変遷などを交えつつ紹介してみたいと思います。

プログラムの基礎と基本構文を最初から編

僕が教え始めた当初はプログラムの「いろは」をゼロから丁寧に教えていました。「セミコロンってどうやってうつの？」（意外とスマホ世代はセミコロンの打ち方がわからなかったりします）というような人たちが対象です。プログラム初心者ばかりにプログラムを教えるということがどれほど大変かは経験したことのある方なら分かると思います。

「プログラムとはなんぞや」というところから始まり、エディターの使い方、全角文字をいれてはいけないことや、文の終わりにはセミコロンを書くといった基礎的なことから教えて行きました。そして「変数とは、関数とは、if文、for文…etc」と順を追って教えて行きます。しかし今思えばこのやり方はあまり良くなかったかなと思っています。教える対象が「SEやプログラマー志望」の人たちだったらあるいは上手くいったかもしれません。しかしほとんどがデザイナー志望で学校に入学してきた人たちに最初からがっつりとプログラムをやるのはかなり難しい事でした。

一番苦労したのがコードを打つ事での「目に見える変化」が分かりにくいということ。コンソールにHello Worldが表示されたからといって、それがこの先どのようにWebサイトを作る上で役立つのか？生徒達からすると目が点です。これは自分の力不足もあったと思いますが、JavaScriptを学ぶ事で何が出来るようになるのか？それを上手く伝えきれていなかったように思います。

実際にサイトで使えるサンプルを使いながら編

そこで次に試したのが基礎的なプログラムの作法を教えた後に、サイトで実際に使えるようなロールオーバーやタブメニュー、カウントダウンタイマーなどの実例を用いつつ、プログラムを解説していくというやりかた。これは以前のやり方よりは手応えを感じました。しかし「動く実例」があるので結局コピペで終わってしまう人が多く、プログラムのロジック部分までしっかりと理解出来てそれを応用できる人は少なかったように思います。

ただ、デザイナー志望の子達に教えるには「目に見える分かりやすいサンプル」があった方が断然良いという事を確信できたのは大きな収穫でした。

いきなりjQuery編

それまでのやり方を一新しました。初心者でもいきなりjQueryから入るというやり方。プログラムの基礎的な知識(変数、関数、基本的な制御文など)さえも説明せずにいきなりjQueryで何か作らせるという方法です。「習うより慣れよ」とにかく手を動かせるようにしました。

実際にやってみて分かった事ですがこれが一番良かったです。jQueryを使うので記述が少なくて済み、尚かつすぐに「目に見える変化」があるものが作れる。生徒達もすぐにブラウザで確認でき、動いたり変化のあるものが作れるので楽しいようです。

JSの基礎的な知識などはjQueryでモノを作らせながら徐々に教えて行きます。ある程度慣れて来るとプログラムに対する意識も変わって来ます。「動かすのが楽しい」というように思ってもらえたらしめたもの。プログラム初心者にとって「プログラム → 難しい → 嫌い」といかに思わせないようにするかが勝負の分かれ目といっても良いでしょう。

学ぶ姿勢が身に付いた

jQueryをいきなり教えることでのメリットは他にもありました。jQueryはプラグインで様々な事が実現できるので、自ら色々なプラグインを「Googleで探して実験し、実装するという姿勢」が身に付いた事。新しい事を学習していく上では欠かせない事だと思います。もちろんjQueryだけやっていくのでは他知識が偏ってしまうので、その後フォローはしていきます。

ある程度プログラムに慣れて来た後は

今悩んでいるのはjQueryとJSの基礎が身に付いた後の事です。素のJavaScriptについて言語仕様の深いところまで教えるべきか、それとも様々な最新のライブラリを触らせて色々なものを作らせながら応用力を鍛えるべきかということ。先日某有名IT企業でバリバリJSばかりを書いている友人に相談したところ、後者のほうが良いんじゃないかという意見でした。

彼が言うには「今はゼロからJSを書く事が少なくなっている。何らかのライブラリを利用することがほとんど。なので色々なライブラリを触らせつつ何か作らせた方が応用力もつくし力になる」ということでした。みなさんはどう考えますか？

STEP1.基本のボタンデザイン

まずは基本のボタンデザインです。まずは下記HTMLを用いて、それにCSSを適用してきます。

<a href="#" class="button">button</a>

基本のCSSは以下のようになります。

.button{
  display: block;
  width:180px;
  text-align: center;
  text-decoration: none;
  padding:0.6em 1em;
  color: #FFF;
  background: #23bd52;
  box-sizing:border-box;
  text-transform: uppercase;     
  font-weight: bold; 
  border-radius: 4px;
}

真ん中のグラデーションを適用させたボタンにはさらに以下のCSSを書き足します。(classを追加で付与するか、上記のbuttonクラスに追加してください)

.btn-style1{
    background-image: -moz-linear-gradient(top, #23bd52, #1ea347);
    background-image: -ms-linear-gradient(top, #23bd52, #1ea347);
    background-image: -webkit-linear-gradient(top, #23bd52, #1ea347);
    background-image: linear-gradient(top, #23bd52, #1ea347);
    background-clip: padding-box;
  }

一番右はさらにtext-shadowプロパティを用いて文字に陰影をつけています。

STEP2. Font Awesomeを使ってアイコンをつける

次はFont Awesomeを使ってボタンにアイコンを付けてみましょう。Font Awesomeをダウンロードしてきてfont-awesome.cssをHTMLに読み込ませます。

もしくはFont AwesomeのGet StartedにあるBootstrapのCDNを使うのでもOKです。

HTMLは以下のようにします。

<a href="#" class="button"><i class="fa fa-home fa-lg"></i>HOME</a>

CSSはi要素のスタイルを追加してください。

i{
  font-family:FontAwesome;
  font-style:normal;
  padding-right:0.5em;
  margin:0 0 0 -10px;
}

HTML側のclass名「fa-home」を変えれば様々なアイコンを表示することができます。[アイコン一覧はこちら]。

※BootstrapのCDNを使っている場合はFont Awesomeの最新バージョンが出てからCDNにホストされているCSSが更新されるまでに若干のタイムラグがあるようです。

STEP3. 透過PNGテクスチャーを適用する

STEP2まででもフラットデザインで使うのであれば十分だと思いますが、もう一工夫したいという場合には透過PNGテクスチャーを使ってみましょう。

Transparent Texturesというサイトには透過PNGの様々なテクスチャーがあります。繋ぎ目がわからないようにシームレスになっているのでボタンだけでなく、Facebookやtwitterの壁紙や普段のサイトデザイン作成の際にも使う事ができます。

使う場合は気に入ったテクスチャを探し、そのテクスチャの右下にあるDownloadボタンを押すだけ。

プロトタイプでちょっと試してみたいという場合には
サイトの左サイドバーにあるCSSをコピーしてきてそのまま貼付ける事でも適用できます。(これはあくまでプロトタイプ用なので、サイトで公開する場合はダウンロードしたものを使って下さいとのこと)

透過PNGなので背景色を変えるだけでいろいろなパターンを試す事が出来ます。またグラデーションなどと組み合わせても良いですね。

まとめ

いかがでしたでしょうか。今回はボタンデザインということでご紹介しましたが、もちろんボックス全てに適用することができます。CSSは複数背景画像も適用できますし、アニメーションできたりと昔より格段に出来る事が増えて楽しいですね(…腐った牛乳全盛期が懐かしいw)

さて、そんな便利なAtomのMarkdownですが自分はどうも改行するための標準記法「半角スペース×2」に慣れないので、普通に一回の改行でしたいなぁと思っておりました。

調べてみたら案外簡単にできました。Atomには標準のパッケージとしてMarkdown Previewというパッケージが入っていますが、これの設定から…

Markdown Previewは下にスクロールしていきCorePakagesの中に入っています。

Break On Single Newlineにチェックを入れて有効します。
これでMarkdownで改行するとプレビューのほうでも改行してくれるようになります。

HTMLにも<br>タグが入ってくれるようになります。
HTMLに書き出したい場合はプレビュー画面で右クリックをして「Copy As HTML」でコピーして貼付けるか、「Save As HTML」で保存することが出来ます。

ただしSave As HTMLだとHTMLの<body>タグやCSSなども書き出されてしまうので、単純にブログの下書きとして使いたい場合は「Copy As HTML」でコーピーして貼付けた方が良いかもしれません。

僕も今この文章をAtomのMarkdownで書いています(笑)

20 christmas Icons

20個のクリスマス用アイコンセットです。PSDとPNGファイルで提供。3サイズ用意されており、大きい方から256×256、128×128、64×64があります。ライセンスに関してはダウンロードした中のLicence.txtに書いてあります。商用利用可。

Christmas Icon Set (24, Icons, AI, PSD, EPS, PDF, SVG, PNG)

様々な形式で提供されているアイコンセット。手書きのような暖かみのあるデザインです。こちらもPNGなどは複数サイズ用意されています。こちらのライセンスはCreative Commons Attribution 3.0 Unportedです。商用利用可。

window.matchMediaを使う方法

window.matchMediaを使うとCSSのMedia Queriesと同じようにスクリーンサイズによってJSの処理を分ける事ができます。具体的には下記のようにif文で条件判定をして使います。

if (window.matchMedia('screen and (min-width:768px)').matches) { 
	//768px以上のデスクトップでの処理
}else{
        //スクリーンサイズが768pxより小さい時の処理
	}

また以下の例のようにaddListenerを用いてリスナを追加する事で「特定のスクリーンサイズになったとき」やスマートフォンで「縦向きから横向きになった時」などにイベントを発火させることも可能です。

function getOrientationValue (mediaQueryList) {
    //処理
}
var screenCheck = window.matchMedia("(orientation: portrait)");
screenCheck.addListener(getOrientationValue);

window.matchMediaはIE11を始めChromeやFirefoxなどのモダンブラウザではサポートしていますが、IE9以下では使う事ができません。スマートフォンでのサポート状況はiOS7.1以降とAndroid4.1以降でサポートされています。

• (参考)Can I use matchMedia

CSSのcontentプロパティとJSで処理を分岐する方法

IE9にも対応しなければいけないような場合にはCSSのcontentプロパティとJSを用いる方法があります

@media (min-width:768px) {
  .navbar-nav {
    content:'desktop'
  }
}
@media (max-width:767px) {
  .navbar-nav {
    content:'mobile'
  }
}

$(function(){
var client = $('.navbar-nav').css('content');
if (client === 'desktop') {
   // do smth.
  } else {
   // do smth. else
  }
})

メディアクエリによってcontentプロパティの中身を変え、それをJSで取得して条件判定をします。この方法で実装する場合はHTMLが全て読み込まれてDOMが構築されてからでなければcontentプロパティが取得できず上手く動かないので、そこだけ注意をしてください。

matchmedia.jsを使う方法

IE9にも対応する方法としてはmatchMedia.jsを使うやりかたもあります。IE8以下はそもそもMediaQueriesに対応していないのでここで紹介したやり方を使う事はあまりないとは思いますが、IE9にも対応する場合にはどれでやるかを検討してやったほうが良さそうですね。

参考にしたサイト

• JavaScript でメディアクエリを行う window.matchMedia の使い方
• Change JavaScript behaviour with CSS Media-Queries

さて、一部で話題となっております「ジバニャンを書いてみた」シリーズ。

• R言語で書かれたジバニャン方程式(元ネタ)

これは乗るしか無い！このビックウェーブに！…ということでJSでやろうかと思ったのですが、既に書いている人がいたのでCSSで書いてみました。

思ったより簡単に書けたというか…、数年前のブラウザだと難しかったのでしょうけど今は曲線の表現や回転もCSSのみでできるので、やれることがかなり増えましたね。FirefoxやChromeで閲覧推奨です。

正直自分でもまとめていて、ここまでWindowsのシェアが低下していることに驚きました。

2011年当初は70%超だったWindows

グラフを詳細に見て行くと2011年まではWindowsからのアクセスは72%〜74%ほどありました。iPhoneやiPadなどのiOSはわずか2%程しかありません。ところが2012年の1QではじめてWindowsが70%を割り込みます。一方のiOSのシェアは2011年4Qではわずか2.67%でしたが、2012年1Qでは約4%に増加。2012年の2Qでは9.57%まで拡大します。これは2011年10月に発売されたiPhone4Sの影響が大きいと考えられます。iPhone4SはそれまでiPhoneを日本国内で独占的に販売してきたソフトバンク以外にauも扱うようになったため一気に裾野が広がった感じですかね。

坂道を転がり落ちるWindows 70%が35%に低下 受難の2012年

2012年の1Qでは約70%あったWindowsのアクセス割合が１年後の2013年1Qでは35.66%と、およそ34%も低下しています。2012年はiPhone4Sが良く売れた事に加え、iPhone5が秋に登場しました。また春には第三世代iPadが登場し、iOS端末を持つ人が増えた事も要因として考えられます。

docomoによるiPhone販売で止めを刺されたWindows

それまで右肩上がりだったiOSのアクセス割合は2013年の1Q〜2Qで一旦横ばいになります。そしてiPhone5Sの発売があった3Q以降再び上昇に転じます。これはやはりdocomoがiPhoneの販売に乗り出した事でiOS端末が増えたという事も一因にありそうですね。

当ブログの特殊要因の考察

当ブログは長らく更新していなかったので2012年からのアクセス数はほぼ横ばいです。継続的に読まれているページとして「自分でできるMacが起動しないときの5つの対処法」があります。このページはその内容からMacユーザーがアクセスする可能性が非常に高いため、サイト全体としてもMacやiOSユーザーの割合が他の一般的なサイトよりも高い可能性があります。

また、当サイトの内容がWebデザインやIT関連の話題が多いため、iPhoneやiPadを利用するデザイナーやエンジニアの方が多いと推察しています。そのため他の一般的なブログよりもMacやiPhoneユーザーの割合が高くなる傾向があるかもしれません。

約半数がiOSとAndroidでアクセスする時代

直近の2014年3QのデータではWindowsが25.67%となっています。そして初めてiOSとAndroidを加えたモバイルデバイスでのアクセスが5割を越えました。(2014年8月頭にブログをレスポンシブデザインににしたのでその影響もあるかもしれません)当ブログにアクセスしてくる約半数の方がiPhoneやAndroidなどの端末で閲覧しているということになります。

数年前のWeb業界はWindowsのIEが世界の中心(言い過ぎ？w)といっても過言ではありませんでした。 それが今ではWinの割合は相対的に低下し「Webはスマホで見る時代」がやってきました。これから先もこの傾向は変わらないでしょうし、Flashのみで作られたサイトのような「スマホで見られないサイト」は確実に減って行くでしょう。僕らWeb制作者も時代に即したWebサイトを作れるようにしていかないといけませんね。

You deserve Natrel

飲料メーカーのWebサイト。PC版では大きな画像が大胆に使われていますが、モバイルでの見た目も破綻していません。上手くレスポンシブでデザインされていますね。

Nationale Opera & Ballet

「オランダ国立バレエ団」のサイト。トップで動画を使っていたり、グローバルナビゲーションが画面下部に固定されていたりと、あまり他では見ないような事をやっていますが、見事に各デバイス毎に最適化されています。デザイン的にも参考になるサイトですね。

Sculpt Media

ドバイにあるクリエイティブエージェンシーのサイト。様々な企業のブランディングやWebサイト構築、アプリの制作など色々やっているようです。サイト全体の設計が非常に洗練されていますね。「Work」ではこの企業がこれまで手がけたwebや印刷物、アプリなどが掲載されているのでこちらも是非チェックしてみてください。

Daniella Draper

シルバーアクセのお店のサイト。フラットデザインのお手本になるようなサイトですね。SHOPから実際の商品を購入することもできるようです。

Le Tanneur

フランスにあるバッグなどの革製品を扱うブランドショップのサイト。女性受けしそうなデザインですね。もちろんレスポンシブ対応、細かな部分もしっかりと作り込まれています。

New York Fashion Week

NYファッションウィークの特設サイト。twitterを使ったソーシャルHubサイトです。こういうキャンペーンサイトも面白いですね

Riot Design

Webやグラフィックデザインの会社のサイト。CSSアニメーションを使っていたり、細部ギミックや見せ方も参考になりますね。

いかがでしたでしょうか？Bootstrapを使うとどれも似たり寄ったりのサイトになるんじゃ…と昔は思っていましたが使い方次第ですね。効率よくサイトを作る上での選択肢としてBootstrapの導入を検討してみてはいかがでしょうか？