社内カンファレンスでnode.jsの話を聞いて触りたくなったので手元のmacにインストールしてみました。忘れては行けないのでログ
参考：Node.jsとnvmを初めてインストールするときのハマりポイントと対策
参考元にあった通り、nvmをgitから落としてきて。。
bashを使ってるのでスムーズに行きます。
$ git clone git://github.com/creationix/nvm.git ~/.nvm $ source ~/.nvm/nvm.sh
とりあえず最新の安定板をインストール
$ nvm install v0.4.11で
$ node
うごいた！
てか、いつの間にmacでgitコマンドが使えるようになってたんだ。。
スマートフォンが市場に多く出回り始めるにつれ、ネット系企業もこぞって自社のサービスや、コーポレートサイトをスマートフォンに最適化してきています。
そんななか、私が開発する際に参考にしているスマートフォンに最適化されたサイトをいくつか紹介したいと思います。
※基本iPhoneで表示確認しています。
言わずとしれたスマホ時代の仕掛人です。ただ、そのAppleはスマホサイトとPCのサイトに同じものを表示していると有名ですが・・
ここがすごい
・SVGで書かれたグローバルナビ
サイト自体は同じものを表示しているのですが、グローバルナビゲーションはロゴとフォントをSVGで描画してあります（PCで開くとpng画像）。なので、iPhoneで拡大縮小を行っても、美しいグローバルナビゲーションを見られることになります。些細ですが、さすがですね。。
WebメーラーのGmailもスマホ対応しています。Webクリップアイコンも用意してあり、一見アプリと見間違う程の出来です。
ここがすごい
・オフラインの動作
Gmailのスマホ版はオフラインでも動きます。どうやら初回ダウンロードの時点でWeb SQL Databaseに、過去のメールスレッドを保存し、キャッシュマニフェストを使ってファイルをすべてローカルに保存しているようです。なので、オフライン時でも、メーラーにたまった最近のメールを閲覧することもでき、さらには下書き保存することもできます。
・引っ張って更新
iPhoneのツイッタークライアントに実装されている、下に引っ張って更新するUIもJavaScriptで実装してあり、ネイティブのアプリ顔負けの体験を提供してくれます。
最近、CEOが解任されてしまった米Yahoo!ですが、スマホサイトに関しては草分けになったのではないでしょうか。
ここがすごい
・カルーセルだらけ
画面サイズにより表示できる情報量が減ってしまう、スマホサイトですが、カルーセルを数多く使い、使い心地が悪くならない方法でポータルサイトとしての情報量を担保しています。しかし、ここまで大量のカルーセルを利用するとは大胆ですね。。
カンファレンスの動画がよくあがっている動画共有サイトです。
ここがすごい
・起動時の画像
Webクリップから起動すると、ネイティブのアプリと同じく起動時に、ロゴが入った起動画面が表示されます。さらに、同様の起動方法で起動させると、アドレスバーも表示されず一見アプリと区別がつきません。
・動画ページへの遷移が気持ちいい
一覧ページから動画詳細ページに横スライドで遷移しています。この遷移のスピードがなんともぬるぬるしていて気持ちがいいです。
スマホのページ最適化には以下の手法が現在の主流となっているようです。
PC版を最適化して同じものを表示
タッチUIであることを考慮して、PC版リンク領域を広くしたり、画像の最適化を行いPC版をスマホでも利用しやすくしています。他と比べて運用がかなり楽そうです。
ex.)Apple、New York Times
ネイティブのアプリケーションに近づける
Webの基本であるリンクでのページ遷移をなくし、各機能を持ったHTMLをAjaxで読み込むタイプのWebサイトです。Webアプリと呼ばれるものですね。
ex.))Gmail、Flikr、vimeo、YouTube、Gree
スマホ用のページを準備する
スマートフォン用に最適化されたWebサイトを用意する形です。
ex.)Yahoo!、Yahoo! JAPAN、ライブドア
レスポンシブ・ウェブデザイン
PC版をそのまま表示させているものですが、こちらは、デバイスの大きさによってCSSやJavaScriptでUIをかえています。コーポレートサイトとかは、このパターンが増えているような。
ex.)Web Designer Wall、Media Queries（利用したサイト一覧）
これらの手法を吟味しつつ、お客様に対して提供したい情報の種類によってどの手法をとるかを選ぶべきなのですね。
Safariでforeachが用意されていた件。
[1,2,4].forEach(function(elm){
alert(elm)
});
// 1
// 2
// 4Firefox4でもつかえたよ！
HTML5で正しいマークアップするためには「カテゴリー」、「コンテンツモデル」など今までのHTMLにはなかった用語を理解する必要があります。
参考文献を読んでもいまいちしっくりこないので自分の言葉でまとめてみようと思います。W3Cのドラフトから一次情報でがんばってみようかと。
英文が訳せなかったり、いまいちわからないところは「徹底解説HTML5マークアップガイドブック」を参考にさせていただきました。
W3Cのドラフトを読んでいくとコンテンツ(contents)という単語を何度も見かけます。
コンテンツモデルという言葉自体にも含まれています。少し調べてみましたが以下の認識で大丈夫ではないでしょうか。
コンテンツ ＝ 開始タグと終了タグに囲まれたすべてのもの
Elements can also have content, including other elements and text.
参考：HTML_element – Wikipedia
The element content is everything between the start and the end tag
参考：HTML Elements
基礎の基礎であるコンテンツの意味が分かったところで早速用語まとめへ。
・カテゴリー
要素を同様の特性でカテゴリ化したものです。
「h1とh2って特性が似てるから同じグループでまとめようぜ！」ということです。
・コンテンツモデル
あるHTML要素が囲むべきコンテンツを定めたものです。
要素は、その要素のコンテンツモデルに従ったカテゴリのコンテンツしか囲めません。
例えば、p要素のコンテンツモデルはフレージングコンテンツ(後述)です。つまり、フレージングコンテンツというカテゴリに属す要素しか囲むことができません。したがって、カテゴリがフレージングコンテンツでない、section、div、h1などは囲むことができないということになります。
・メタデータコンテンツ
メタデータコンテンツ以外のコンテンツの動作や、スタイルを設定することができます。
ドキュメントと他のドキュメントを関連づけることができます。外部スタイルシートとか、外部のJavaScriptファイルとか。
ex:link style meta script …
・フローコンテンツ
bodyタグの下におかれるものがフローコンテンツにあたります。
メタデータコンテンツの一部をのぞいてほとんどですね。
ex:div p h1 section video …
・セクショニングコンテンツ
見出しと、フッター(必須でない)を含みセクション(一かたまりの文書)を形成するコンテンツです。ブログの記事などがよい例となります。
このブログでは「hazumu.net/blog」というhtml文書の中に、「HTML5の基礎用語を理解しておく」というタイトルを持った一つのセクションが形成されていることになります。
ex:section aside article …
・ヘッディングコンテンツ
セクションのヘッダーを表します。「hazumu.net/blog」の例でいうと「HTML5の基礎用語を理解しておく」がタイトルでありヘッディングコンテンツにあたります。
ex:h1 h2 hgroup …
・フレージングコンテンツ
ドキュメント内のテキストを表します。とくに、段落内に含まれる要素が多く含まれます。html4のインライン要素に似ています。
ex:a audio b bdi bdo br button
・エンベディッドコンテンツ
ドキュメント内にフラッシュ、ビデオ、音楽、svgなど他のリソースを表示する要素が含まれます。
ex:audio canvas embed iframe img …
・インタラクティブコンテンツ
クリックや、ドラッグなどユーザーの動作(インタラクション)が行われる要素が含まれます。イメージマップが設定されたimg要素なども含まれます。
ex:a audio button details …
・トランスペアレントコンテンツモデル
親要素のコンテンツモデルをそのまま適用するもの。CSSの継承に似ています。
次回はセクションとアウトライン周りが書きたい。
iPhoneやiPadなどiOSに組み込まれているmobile SafariでJavaScriptを使ったアニメーションを動かすと動作が遅くなる事があります。
そこで、CSS3のアニメーションを利用して軽快なUIを実装しようという風潮が高まっているのですが、実はすべてのCSS3アニメーションがmobile safariで軽快に動くという訳ではないようです。
結論からいうと、safariというソフトウェアの力だけでなく、iPhoneやiPadのハードウェアの力を借りられるからです。
そういった、ハードウェアのことをアクセラレーターと呼ぶようです。詳しくは参考ページをご覧ください。
※参考
Hardware acceleration – Wikipedia, the free encyclopedia
アクセラレータとは【accelerator】 – 意味/解説/説明/定義 ： IT用語辞典
GPUとは【Graphics Processing Unit】 – 意味/解説/説明/定義 ： IT用語辞典
しかし先に述べた通りCSS3でアニメーションを書いたからといってすべてがアクセラレーターを利用して軽快に動作するとは限りません。
実際に、iPhoneのmobile safariのアクセラレーターがどこで動いているか見てみます。
お手元のmacにiOSシュミレーターをインストールして、ターミナルを開いて以下のコマンドを入力してください。
CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app/Contents/MacOS/iPhone\ Simulator
すると画像のように色がついた状態でシュミレーターが立ち上がります。
そして、赤い色がついているところがアクセラレーターが効いているところです。
アクセラレーターの動作を見えるようにしたところで、CSS3でアニメーションを書いてみましょう。
今回使用するサンプルは、表示という黄色いボタンを押すと、青いボックスが、画面左からスライドインしてくるものです。
アクセラレーターが作動している箇所は赤く表示されます。もし、青いボックスがアニメーションしているときにアクセラレーターが作動していたら青いボックスごと赤いオーバーレイがかかるはずです。
サンプル１は、マイナスマージンを利用して左側に隠した青いボックスを、CSS3のkeyframesアニメーションを利用して動かします。
#slideMenu.slideIn { -webkit-animation-timing-function: ease; -webkit-animation-duration: 350ms; -webkit-animation-name: slidein; margin-left:0px; } #slideMenu.slideOut { -webkit-animation-timing-function: ease; -webkit-animation-duration: 350ms; -webkit-animation-name: slideout; } @-webkit-keyframes slidein { from {margin-left:-320px; } to { margin-left:0;} } @-webkit-keyframes slideout { from {margin-left:0; } to { margin-left:-320px;} }
サンプル２も１と同じく、keyframesアニメーションです。
ただ、今回はマイナスマージンではなく、絶対配置のleftを使っています。
#slideMenu.slideIn { -webkit-animation-timing-function: ease; -webkit-animation-duration: 350ms; -webkit-animation-name: slidein; left:0px; } #slideMenu.slideOut { -webkit-animation-timing-function: ease; -webkit-animation-duration: 350ms; -webkit-animation-name: slideout; } @-webkit-keyframes slidein { from {left:-320px;} to {left:0;} } @-webkit-keyframes slideout { from {left:0;} to {left:-320px;} }
サンプル３は、jQueyのアニメーションで実装してみました。
function hideSlideMenu(){ $("#slideMenu").animate({left:"-320px"}, 350); showMenuBtn(); } function showSlideMneu(){ $("#slideMenu").animate({left:0}, 350); $("#page").bind("click", function(){ hideSlideMenu(); }); hideMenuBtn(); } $("#menuBtn").bind("click", function(){ showSlideMneu(); });
これらのサンプルを実際にシュミレーターで動かすとわかる通り、アニメーションの最中に青いボックスの上に赤いオーバーレイが表示されることはありません。
最後に、CSS3のtransformと、translateを使ってみます。
#slideMenu.slideIn { -webkit-transform: translate(0, 0); left: 0; } #slideMenu.slideOut { -webkit-transform: translate(-320px, 0); left: -320px; }
結果
これを利用すると、青いボックスの上に赤いオーバーレイがかかっています。
どうやらアクセラレーターが動作しているようです。
iOSのsafari上でアクセラレーターを利用して、このようなアニメーションを実行するにはtranslateを利用するべきなのでしょう。
まだ、-webkit-transformに適応できるほかの値を試していないのですが、随時試してみたいと思います。
※参考
mir.aculo.us JavaScript with Thomas Fuchs » Blog Archive » Visualizing WebKit’s hardware acceleration
Code blogCSS3 Transitions and Transforms in Gmail for the iPad – The official Google Code blog
こちらの記事を参考にしながら、MacVim-KaoriYaをインストールしました。
Mac OSXでのvim環境整理。.vimrcやらオヌヌメPlug inやらまとめ。CommentsAdd Star
学生時代に先輩からもらった設定ファイルに自分でつぎはぎしたものを利用しているため、とても見せられるものではありません。。＞＜
とりあえず、お気に入りの設定だけメモメモ。(ファイルを紛失したときのために)
・基本
" ビープ音を消す set vb t_vb=
・検索関係
" 大文字小文字を判別なし set ignorecase " 大文字小文字が混ざって入力されたら区別 set smartcase " 検索文字列を色づけ set hlsearch " インクリメンタルサーチ set incsearch
・インデント
" タブの左側にカーソル表示 set listchars=tab:>\ set list " タブ幅 set tabstop=4 set shiftwidth=4 " 自動インデントを有効にする :set autoindent
・ステータスライン
" ステータスラインを常に表示 set laststatus=2 " ステータスラインに文字コードと改行文字を表示する set statusline=%<%f\ %m%r%h%w%{'['.(&fenc!=''?&fenc:&enc).']['.&ff.']'}%=%l,%c%V%8P
その他、文字コード関係とかいろいろやってます。
いつか整理して、このブログで公開予定。
こちらも細かい設定は単体の記事で書くとして、以下のプラグインは必ず入れます。
neocomplcacheの補完動作をtabで管理できるようにするため、以下の関数をvimrcに追加します。
※参考
neocomplcacheでtab補完: BLOGΣ（゜Д゜）カッ!
function InsertTabWrapper() if pumvisible() return "\<c-n>" endif let col = col('.') - 1 if !col || getline('.')[col - 1] !~ '\k\|<\|/' return "\<tab>" elseif exists('&omnifunc') && &omnifunc == '' return "\<c-n>" else return "\<c-x>\<c-o>" endif endfunction inoremap <tab> <c-r>=InsertTabWrapper()<cr>
/usr/localがないので作成
sudo mkdir /usr/local
ソースの保管場所を作成+移動
sudo mkdir /usr/local/src cd /usr/local/src
wgetの最新版をダウンロード
sudo curl -O http://ftp.gnu.org/gnu/wget/wget-1.12.tar.gz
圧縮されたファイルを展開+移動
sudo tar zxvf wget-1.12.tar.gz sudo ./configure
インストール
sudo ./configure make
と入力したところでエラー
sudo: make: command not found
gccが入ってなかったことに気づきxcodeインストール中なう。。。
xcodeを入れてwgetのインストール
sudo ./configure sudo make sudo make install
1 | alert("hello world"); |
WordPressでソースコードをきれいに表示させるために、wp-syntaxというシンタックスハイライトを可能にするプラグインをインストールしてみました。
今使っているWPのデザイン(twenty ten)では、wp-syntaxで使われているCSSとこのデザインに使われているCSSが競合して、表示がおかしくなってしまうのでsytle.cssに以下のCSSを追記します。
1 2 3 4 5 | #content .wp_syntax table { margin: 0px; width: 100%;} #content .wp_syntax table tr td { padding: 0px; } #content .wp_syntax table td.line_numbers { width: 23px; padding-left: 2px; padding-right: 2px; text-align: right; } #content pre { overflow-x: auto; padding: 2px; margin: 0; } #content .line_numbers pre { background-color: #def; color: gray; } |
※参照元
WP-Syntax | ソースコードをハイライト表示 WordPressプラグイン
参照元のコードを利用するとハイライトされたコードの下に無駄な余白が出てきてまうので、#content pre にマージン0を追加してあります。
