Coding Design's Tumblr

WordPressを使う人はみんな、ほんと、VCCWを使ったら幸せになれるのに！という西村さん（@marushu）の言葉に誘われて勉強会に参加しました！ うん、ほんとにこれはすごい！

VCCW http://vccw.cc/

なんといっても仮想環境で動かすので失敗した、ってときにさくっと削除できるのがありがたい。 あとリモート環境からリソースをさくっと持ってきて、作業後さくっとリモート環境に戻せるwordmoveが入っていること。 YEOMANといい、VCCWといい、いろーんなプログラムを組み合わせた開発の自動化がものすごく進んでますね。

ということでまとめをば。

環境の準備

端末にVCCWまわりをインストール

VirtualBoxをインストール http://pc-karuma.net/mac-virtualbox-install/

Vagrantをインストール https://www.vagrantup.com/downloads.html

ターミナルを起動して下記コマンドを実行

vagrant plugin install vagrant-hostsupdater

さらにターミナルで下記コマンドを実行

vagrant box add miya0001/vccw

プロジェクトフォルダにVCCW導入

プロジェクトのフォルダを作る（プロジェクトのフォルダ名は任意で）

mkdir vccw-test

フォルダに移動

cd vccw-test

vccwをクローン

git clone [email protected]:vccw-team/vccw.git もしくは git clone https://github.com/vccw-team/vccw.git を実行

vccwフォルダに移動

cd vccw

念のためprovisionなどのフォルダやファイルが入ってきていることを確認

ls -la

site.ymlをprovisionフォルダからコピー

cp provision/default.yml site.yml

念のためsite.ymlコピーできたことを確認

ls -la

起動する環境の設定ファイルを編集（site.ymlは中身を読んで設定を変えるなど。site.ymlが提供されている場合はそのファイルをvccwフォルダの直下にコピペ）

vi site.yml

通信が安定している場所でvagrant環境を起動（最初は5分とか10分とか、時間がかかるかも）

vagrant up

途中でmacのログインユーザーのパスワードを聞かれるので入力

コマンドの実行が終わったらブラウザで http://wordpress.local/ を開くとWordPressのページが開きます！

http://wordpress.local/wp-admin/ でログインできます！ （ユーザー、パスワードはsite.ymlにWordPress User部分に記載されているものです）

WordPressの開発

Bitbucketでwordpressフォルダ内にgitリポジトリを置いて作業します。

SourceTreeを使う前提です。

すでに構築された環境をクローンする前提です。

最初の環境を作る人

SourceTreeでリポジトリを作成（リモートにも作成する）

wp-contentフォルダ以下のみ共有するように.gitignoreを記述

SourceTreeでコミットする内容を確認後コミット＆プッシュ

BitbucketのリポジトリのURLを共有

環境を提供される人

SourceTreeだとフォルダの中が空でないとリポジトリが作れないので、Finderなどでwordpressフォルダ内にあるファイルをいったんどこかにまるっと退避

共有されたBitbucketのリポジトリのURLを開く

開いたページで[↓](矢印の下にお盆みたいなマーク)と表示されているクローン用のボタンをクリックしてSourceTreeでクローン （もしくはその隣のテキストボックスのテキストをコピーしてSourceTreeでクローン）

wordpressフォルダにWordPressのファイルが落ちてくる

退避したファイルのうち、「wp-contentフォルダ以外」をwordpressフォルダに戻す

確認のためvagrantのサイトを開いてプラグインが追加されているか確認

ひとまずこれで準備完了。

作業をやめるとき

vagrantの環境を起動したままだとメモリを使い続けるのでこまめに停止するのがよいそうです。

vagrant global-status

いろんなフォルダに散らばっているvagrantの状況を確認できる。 どのフォルダにいても実行可能。

vagrant halt (ID)

OSシャットダウン。vagrantによるメモリの消費がなくなる。 すぐに利用しないvagrantは該当するフォルダにcdで移動 vagrant halt するか vagrant global-statusで表示されるIDを使って vagrant halt (ID) で停止する 後者はどのフォルダにいても実行可能。 途中でmacのログインユーザーのパスワードを聞かれるので入力する

vagrant destroy (ID)

OSシャットダウン＆リソースの削除。環境は残りますが中身は何も作業していない状態になる IDについてはvagrant haltと同じ。

再度作業を始めるとき

vagrant up (ID)

です。

ここから先は森は試せてないですが、VCCWのハイライトの1つ、wordmoveなのでちゃんと使えるようになっておきたいところです。

wordmoveを使ってリモートのソースを取得＆リモートに作業反映

前準備

pwdでvccwフォルダにいることを確認

vi Movefile

localはローカル環境とstagingはリモート環境

stagingにリモート環境の設定を入力

sshもしくはftpのコメントをはずして設定を入力

リモート環境からソースを取得

pwdでvccwにいることを確認

vagrant sshで仮想環境に入る

cd vagrant

wordmove pull --all サーバから全部持ってくる

リモート環境に作業反映

pwdでvccwにいることを確認

vagrant sshで仮想環境に入る

cd vagrant

wordmove push --all する

（対比して参考までに）wordmoveを使わないでリモート環境をvagrantに作る場合

リモート環境

ログインして[ツール]-[エクスポート]をクリック、ボタン「エクスポートファイルをダウンロード」をクリック

Advanced Custom Fieldを入れている場合は[カスタムフィールド]-[Export]をクリック、Field Groupsのグループをすべて選択してボタン「Export XML」をクリック

wp-contentのpluginsフォルダ、themesフォルダをダウンロード

vagrant環境

wp-contentフォルダ配下にダウンロードしたpluginsフォルダ、themesフォルダを入れる

[ツール]-[インポート]でAdvanced Custom FieldのXMLファイルがある場合はインポート

コマンドライン勉強会

コマンドライン勉強会に参加してきました〜。 知らないことばかりで大変勉強になりました！ 少しだけコマンドが怖くなくなった気がします。 講師の政倉さん、新沼さん、ありがとうございました！

勉強会の概要

Mac ユーザーのためのコマンドライン勉強会 https://html5j-kagoshima.doorkeeper.jp/events/24443

講師の方のブログ、資料

講師をされた新沼さんのブログ（スライドあり） http://takachan.hatenablog.jp/entry/2015/05/24/075655

勉強会で扱ったコマンド https://gist.github.com/Twinuma/9322f88810264f1a2143

UNIXのコマンドについて

UNIXのコマンドは単機能のものを組み合わせて使う思想になっている

基本の基本

ひとまずこれだけは知っておこう、というもの。

cd フォルダを移動する

cd (フォルダ名) フォルダに入る

cd .. 一つ上にあがる

cat (ファイル名)　ファイルをターミナルで開く

ls　同じ階層のリストを表示

ls -l　権限なども出てくる

ls -G　色付きで権限なども出てくる

pwd　現在のフォルダパスを表示

基本

ファイルを編集したり見たり作ったりというもの。

open

open . 現在地をファインダーで開く

open (ファイル名)　ファイルをソフトで開く

vi

vi (ファイル名)　ファイルがなければ新規作成＆コマンドモードでファイルを開く

i　入力モードにする

esc　コマンドモードにする

:wq　（コマンドモード時）保存してエディタを終了

:q　（コマンドモード時）保存しないでエディタを終了

mkdir (フォルダ名)　フォルダを作る

コマンドの使い方を知りたいとき

いろいろ知りたくなったらマニュアルを。

man -h　コマンドの説明を表示

ちょっと進んだ使い方

コマンドを連続して実行するときは | を使う

(コマンド名) > name.txt　コマンドの実行結果をname.txtに保存する

touch　ファイルがなければ新規作成＆タイムスタンプを変更する

history 使ったコマンドの履歴

!(historyで表示した数字)　履歴のコマンドの実行

alias (省略語)='(コマンドの内容)'　ターミナルを開いている間だけのショートカットを作る

ショートカットを残したい場合

vi ~/.bashrc

iを押してinsertモードに

aliasコマンドを追加(alias ll='ls -l'など)

:wqで保存

vi ~/.bash_profile

test -r ~/.bashrc && . ~/.bashrc を追加して.bash_profile から .bashrc を読み込むようにする

curl http://checkip.amazonaws.com/ グローバルIPを知るコマンド

pbcopy (ファイル名)　ファイルの内容をクリップボードにコピー

pbpaste　クリップボードの内容をペースト

which　コマンド名　コマンドが入っているところのパスを表示

ターミナル以外のソフトでステキな組み合わせの紹介

iterm　ターミナルのかわりに使うソフト

zsh　コマンドの拡張版

oh-my-zsh　フォルダやコマンドのリストから選択して使えるようにする（エイリアスも入ってくる）

peco　履歴の検索

Homebrewについて

Macに入れるパッケージをまとめて管理できる

xcodeが必要。xcodeは容量が大きいのでおうちで入れましょう。

Homebrewが出てくるまではMacPortsが人気があった

MacPortsとHomebrewは一緒に使わない。どちらかに統一する

homebrew-caskについて

dmgファイルでインストールするようなソフトもHomebrewで管理してインストールするもの

インストール可能なものは下記URLで検索できます。 http://caskroom.io/search

検索した項目にマウスオーバーするとコマンドが表示され、コピーできます

homebrew-caskでインストールしたソフトは いつものアプリケーションフォルダ（/Applications）とは 別の場所に入ります。 Alfredなんかのランチャーソフトからソフトを起動しているときは ソフトが入ったところのパスを指定しましょう。

Alfredであれば右上のアイコンをクリック→Prefernceをクリック

開いたウインドウの左上からFeaturesをクリック

右下のSearch Scope内にパス（/Users/(ユーザー名)/Applications とか）を追加

brew-fileについて

brew-fileは入れたパッケージのリストを出力するパッケージ

githubにリストを残すので、他の端末に変わった時、一括でインストールできるメリットがある http://www.task-notes.com/entry/20150316/1426474800

Cakebrewについて

HomebrewのGUI版。

コピー元フォルダから日付の名前のフォルダを作るってコマンド

cp -r コピー元ファイル名 date +"%Y%m%d"

感想

コマンドラインでの作業はとにかく早いという印象。 森のようなHTMLコーダー業でも、

Grunt、Gulpなんかのタスクランナー

プラグインやフレームワークをインストールするbower

それらを組み合わせたものをインストールするYEOMAN

いまさらながらなんですが、ゴールデンウィーク中にMacをYosemiteにアップデートしました。 その結果、事前に見聞きしていたとおり不具合が起きました…。 いまは問題なく使えています。 まだアップデートしてない方って、あんまりいないかもですがまとめておきます。

OSのアップデート途中で止まる

ほんとによくあることのようですが、私もひっかかりました。

まず残り1分と表示されてから…1分じゃ終わらないアップデート。よくある。 そこは慌てず騒がず待っていると次へ進みました。

グレーのアップルマークとプログレスバーが表示されて、プログレスバーがだいたい50%くらいのところで止まりました。 2時間待っても、3時間待ってもそのまま。世の中には12時間待ったという方もいらっしゃるようですが、下記の記事を見て電源ボタン長押しで強制終了。

http://nomaddesignerstips.com/yosemite-install-progress-bar/

その後やったこと、記事の引用です。

1. 周辺機器を全て取り外す 2. セーフブートで起動（手順は以下のAppleサポートからの引用に記載） 3. セキュリティソフトをチェック 4. 再起動

セーフブートで起動する方法 Mac を起動したら、すぐに「shift」キーを押し続けます。これで Mac が セーフブート されます。ヒント：起動中に (「shift」キーでなく)「shift + command + V」キーを同時に押し続けると、セーフブートの進捗状況を確認できます。 注意：セーフブートでは、ディスクチェックやその他のオペレーションが行われるため、通常の起動よりも時間がかかります。

結果的にはYosemiteのインストールは終わっていて、再起動がかかってなかっただけなのかなと思ったところでした。

重い…ひたすら重い

Spotlightがインデックスを作りにかかったので、仕方ないかなと思いましたが、ひとまず下記の記事にあることをすべてやりました。

http://gori.me/mac/mac-tips/64719

Coda2が起動しない

メインエディタとして使っているCoda2が起動しない。 なかなかびっくりしましたが、なんとなくプラグインファイルかもね、と思って下記フォルダ内のファイルをデスクトップに移動したのちCodaを起動。 ビンゴ！無事起動しました。

/Users/(ユーザー名)/Library/Application Support/Coda 2/Plug-ins

原因はEmmetプラグインで大元の公開元では更新されていませんでしたが、Issueを見ると修正版を公開されている方がいたのでこちらを反映。

https://github.com/iemadk/emmet-coda-plugin

Emmetが使える状態で起動しました。ほっ。 もしかしたらEmmetプラグインにバグがあるかもですが、いまのところ特に問題なさそうです。

まとめ

わりと軽い不具合で済んだと思いますが、軽いと思えるのは先人の方々がログを残してくださったことに尽きます。心から感謝です。

OSのアップデートが終わってから2日くらいは重かったですが、だいぶ普通のスピードで使えてます。ワイヤレスマウスがつながりにくいというのもあったんですが、最近はちゃんとつながるようになりました。 いろんな不具合が出ている間はメモリのバランスを見てたのかな？と思うことでした。久しぶりに使うアプリが重いことありますもんね。

ひとまずOSアップデートについて思ったのは下記のとおり。

何かの時のためにTime Capsuleなどのバックアップ必須

連休中など余裕のあるときにやる

けっこう時間がたってネット上にナレッジが多くなってからやる

周辺機器をはずす

サブマシンからやる

動作の重さを軽くする処置をしたらちょっと時間がたつのを待つのもいいかも

YouTubeチャンネルの最新動画をiframeで埋め込んでいる部分で動画が表示されなくなってたので、YouTube APIを調べました。

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ https://developers.google.com/youtube/player_parameters?hl=ja#Manual_IFrame_Embeds

iframeで動画を埋め込む

その結果、URLにパラメータを渡すことでいろんな動画を再生することがわかったので設定。 （以下引用でソースが出てくる際は引用符（””）が全角になっているので、半角の引用符に変えて利用してください）

<iframe src=“http://www.youtube.com/embed?listType=playlist&list=PLC77007E23FF423C6″  frameborder="0" allowfullscreen></iframe>

ここで使ったキーワードは以下の2つです。

listType…search、user_uploads、playlistというキーワードのいずれかを指定。 list…listTypeパラメータで指定したキーワードに合わせてそれぞれ検索キーワード、ユーザー名、再生リスト名を指定。

ほかにもパラメータはたっぷりあるので設定すると幸せになるかもです。

ユーザー名の確認方法

listパラメータで指定するユーザー名はYouTubeにログインしている状態で、右上のアイコンをクリック→開いたブロック内の歯車アイコンをクリック→アカウントの概要が表示されるので「氏名」のところにある「詳細情報」をクリック。

すると「アカウント情報」ってところにYouTube ユーザー IDとYouTube チャンネル IDが表示されます。

ということでlistパラメータにYouTube ユーザー IDを指定して、下記ソースでブラウザで表示してみました。

<iframe width="300" height="200" src="http://www.youtube.com/embed?listType=user_uploads&list=hFwi748jRENXh9iZDbpQ8Q" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

でも動画が表示されない…。

接頭辞の存在

ユーザーIDでもチャンネルIDを指定しても表示されない。むむ…と思ってさらに調べると、listパラメータにはチャンネルのユーザー名やチャンネル名を指定してもダメで、ユーザーIDの頭に「UU」とつけると最新のアップロード動画が表示されることが判明。UUはUser Uploadの略だそうです。

<iframe width="300" height="200" src="http://www.youtube.com/embed?listType=user_uploads&list=UUhFwi748jRENXh9iZDbpQ8Q" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

これは永続的に使える方法ではないかもよと書いてありました。念のため。

他の接頭辞としては下記のものがあるようです。

LL…likes list

WL…watch later list

HL…history list

FL…favorites list

参考：

Embed Latest Video from Channel http://www.janes.co.za/embed-latest-video-from-channel/

Win7-IE10でborder-top-left-radiusとborder-bottom-right-radiusを単独で使うと値が反映されません。

img { border-top-left-radius: 100%; }

とか

img { border-bottom-right-radius: 100%; }

とか効きません。 これらの値を単独で指定することは珍しいことかもしれないけど、ひさしぶりになんじゃこりゃなバグ。一括指定も同じ。

img { border-radius: 100% 0 0 0; }

とか

img { border-radius: 0 0 100% 0; }

は値が反映されません。

対策：ほかの角の値を1pxでも入れること。1pxの角丸ってないので0とほとんど変わりません。

img { border-radius: 100% 0 0 1px; }

不思議な実装ですねぇ。 Win8はエミュレータでしか確認してませんが、たぶん大丈夫かと。

アプリでもWebでも画面を作りこむとき、幅と高さが可変というのが重要ですね。 ヘッダ、フッタ、サイドバーは固定、メイン部分はは可変というのがよくあると思いますが、そんなときにCSSの値にcalcを使ってみましょう。

calcのサポート状況はCan I useでご確認ください。 IE9はサポートしていますが、background-positionでは使えません。 Android4.4以上はサポートしていますが、掛け算・割り算が使えません。

See the Pen cssの値calc by Fuminori Mori (@moonglows76) on CodePen.

この例では、高さに関して

ヘッダ・フッタの高さを60px

コンテンツ領域の高さを100% - 120px

コンテンツ内のサイドバー、メイン部分の高さを100%

と指定し、幅に関して

コンテンツ内のサイドバーを200px

コンテンツ内のメイン部分を100% - 400px

と指定しています。まさに意図どおりに表示されてますよね（サポートされているブラウザであれば）。

ボックスのサイズを指定するときはbox-sizingプロパティをborder-boxにすると幅と高さがborderとpaddingと内容（width/height）を含んでいるものとして指定できるので便利です。 通常はbox-sizingプロパティはcontent-boxで、ボックスの幅と高さは内容（width/height）だけになります。これだとボックスの幅・高さの指定がしにくいのでご注意を。

box-sizingのサポート状況はCan I useでご確認ください。 プロパティのサポートはほぼほぼOKですが、padding-boxが使えないブラウザが多いです。まあborder-boxで事足りるかな。

IE9以上でOKの案件が多くなってきて、いろいろと組み方も変わってきますね。積極的にあたらしいものを取り入れていきましょう〜。

追記：仕様を見ると、下記のように注釈がありました。

Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces.

つまり、calc内の加算減算記号の前後にはスペースが必要で、乗算除算は必要ないと。株式会社ユニマルの永田さん、ご指摘ありがとうございました！

レスポンシブWebデザインでは幅にパーセントを使った指定をします。 そのパーセント値やパーセント値からpx値に置き換えた値は小数点以下の値が出てくることがよくあります。

そんなときブラウザはどのようにまるめる計算しているのかを検証したエントリーがあったのでご紹介。

まず、最初にブラウザのアクションは2つあります。

ひとつはパーセンテージの丸め方。

IE7-11…小数点第二位に切り捨てる

上記以外のモダンブラウザ…より多くの小数点以下の桁数を丸める

もう一つはパーセンテージから割り出されたピクセル値の出し方。 IE8を例にみてみます。

例

コンテナの幅は 1325px

コンテナ内のボックスに幅 50.5290112% を指定

このボックスの幅は計算上は 669.5093984px ( (1325 / 100) x 50.5290112)

IE8では669pxになる

IE8でどう計算されているかというと、

IE8では指定した幅のパーセンテージを 50.52%として小数点第二位に切り捨てる

計算結果は669.39px (1325 / 100) x 50.52

ブラウザが計算結果から最も近い整数値にまるめると 669px となる

テストページはこちら。

ブラウザ一覧表

パーセント列…パーセント値の切り捨て位置を示します

パーセントからのピクセルの丸め方列…パーセント指定を計算した結果に小数点以下が現れたときのピクセルの丸め方を示します

ピクセルの丸め方…小数点以下のピクセル値が指定されたときのピクセルのまるめ方

See the Pen パーセント、ピクセルのまるめ方についてのブラウザ一覧表 by Fuminori Mori (@moonglows76) on CodePen.

ブラウザによって幅が違うな〜と思った時には、ブラウザのレンダリングの違いを疑ってみて、クライアントに説明する論拠とするといいかもですね。

出典：Browser Rounding and Fractional Pixels

CSSでpx, %, emって単位は使っているけど、新しく追加された単位はどうでしょうか。 レスポンシブWebデザインのサイトやモバイルデバイスのサイト・アプリを作るようになると、もちっと便利に使える単位がないのかしらと思うところです。

そこで、CSSの新しい単位についてよくまとめてくださってる投稿があったのでご紹介します。

紹介されている単位は7つです。

rem

vh と vw

vmin と vmax

ex と ch

rem

まずはみなさんご存知の em に似ている rem から見て行きましょう。 em は指定されているフォントサイズを 1em とする単位です。 下記のように使いますね。

body { font-size: 14px; } div { font-size: 1.2em; } // 1.2em は 14px * 1.2 = 16.8px となる

em で指定する値は親要素の値に対する比率を指定することになります。 そのため、em で指定した要素内でさらに em を指定すると、値の継承が繰り返されて計算が複雑になったり、小数点以下がたくさん発生するので注意が必要です。

<body><!-- 14px --> <div> Test <!-- 14 * 1.2 = 16.8px --> <div> Test <!-- 16.8 * 1.2 = 20.16px --> <div> Test <!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div> </body>

そこで出てきたのが rem です。rem はいつもルート要素（だいたいの場合はhtml要素）のフォントサイズを基準とします。rem の r は root です。

html { font-size: 14px; } div { font-size: 1.2rem; }

ということでhtml要素でフォントサイズを指定して、div要素で rem を使う用に変更すると上のdivの入れ子の例でフォントサイズがすべて16.8pxになります。

rem はフォントサイズに利用するときに便利なだけではありません。 グリッドデザインを実現するときの幅の単位として見通しがききやすくなるので便利です。

.container { width: 70rem; // 14px * 70 = 980px }

remのサポート状況

なんとなく気づく方もいらっしゃるかもですが、rem は元がフォントサイズなので固定幅になり、様々な解像度のデバイスに対応するレスポンシブWebデザインには適用しにくいです。 この意味では次に紹介する vh と vw はとても魅力的です。

vh と vw

レスポンシブWebデザインのサイトはビューポートに対するパーセンテージにとってもとっても依存しまくります。でも残念なことに%という単位は親要素から値の継承をするので em と同じで使いにくいんですね。

そこで出てきたのが vh と vw です。 この2つはそれぞれ画面の幅、高さを1/100にしたものを単位とします。例えば 320 x 480 の画面では 1w = 3.2px, 1vh = 4.8px となります。

この単位を使えばレスポンシブWebデザインのサイトはずいぶん作りやすくなるんじゃないでしょうか。Android のサポート状況が残念なところなんですが。。

vh, vwのサポート状況（ Notes に注意書きがあります）

vmin と vmax

vhとvwはビューポートの高さと幅に関係した値になりますが、vmin、vmax は幅、高さに関係なく、それぞれビューポートの最小値の1/100と最大値の1/100になる単位です。 幅が1100px、高さが700pxのとき、1 vmin = 7px, 1 vmax = 11px となります。

この単位をどう使うのさ？って思いますよね。

まず vmin。モバイルデバイスにいつも表示させ、画面の縦横にぴったりくっついている要素は下記のスタイルで表示できます。

.box { height: 100vmin; width: 100vmin; }

次に vmax。画面全体をカバーする要素でしたいとき、下記のスタイルで表示できます。

.box { height: 100vmax; width: 100vmax; }

vh, vwは縦置きと横置きで値が変わりますが、vmin, vmax は値が変わりません。これらを利用して面白いデザインができるかもですね。

vmin, vmaxのサポート状況（ Notes に注意書きがあります）

ex と ch

ex と ch という単位は文字が基準になっているという意味で em と rem という単位に似ています。ex と ch が違うのはフォントに依存するということです。

ch は chracter unit で、0（ゼロ）の幅を単位とします。 基本的には等幅フォントが対象で、要素にwidth: 40ch と指定すれば40文字入る幅が設定され、通常のフォントだけでなく点字のレイアウトにも便利です。

ex は指定されているフォントの x の高さ、もしくは em の半分の大きさを単位とします。ex はいろんな用途がありますが、タイポグラフィ的な微調整に使われることがほとんどかと思います。 例えば、sup要素、sub要素の縦位置を変更するには下記のスタイルを書くことが考えられます。

sup { position: relative; top: -1ex; } sub { position: relative; bottom: -1ex; }

body { line-height: 2; } sup { position: relative; top: -1ex; } sub { position: relative; bottom: -1ex; }

See the Pen exとch by Fuminori Mori (@moonglows76) on CodePen.

ex, ch のサポート状況

いかがでしたか？ 個人的には vh と vw はかなり便利だと思っていて、調整用のjsを使って実装したのだけど、残念ながらうまく動作しないという苦い経験があります。Androidだけクリアできればよかったんですが。。。

単位はベースの部分で1回決めたらあまり見直さないですが、ベースであるゆえに新しい表現のアイデアが生まれやすいと考えられます。今後も積極的にウォッチしていきたいところです。

reWebアプリは基本的にブラウザで開いて使うのでURLが見えてしまって、ネイティブあぷりっぽく見せられない、って思いますよね。

そこでWebアプリでもネイティブアプリっぽく起動するためにManifest for web applicationという仕様が策定中です。この仕様は下記のようなJSONファイルの中身を定義しています。

{ "short_name": "Kinlan's Amaze App", "name": "Kinlan's Amazing Application ++", "icons": [ { "src": "launcher-icon-0-75x.png", "sizes": "36x36", "type": "image/png", "density": "0.75" }, { "src": "launcher-icon-1x.png", "sizes": "48x48", "type": "image/png", "density": "1.0" }, { "src": "launcher-icon-1-5x.png", "sizes": "72x72", "type": "image/png", "density": "1.5" }, { "src": "launcher-icon-2x.png", "sizes": "96x96", "type": "image/png", "density": "2.0" }, { "src": "launcher-icon-3x.png", "sizes": "144x144", "type": "image/png", "density": "3.0" }, { "src": "launcher-icon-4x.png", "sizes": "192x192", "type": "image/png", "density": "4.0" } ], "start_url": "index.html", "display": "standalone", "orientation": "landscape" }

定義されている中身は以下のとおりです。

short_name…短い名前

name…通常の名前

icons…ブックマーク時に表示されるアイコン。複数指定可能。

start_url…アイコンをクリックしたときに表示するページURL

display…ブラウザのUI表示指定。fullscreen（ChromeのUI表示なし）、standalone（ChromeのUI表示なし、ステータスバーなどのUIは表示）、minimal-ui（戻る、進むなど最低限のUIを提供）、browser（ブラウザでのふつうの開き方）のうちどれかを指定。

orientation…landscape（横向きで開く）、portrait（縦向きで開く）のうちどれかを指定。

iconsで指定されている値は以下のとおりです。ここで指定したアイコンの中で、ブラウザが適切としたものがホーム画面のアイコンなどで使われます。

src…画像の URL

sizes…画像のサイズ

type…画像のMIMEタイプ

density…ピクセル密度

このJSONを外部ファイルにして、Webページのlink要素で読み込むようにマークアップしておきます。

<link rel="manifest" href="manifest.json">

この実装のデモページはこちら。 Webページを開いたらメニューを開いて「ホーム画面に追加」→名前の設定ウインドウが出るのでOKしてみてください。ホーム画面にアイコンが追加されます。

そのアイコンをタップすると横向きの画面がフルスクリーンで表示されます。おもしろいですね～。

サポート状況はAndroidのChromeのバージョンが39になっていたらすぐ試すことができます。他のブラウザはまだ対応していません。 サポート状況はまだまだですが、面白い実装ですよね。

HTML5で廃止された要素・属性はいろいろあるのだけど、もしかしたら見逃してるかもしれないものがあるかも。そんなエントリーがあったのでご紹介。紹介するのは5つです。

hgroup要素

pubdate属性

scoped属性

command要素

center要素

hgroup要素

見出し要素をまとめる要素として当初HTML5の仕様に入っていたhgroup要素は結局勧告された仕様からはずされました。下記のようにタイトルとサブタイトルをまとめる要素として便利かと思ってたんですけどね。。

<header> <h1>タイトル</h1> <h2>サブタイトル</h2> </header>

じゃあ、いまの仕様でどのようにタイトルとサブタイトルをマークアップするのが適切なのか？ってことなんですが、仕様の中でいくつか例が示されてます。

■header要素内にh1要素とp要素

<header> <h1>タイトル</h1> <p>サブタイトル</p> </header>

■h1要素内をコロン（:）で区切る

<h1>タイトル: サブタイトル</h1>

■h1要素内に改行とspan要素

<h1>タイトル<br><span>サブタイトル</span></h1>

hgroup要素はWHATWGの仕様ではまだ残っているのだけど、安定版のW3Cのほうでなくなってるので使わない方向でOKかなと。

pubdate属性

pubdate属性はtime要素の属性です。pudate属性があるときは親要素のarticle要素の記事が書かれた日時を示すものでした。

<article> <h1>記事タイトル</h1> <p>本文</p> <footer><time datetime="2014-11-14" pubdate>2014年11月14日</time></footer> </article>

pubdateを使うかわりにブログポスト用のスキーマを使うのがよいということになってるようです。

<article itemscope itemType="http://schema.org/BlogPosting"> <h1 itemprop="headline">記事タイトル</h1> <p itemprop="articleBody">本文</p> <footer><time datetime="2014-11-14" itemprop="datePublished">2014年11月14日</time></footer> </article>

scoped属性

scoped属性はstyle要素の属性です。マークアップされた場所の親要素の範囲内で効くスタイルを指定できるものです。

<article> <h1></h1> </article>

仕様では廃止されましたが、Firefoxではサポートされている状況のようです。

command要素

command要素は訪問者が呼び出せるコマンドを表す要素です。アプリケーションにはいろんなコマンドを実行するボタンがあるわけですが、それらを実装するのに使う予定でした。

でも、どのブラウザもcommand要素を実装していません。

center要素

どうしてcenter要素をここに入れるのか…ってところなんだけど、HTML5やJavaScript界隈で有名なRemy Sharpさんが「center要素はスゲー」ってツイートしてたから入れたとのこと。

The <center> tag is awesome. Why have I been avoiding it all these years.

— Remy Sharp (@rem) 2014, 8月 13

Remyさんがのちにブログで語った本意は、 div要素は意味がなく、CSSでスタイルを付ける必要がある、 同じようにcenter要素は意味が無いけどCSSでスタイルを付ける必要はない、ということでした。

ツイッターのコメントを見てると、じゃあblink要素を使ったらもっといいね、とか冗談で返してるので、そこは大人の対応で。

結論

当然のことだけど、いまはなくなっている要素・属性があることを認識しようって話。当初便利だと思って使った要素がブラウザベンダに受け入れられなかったために廃止になったよ、と。

森の個人的な感想

どんな要素が使えるかはHTML5の仕様書とHTML4との差分の仕様を見るのがよいですよね。

その後の話で、HTML5の仕様はいまW3C版とWHATWG版があって、どっちが正しいのかって議論があるのだけど、結局はブラウザベンダが実装するかどうかにかかってる。たくさん実装された仕様が正しい。正しいというか世に出てる。世に出ないと何も生み出せない。 だからブラウザの実装状況をCan I useでチェックするのが手っ取り早い。

どちらが正しいかどうかではなく、安定して使えるものを見るならW3C、これからどうなるかを見たいならWHATWGを見ようって使い分けが必要になってる。

あ、HTML5.1…まだまだHTML5の議論は続きますね。よりよいWebのために。

HTML5のFile APIを使うと、画像ファイルをサーバにアップロードしなくてもブラウザで表示できちゃうよ、って話。

このAPIを使わない場合、端末からサーバのどこかに画像をアップして、その画像を端末にダウンロードすることでブラウザで表示する、なんて面倒な手順を踏むことになります。便利な世の中になったものです。

さて、File APIというからにはファイル情報を扱う専用のオブジェクトがあるわけです。File APIのオブジェクトは3つあります。

File…メタデータを扱うFileオブジェクト

FileList…Fileオブジェクトを格納する配列

FileReader…ファイル情報を読むためのオブジェクト。いくつかメソッドやイベントハンドラでファイルを扱える。

これらを使ってinput要素で選んだファイルを所定のdiv要素内に表示させてみます。

See the Pen File APIで画像読み込み by Fuminori Mori (@moonglows76) on CodePen.

解説をいろいろ入れたんで複雑に見えるかもですが、シンプルなスクリプトです。

このスクリプトを使えば、画像をサーバに送る前に中身を確認することができます。 Fileオブジェクト内にはファイル名、ファイルサイズ、最終更新日という情報も入っているので一緒に表示することもできます。

File APIはIEは10以上で使えます。古いsafariと古いandroidの標準ブラウザはFile Readerが使えないかも。

出典： Use the HTML5 File API to Work with Files Locally in the Browser

Coda2.5がリリースされたとき、Emmetが使えなくてがっくり、ってことを書きましたが、とあるテキストファイルを編集すれば使えるようになることが判明。

「（Coda2.5がクラッシュするせいで）パッチが必要なのはYosemiteだけ。OS X 10.9.5は（パッチなしの）Emmetがそのまま使えるので、プラグインがブラックリスト入りしないようにInfo.plistのversionを1.0.1に書き換えれば大丈夫」

マジか。

ということで、Emmet.codapluginのInfo.plistでshort version stringを1.0.1に書き換えてみたところ…OS X 10.8.5 ですが、行けました！

出典：Coda2.5にしたらEmmetプラグインが使えなくなった - Qiita

Info.plistは下記のパスにあります。 /Users/(ユーザ名)/Library/Application Support/Coda 2/Plug-ins/Emmet.codaplugin/Contents/Info.plist

書き換えるのは、

<key>CFBundleShortVersionString</key> <string>1.0</string>

を

<key>CFBundleShortVersionString</key> <string>1.01</string>

にするということのようです。