2014.02.27 Thursday
timeQuery.jsを使ってみました
年表を表示するライブラリがないかと探していたんですが、いろいろありました。
Javascript使用の年表(タイムライン)表示に関してのメモ
ここがよくまとまっていて参考にさせていただきました。
結構、高機能だったので、もっとシンプルなものがないものかと更に探してみまして、timeQuery.jsに行き着きました。
jquery uiのスライダーを利用した年表で、非常にシンプルです。
このライブラリを使ってみましたので、メモ。
ライブラリを読み込んで、divからtimeline()を呼ぶだけです。
divの子要素に年ごとのdivを作り、更にその子要素に年をh1、テキストをdivで作ります。
簡単なので、サンプルのhtmlを見たらすぐ分かります。
年表表示する前の整形前テキストが一瞬、表示されてしまうので、最初は非表示にしておいて、timeline()後に表示するようにしてみました。
Javascript使用の年表(タイムライン)表示に関してのメモ
ここがよくまとまっていて参考にさせていただきました。
結構、高機能だったので、もっとシンプルなものがないものかと更に探してみまして、timeQuery.jsに行き着きました。
jquery uiのスライダーを利用した年表で、非常にシンプルです。
このライブラリを使ってみましたので、メモ。
ライブラリを読み込んで、divからtimeline()を呼ぶだけです。
divの子要素に年ごとのdivを作り、更にその子要素に年をh1、テキストをdivで作ります。
簡単なので、サンプルのhtmlを見たらすぐ分かります。
年表表示する前の整形前テキストが一瞬、表示されてしまうので、最初は非表示にしておいて、timeline()後に表示するようにしてみました。
2014.02.18 Tuesday
chromeのモバイルエミュレータ
先日のsencha touchハンズオンで教わったchromeのモバイルエミュレータの起動方法をメモ。
1.デベロッパーツールを起動(F12キー)
2.デベロッパーツール右上の歯車アイコン(settings)を選択
3.「overrides」を選択し、「Show 'Emulation' view in console drawer」をチェック
4.settginsを閉じる(XボタンまたはESC)
5.デベロッパーツール右上のアイコン「>三」(Show console.)を選択
6.コンソールからEmulationタブを選択
7.Deviceを選択し、emulateボタンを押下
8.デベロッパーツール右上のアイコン「□」を長押して、デベロッパーツールを右に表示させると見やすい
これをやると、こうなります。
他にnexusとかkindleとか選べます。
chromeすげえ。
1.デベロッパーツールを起動(F12キー)
2.デベロッパーツール右上の歯車アイコン(settings)を選択
3.「overrides」を選択し、「Show 'Emulation' view in console drawer」をチェック
4.settginsを閉じる(XボタンまたはESC)
5.デベロッパーツール右上のアイコン「>三」(Show console.)を選択
6.コンソールからEmulationタブを選択
7.Deviceを選択し、emulateボタンを押下
8.デベロッパーツール右上のアイコン「□」を長押して、デベロッパーツールを右に表示させると見やすい
これをやると、こうなります。
他にnexusとかkindleとか選べます。
chromeすげえ。
2014.02.18 Tuesday
【初心者向け】Sencha いろはの「い」
表題の勉強会に参加してきました。
sencha touchのハンズオンで、メモ帳を作ります。
まずはsencha touchについて。
senchaはHTML5を使ったモバイルweb向けのフレームワーク。
jquery mobileもありますが、senchaのほうがだいぶ高機能そうです。
jquery mobileは主にタグで記述しますが、senchaは主にjsを使いますし、
いきなり、MVCフレームワークでクラスを構築していかないといけないですし、
ドキュメントをみると、大層な数のクラスがあり、サンプルも非常にリッチなのです。
cordovaとの連携あり、サポートあり、有償版あり、なんかすごいことになってるなという印象。
で、ハンズオンへ。
見慣れないルールで書いていくので、ついていくので精一杯。
ボタン、リスト、テキストエリアを使って、メモ一覧と書き込み画面までを作成しましたが、時間切れで終了。
よくわからないで作っているので、実行時はエラーしないかスリル。
ドキュメントは充実しているが、学習コストは高そうだ。
senchaはどれくらい使われているのでしょうか。
事例が気になったので、調べたけれど、わかりませんでした。
jsdo.itにもあるので、今度、なにか作ってみたいところ。
ハンズオンでは、chromeで動作確認をしたのですが、標準でiphoneエミュレータが備わっていることを教わりました。
chromeすげえ。今日、一番の衝撃。
やり方は、別エントリで書きます。
sencha touchのハンズオンで、メモ帳を作ります。
まずはsencha touchについて。
senchaはHTML5を使ったモバイルweb向けのフレームワーク。
jquery mobileもありますが、senchaのほうがだいぶ高機能そうです。
jquery mobileは主にタグで記述しますが、senchaは主にjsを使いますし、
いきなり、MVCフレームワークでクラスを構築していかないといけないですし、
ドキュメントをみると、大層な数のクラスがあり、サンプルも非常にリッチなのです。
cordovaとの連携あり、サポートあり、有償版あり、なんかすごいことになってるなという印象。
で、ハンズオンへ。
見慣れないルールで書いていくので、ついていくので精一杯。
ボタン、リスト、テキストエリアを使って、メモ一覧と書き込み画面までを作成しましたが、時間切れで終了。
よくわからないで作っているので、実行時はエラーしないかスリル。
ドキュメントは充実しているが、学習コストは高そうだ。
senchaはどれくらい使われているのでしょうか。
事例が気になったので、調べたけれど、わかりませんでした。
jsdo.itにもあるので、今度、なにか作ってみたいところ。
ハンズオンでは、chromeで動作確認をしたのですが、標準でiphoneエミュレータが備わっていることを教わりました。
chromeすげえ。今日、一番の衝撃。
やり方は、別エントリで書きます。