2014.04.23 Wednesday
ホームページリニューアル
スティーブン・セガールの沈黙シリーズをコンテンツにしたホームページを作っていたのですが、このたび、リニューアルしました。
http://under-siege.appspot.com/
技術的なところでは、以下を使ってみました。
・bootstrap
・jQuery
・magnific-popup
・jQuery social button
・timeQuery.js
・google map api
・google app engine
・google analytics
http://under-siege.appspot.com/
技術的なところでは、以下を使ってみました。
・bootstrap
・jQuery
・magnific-popup
・jQuery social button
・timeQuery.js
・google map api
・google app engine
・google analytics
2014.02.18 Tuesday
chromeのモバイルエミュレータ
先日のsencha touchハンズオンで教わったchromeのモバイルエミュレータの起動方法をメモ。
１．デベロッパーツールを起動（F12キー）
２．デベロッパーツール右上の歯車アイコン（settings）を選択
３．「overrides」を選択し、「Show 'Emulation' view in console drawer」をチェック
４．settginsを閉じる（XボタンまたはESC）
５．デベロッパーツール右上のアイコン「>三」（Show console.）を選択
６．コンソールからEmulationタブを選択
７．Deviceを選択し、emulateボタンを押下
８．デベロッパーツール右上のアイコン「□」を長押して、デベロッパーツールを右に表示させると見やすい
これをやると、こうなります。
他にnexusとかkindleとか選べます。
chromeすげえ。
１．デベロッパーツールを起動（F12キー）
２．デベロッパーツール右上の歯車アイコン（settings）を選択
３．「overrides」を選択し、「Show 'Emulation' view in console drawer」をチェック
４．settginsを閉じる（XボタンまたはESC）
５．デベロッパーツール右上のアイコン「>三」（Show console.）を選択
６．コンソールからEmulationタブを選択
７．Deviceを選択し、emulateボタンを押下
８．デベロッパーツール右上のアイコン「□」を長押して、デベロッパーツールを右に表示させると見やすい
これをやると、こうなります。
他にnexusとかkindleとか選べます。
chromeすげえ。
2013.03.06 Wednesday
emmet
ドットインストールでzen-coding入門をみました。
特別な記法でhtmlを効率的に書けるツールで、zen-codingの次期バージョンがemmet。
cssの記法など、かなり拡張されているようですが、zen-codingを使っていなかったので、そこはよく分からない。
sublime text2にインストールしました。(emmet)
サクラエディタにもインストール(zen-coding)
emmet(ctrl+Eで展開)
■基本
・htmlひな形
html:5
・css読み込み
link:css
・favicon読み込み
link:favicon
・script
script
・リンク
a:link
・メール
a:mail
・input
input:hidden
■階層と繰り返し
>：１階層下る
^：１階層上る
+：同階層
*：繰り返し
div>div>div>p^^hr
div>div>p+hr
ul>li*3
■id、クラス、連番など
#：id
.：class
$：連番
ul#menu>li.item-$*5
select[name=city]>option[value=$]*5
a[href="http://under-siege.appspot.com"]
div{menu}*5
a[href="http://under-siege.appspot.com"]{沈黙の研究}
ちょっとずつ使ってみます。
2012.07.29 Sunday
CSS Nite in Shinagawa「HTML5+CSS Web Camp 2012」
HTML5のセミナーに参加してきました。
web制作者を対象にしたセミナーですが、テーマが面白そうなので参加してきました。
内容は、
1.HTML5が拓く未来
羽田野太巳さん
2.HTML5セクションによるWeb制作の基本
益子貴寛さん
3.CSS3で変わるWeb制作
鷹野雅弘さん
4.開発支援ツールを使った最新IEへの互換対応
物江修さん
5.Internet Explorer10とマイクロソフトにとってのHTML5
春日井良隆さん
6.Productivity Future Visionを読み解く
5時間半ものセッションでしたが、興味深いテーマ、面白トーク、快適なセミナールームで充実した時間を過ごせました。
セミナーのメモ
・hgroupタグ
要らないのではないかと議論がなされているので、使用しないほうがいい。
・パララックス
webページをスクロールしたときに背景となる要素を異なる移動量で制御して奥行き感を見せる手法がいま流行。
・レスポンシブルwebデザイン
１ソースでスタイルシートを切り替えることにより、PC、タブレット、スマートフォン向けのデザインを実現すること。
それぞれの幅の境界は、
PC 768px以上
タブレット 767px - 321px
スマートフォン 320px以下
とするとよい。
が、スマートフォンで表示が変わることが、必ずしもよいことではないのではないか。
PCサイトと勝手が変わることにより、情報が探しずらくなったり、そもそも情報が減ってしまい、見たい情報がないということで、ユーザにストレスを与える場合もある。
なるほど、そういう経験あるよね。
オンラインからcss3のパラメータを設定して、形状を確認できる。
ソースも出力してくれます。
・F12開発者ツール
Internet ExplorerでF12キーを押すとjavascriptのデバッグ等が使用できるF12開発者ツールが起動する。
・IEのHTML5対応
バージョン10でだいぶ対応されるとのこと。
マイクロソフトは仕様策定がある程度、決まらないと導入しないというスタンスであったため、他のブラウザより対応が遅いみたい。
バージョン6は日本では4%程度のシェアであるため、もう無視していい。
・未来のpc
動画はマイクロソフトのビジョンなんですが、２、３年の将来には、最近、発表されたmicrosoft surfaceのようなキーボードとディスプレイが分離するタイプのPCが主流になるだろうといわれていました。
取り外したときは、タブレット端末として使用できる。
・タッチパネルの視覚障害者サポート
iPhoneやiPadは触っている部分のアプリ名やオプションを読み上げてくれる視覚サポート機能がある。
これ、優しいね。
全盲の人がiPhoneでtwitterでつぶやくまでの動画
