俺たちウェブチェイサー tag:www.ultra-l.net,2010-10-14:/chaser//2 2012-01-25T10:15:10Z Movable Type Pro 4.23-ja 今更ですが jQuery Mobile使ってみました。 tag:www.ultra-l.net,2012:/chaser//2.3735 2012-01-25T09:36:52Z 2012-01-25T10:15:10Z 今更ですが jQuery Mobile使ってみました。 ハラさんの制作したjQu... 堀内 今更ですが jQuery Mobile使ってみました。

ハラさんの制作したjQuery Mobileのサイトをベースに、
・ASCII.jp：西畑一馬のjQuery Mobileデザイン入門
・jQuery Mobileを使った、タップで拡大するシンプルなイメージギャラリーを構築する際のサンプルコード
・スマートフォンサイトでアドレスバーを隠す方法
を参考に構築しました。

デモ：http://kousei.ultra-l.net/elle_hori/ichiriki/20120113/

予想以上に簡単に構築でき、リスト表示などのUIも充実していて素晴らしい。
ただこのまま使って行くのでは、他所とソックリなサイトが出来上がってしまうので独自デザインのUIにカスタマイズしていく必要があるね...

また、今回の構築では会社概要ページの下層にお問い合わせページを設置する階層構造にしたかったのだが、お問い合わせページから会社概要ページに遷移するとgoogle mapの表示位置がズレてしまった。ページ表示時に再描画する処理も行ったが改善されなかった為、お問い合わせページを１階層上げることで対処した。

実際の案件でjQuery Mobile採用する際は、ページ遷移のみ使用する程度に留めておきたいと思っていましたが上記のような問題が発生した場合、対処が困難になることも十分想定しておかないといけないな...

使用する／しないにしろ、もう少しテスト構築を行なって行きたいと思います。

]]> Googleアナリティクスを使ってコンテンツ管理 tag:www.ultra-l.net,2011:/chaser//2.3634 2011-12-21T08:42:52Z 2011-12-21T09:20:21Z サイトの運用が長期間にわたると、すべてのコンテンツを把握するのが大変になります。... 宗太
そこで、コンテンツを自動で取得して追加していく方法を試してみました。
GoogleアナリティクスとGoogleドキュメントを活用することで、タイムリーに情報取得ができるようになります。

設定はとても簡単です。
まず、Googleアナリティクスの情報にレポートアクセス権のみの権限を持たせたユーザーを新規に作成します。
次に、コンテンツインベントリにアクセスし、ファイルを複製。
「ログイン」ボタンからログインし、"Profile Number"を指定してあげるとリスト表示してくれます。

sota111221a.jpg

取得したデータ（ga:pagePathの値）を「Content Inventory」シートの"Path"に値を入力すると、上記で取得したその他の情報を自動で入力してくれます。

sota111221b.jpg

Googleドキュメントを使っているので、複数人で管理することができるのが便利ですね。

]]> ubuntu始めました tag:www.ultra-l.net,2011:/chaser//2.3552 2011-11-27T22:13:01Z 2011-11-27T23:49:01Z ubuntuを使ってみたくてずっと眠っていたネットブックにインストールしてみまし... 池田

utuntu.jpg

インストールは非常に簡単でしたがネットブックではやっぱり重いですね
結局デスクトップPCのvirtialBoxに入れた方が軽かったです。

ubuntuを入れた理由は使いやすいと噂のemacsを使いたかったからですが、GUIに慣れきっている人間には非常に厳しいものでした。

ただ、emacs+trampでサーバ上のファイルを直接編集できたり
yasnippetの強力なスニペット機能には感動です。

ウェブサイトの構築についてはHTML＋CSSによる基本的なインタフェースの構築については
極力テンプレート化したいと考えているのでyasnippetには非常に期待しています。

GIMPやInkscapeも非常に多機能になってきているため、ubuntuでの制作環境もすこし考えていきたいところです。

]]> Googleが世界のスマートフォン利用に関する大規模調査サイトを公開 tag:www.ultra-l.net,2011:/chaser//2.3452 2011-10-27T23:58:00Z 2011-10-28T00:52:16Z スマートフォンの普及率や利用状況、広告の認知やショッピングサイトの利用についてデ... 池田 Our Mobile Planet

しかも自由にデータを抽出できてグラフを作れてダウンロードまでできてしまうというから恐ろしい。

それにしても日本6％て・・・
スマートフォン普及してまんね・・・。
長野市内で町を歩いていても結構スマホ持ってる人見かけるので「ほんとに？？」って思ってしまう数字ですね。

まだまだフィーチャーフォンに人気があるんですかね。よくわかりませんが

スマートフォンによるインターネットへの接続回数は4回以上が圧倒的に多く、どこの国も同じみたいですね。

PCとの利用状況に大きな変化があればおもしろいとおもったのですがあまり大きな変化がありませんでした。
PCと同じように利用してるんですかね。

こんな感じでいろんなデータを引き出せるので非常に便利です。
]]> ダンシング・エルくん tag:www.ultra-l.net,2011:/chaser//2.3387 2011-10-12T04:34:17Z 2011-10-12T04:45:29Z CASIOが提供する「イメージングスクエア IMAGING SQUARE」で簡単... 堀内 CASIOが提供する「イメージングスクエア IMAGING SQUARE」で簡単に人物やキャラクターのダンス動画が制作できるので試して見ました。

ダンス動画はこちら

簡単！面白い！！

]]> iPhoneやAndroidなどスマートフォン向けサイトが手軽に作れるサービス「Smart4me」 tag:www.ultra-l.net,2011:/chaser//2.3344 2011-09-26T09:24:47Z 2011-09-26T09:26:49Z 最近この手のサービス多いですね。今や、iPhoneやAndroid向けの最適化は... 宗太 最近この手のサービス多いですね。

今や、iPhoneやAndroid向けの最適化は、web制作に欠かせないものになってまいりました。
なかでも「Smart4me」は非常に使いやすいです。

製作者としては物足りないところもありますが、初めて使用した人でも直感的に分かりやすく、誰にでもそれらしいものが作れそうです。
これくらい使いやすいツールを、製作者向けに特化したもの出してくれないかな・・・（あるのかもしれませんが）

インターフェースデザインの参考にもよさそうですね。

sota110926.jpg
]]> ％指定におけるフォントサイズ一覧 tag:www.ultra-l.net,2011:/chaser//2.3326 2011-09-21T10:46:25Z 2011-09-21T10:59:37Z フォントサイズを％（パーセント）で指定する場合、一の位を細かく設定したとしてもサ... 堀内 フォントサイズを％（パーセント）で指定する場合、一の位を細かく設定したとしてもサイズに反映されるわけではありません。
具体的にどのパーセント指定をするとブラウザで反映されるのか40％～200％までのサイズ指定一覧を用意しました。

ブラウザ間で比較することで、共通のサイズ指定を確認いただけると思います。

％指定におけるフォントサイズ一覧はコチラ


]]> 表示サイズに合わせて、最適なサイズに変更して画像を表示する　Adaptive Image tag:www.ultra-l.net,2011:/chaser//2.3304 2011-09-13T08:08:29Z 2011-09-13T08:35:50Z 表示サイズに合わせて、最適なサイズに変更して画像を表示する　Adaptive I... 堀内 表示サイズに合わせて、最適なサイズに変更して画像を表示する　Adaptive Imageを試してみました。


Adaptive Images in HTML

上記のサイトでは、表示サイズ（幅）1382px、992px、768px、480pxに合わせて画像がリサイズ（最適化）されます。
画像がリサイズされるので、ファイルサイズも軽くなり表示も軽快になりますね

自分のサーバーに実装し、元画像1900 x 1272pxの画像を表示させてみたところ・・・


ブラウザ：Chrome　モニタサイズ1600 x 1050px
画像は1382 x 778pxに最適化されました。



ブラウザ：iPhone Safari（横）
画像は480 x 271pxに最適化されました。


複数サイズの画像を用意しなくてよいので非常に便利です。
今後PC＆スマホ用サイトの制作に使っていきたい。

※htaccessをルートのディレクトリにアップする必要があるので、既存サイトに後付はちょっと厄介かも・・・


]]> ゲーム作りました tag:www.ultra-l.net,2011:/chaser//2.3284 2011-09-07T08:36:38Z 2011-09-07T08:45:28Z 公開されているライブラリをちょこっとカスタマイズしてゲーム制作しました。 ふらふ... 堀内 公開されているライブラリをちょこっとカスタマイズしてゲーム制作しました。
ふらふらと浮遊するエルくんを巧みに操作して迫り来るベイ・ハクライをかわしていくゲームです。

ウルトラエルFacebookページ限定ゲーム「ススメ！エルくん！」

●「いいね！」していただくとプレイできます
●canvasタグが使えるブラウザでプレイ可能です。

当たり判定をもうちょとシビアにできればよかったかな・・・？

暇つぶしに遊んでいただけると幸いです。

こちらもどうぞ
ウルトラエルFacebookページ限定ゲーム「ススメ！エルくん！」｜Webディレクター・ハラヒロシのブログ

]]> 指定したページのキャプチャを毎日自動で記録してくれるサービス tag:www.ultra-l.net,2011:/chaser//2.3262 2011-08-31T09:48:22Z 2011-08-31T10:09:35Z webサイトの更新業務をしていると「1年前にどんな情報掲載していたっけなぁ・・・... 宗太
自分でキャプチャをとるのも手ですが、更新頻度が高いサイトだと、その都度バックアップを取るのは非常に骨の折れる作業です。
そんな作業を自動化してくれて、簡単に取り出せるサービスが「DailyScreenshot」です。
準備は簡単で、ユーザー登録をして、キャプチャしたいページ指定するだけ。

無料プランでは1ページしか記録してくれませんが、有料プランだと複数ページ記録できるみたいですね。

ただ、日本語は文字化けしてしまうので微妙ですが・・・

sota110831b.jpg

]]> ブラウザのcookieを制御する tag:www.ultra-l.net,2011:/chaser//2.3248 2011-08-26T10:30:51Z 2011-08-26T10:46:46Z ブラウザのcookieを使用した案件がありそうなので少し調べてみました。jque... 宗太 ブラウザのcookieを使用した案件がありそうなので少し調べてみました。
jquery.cookie.jsを使うと非常に簡単に扱えるようです。

$.cookie(クッキー名,値);

で値が設定できたりと、簡単そうですね。

それから、確認ツールには「Cookie　Manager」が便利そう。
cookie情報の確認・編集ができるようです。

これを機会に少し勉強してみようかな。


]]> ブラウザの縦スクロールとコンテンツの横スクロールを連動させる tag:www.ultra-l.net,2011:/chaser//2.3227 2011-08-20T08:42:40Z 2011-08-20T08:51:54Z mootoolsを使って、ブラウザの縦スクロールに合わせて４段に重なっているコ... 堀内 mootoolsを使って、ブラウザの縦スクロールに合わせて４段に重なっているコンテンツを横スクロールさせます。

スクロールバーで上下させてください。

デモ

ギャラリーと組み合わせてみると面白いかも！

]]> All Is Not Lost tag:www.ultra-l.net,2011:/chaser//2.3223 2011-08-19T12:44:00Z 2011-08-19T12:51:46Z すごい人たちの考えることはさっぱりわかりませんがやってることがすごすぎるというこ... 池田


結構重いのでブラウザをたくさん開いている場合は閉じた方がいいかもしれません。

]]> HTML5で簡単にページめくり効果を実装する tag:www.ultra-l.net,2011:/chaser//2.3189 2011-08-08T08:52:46Z 2011-08-08T09:24:04Z ページをぺらぺらめくるような表現で見せるコンテンツが、いろんなサイトで用いられる... 宗太 HTML5とJavaScriptで実装するチュートリアルがあったので、試しに実装してみました。

ソースファイルが配布されているので、そちらを使えば非常に簡単に実装できちゃいます。
背景画像を2枚（全体の背景と右ページ部分のみトリミングしたもの）用意し、cssとJavaScript内でサイズを指定してあげるだけ！

iPad等での閲覧には特に相性がいいので、使用用途は増えてきそうです。

sota110808.jpg


]]> サウンドロゴで天国と地獄 tag:www.ultra-l.net,2011:/chaser//2.3183 2011-08-05T12:03:20Z 2011-08-05T12:04:07Z すごい！の一言です。... 池田

すごい！の一言です。

]]>