これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
中国の町並みをドット絵で再現したE都市がすさまじい - てっく煮ブログ
中国の地図サイト「E都市」は一昔前の RPG のようにドット絵で中国の町並みを再現しています。描き込みの量もすごいし、再現されている範囲も広くて驚きました。たとえば 上海 はこんなの。もちろんドラッグで移動できます。少し拡大してみます。さらに拡大してみます。右下のビルの看板の文字が読めちゃってます。自分が見た範囲では全ての場所で地図がここまで拡大できました。すべてのズームレベルでしっかりと描き込んであるのが驚きです。Google Maps の衛星地図とも比較できます。衛星写真を45度ぐらい時計回りに回転すると、上のドット絵に近くなりますね。道の形や屋根の色まで忠実に再現されています。北京を旅する北京 の天安門広場〜紫禁城。天安門にズームイン。もちろん毛沢東の肖像画まで再現。オリンピックで話題になった鳥の巣スタジアムも再現されています。すぐ近くはビル街だったんですね。香港を旅する香港 の大量
全自動ブックマーク棚卸しが想像以上に有意義な件 - てっく煮ブログ
みんな、自分が過去にブックマークした記事って気になるよね。はてなブックマークを使ってると、勢いでブックマークしてしまうけど、なかなか振り返る機会はないもの…。少し前に「ブックマーク棚卸しがイイヨ」という記事があったんだけどブックマークの棚卸し(?)をしてます。今年一年かけてブックマークしたものを順番に見て行ってます。見るといっても、全部の記事を開いて見るわけではなく、流し読みで、「ああ、これはもう一回読んでおきたい」と思ったものを開いてはインプットしているという感じです。 はてなブックマーク棚卸し - naoyaのはてなダイアリー１年分の棚卸しとなると楽しくないし…。わたしもみんなと同じ、その一員でした。でも、もう平気。「全自動ブックマーク棚卸し」があれば！全自動ブックマーク棚卸し があればもう大丈夫。全自動で １年前のブックマークを RSS 配信 してくれちゃいます。試しにやってみましょ
北海道を落とすとどう跳ねるのか？の裏側 - てっく煮ブログ
asおかげさまで大好評の 北海道を落とすとどう跳ねるのか？ ですが、どのように作ったか、製作過程を紹介することにします。1. 地図の素材を取ってくるまずは地図の素材が必要です。以下のサイトから拝借しました。白地図、世界地図、日本地図が無料pdf や eps 形式の地図データを無料で配布してくれているありがたいサイトです。2. 都道府県ごとに分割する上記の素材は県境もベクター形式で提供されていて大変ありがたかったのですが、島がどの都道府県に属しているかの情報がありませんでした。そこで、Google Maps と見比べながら、島を都道府県ごとに分類していきました。無事、全ての島を分類し終わって、こんな感じになりました。とても地味な作業でした…。3. 都道府県ごとに SVG で出力する次に、Illustrator 内で分類したデータをプログラムで扱える形式にしなければなりません。ここでは XML
濃いはてなーが大好きな濃いブログBEST50 - てっく煮ブログ
はてなーが大好きなブログBEST100 を見ると、ホットエントリ常連ばかりで新鮮さがなかったので、ブックマーク コメントが多い順を調べてみたくなりました。幸い、手元には はてブ年鑑 を作るときに収集したデータがあるので、ちょっと頑張ればブログごとのコメント数を割り出すことができました。データ量が多かったので、2008年の日ごとホットエントリに１度でも入ったことのあるエントリからの集計です。コメントが多いブログ BEST10コメントつきのブックマーク数順に並べてみました。順位サイト名コメント数ブックマーク数コメント率1位はてな匿名ダイアリー472499440250.1%2位痛いニュース(ノ∀`)399496747059.2%3位GIGAZINE（ギガジン）159756497924.6%4位404 Blog Not Found96862968532.6%5位池田信夫 blog607414409
【YQL 速攻レビュー】米 Yahoo! が SQL っぽく色んなデータを取ってこれるAPIを出した - てっく煮ブログ
米 Yahoo! が Yahoo! Pipes みたいに自由度が高くて、またちょっと毛色が違うサービスが出てきた。題して、Yahoo! Query Language。YQL と呼ぶようだ。SQL 風の言語を REST で投げて、結果を XML や JSON で受け取ることができる。具体的にやってみないと分かりにくいので、とりあえず試してみた。RSS からデータ取得YQL を使って RSS から最新のタイトル10個を取ってきてみる。こんな YQL になるらしい。 select title from rss where url='http://d.hatena.ne.jp/nitoyon/rss' rss テーブルに対して select を発行している。実際にこの YQL を試すには YQL 用の console を利用するとよい。（※要ログイン）console の左上に YQL を入力して
はてなブックマークの細かすぎて伝わりにくい新機能を勝手に紹介 - てっく煮ブログ
はてなブックマークがリニューアルして毎日楽しく使っているわけですが、そんな中で気付きにくいけど知ってると便利な機能を勝手にまとめてみました。人気エントリの要約を非表示にみんな大好き人気エントリーに、リニューアル後から要約が表示されるようになりました。クリックする前に概要が分かって便利なのですが、古いインターフェースのほうがよかった…という人もいることでしょう。でも大丈夫。そんな人は「人気エントリー」の右端にある▲のボタンを押してみましょう！要約が消えます。すっきり読みたい人にお勧め。あ、もう一回クリックすると要約は復活します。タグとお気に入りを旧バージョンで右側のボタンつながりで、タグとお気に入りを戻す方法を紹介します。タグが一覧になってしまって悲しい人は、右側のボタンを押しましょう。おー、一昔前のタグクラウドと切り替えられるわけですね。お気に入りも見た目が変わりましたが、これも右側のボタ
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
ワリオランドシェイクみたいに HTML が崩壊するブックマークレット（とそのソースコード） - てっく煮ブログ
as, box2dワリオランドシェイクと YouTube のコラボプロモーション が面白かったので、似たようなものを作ってみました。次の文字列をコピーしてアドレスバーに突っ込むと、HTML が崩壊します。javascript:(function(){var d=document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://tech.nitoyon.com/meltdown/meltdown.js?"+(new Date()).getTime(); d.body.appendChild(s)})();崩壊するのは画像だけなので、画像があるページで試してみてください。このブログだとこんな具合。画像はドラッグすることも可能です。あまり画像が多いと重くなりすぎるのでご注意を。仕組みFlash と JavaSc
具体例で説明するデザインパターン - てっく煮ブログ
JavaScriptデザインパターンってなんだかたいそうなものに考えられがちだけど、実は、そこかしこのライブラリや仕様に取り込まれていることが多い。「デザインパターン分からん」とか「で、どうやって使うのよ」と悶々としている人には、「どういうところで使わているのか」を知っておけばイメージも沸きやすいし、意外にたいしたことないんだな、ということが分かるんじゃないだろうか。そこで、JavaScript やその周辺の技術で、デザインパターンがどのように使われているかを紹介してみることにする。ここでは、GoF本の順番に沿って、以下の11個のパターンを取り上げる。生成に関するパターン Factory MethodAbstract FactoryBuilderPrototypeSingleton構造に関するパターン AdapterComposite振る舞いに関するパターン Chain Of Respon
AS3 で iPhone 風ボタンを描画 - てっく煮ブログ
asActionScript 3 で Photoshop チュートリアル実践シリーズ 第１弾。今回は iPhone 風ボタンを作ってみました。参考にしたサイトは iPhone style icon tutorial ≪ Jotlet Developer Blog。Photoshop 用のチュートリアルとはいえ、使っている機能は、角丸四角、ドロップシャドウ、楕円、グラデーション、オーバーレイ(レイヤースタイル)程度だったので、ほとんど苦労なく AS3 に移植できました。完成品が上の画像。文字はあとから Photoshop を使って追加しましたが、それ以外のところは正真正銘、AS3 だけで描画しています。ソースは以下の通り。 package { import flash.display.*; import flash.filters.*; import flash.geom.*; publi
てっく煮ブログ - ActionScript for Flasher(1) 資料公開
as大阪での Flash 勉強会（寺子屋（仮）第3回）で発表しました。資料を公開しておきます。プレゼン資料：ActionScript for Flasher(1)サンプルファイル：sample.fla (166KB) [要Flash MX以上]タイムライン vs ActionScript という Flash 界の永遠の課題(?)に切り込んでみたつもりです。サンプル用に作った関数は、文字のセンタリングに対応するために泥臭くなっていますが、もうちょっと汎用化してみたいかな。
てっく煮ブログ - すごく楽しかった Flash 談義のログをまとめてみたよ
twitter, asTwitter には Flash 界のブロガーさんが続々参入しているのですが、9日の 20:30 ごろから突発的に Flash 談義が始まり、２〜３時間ほど盛り上がっていました。この内容があまりに素敵だったので、勝手にまとめちゃいました。みんな、それぞれ問題意識や思いを持っていて、それが伝わってきてドキドキしてきます。ちょっと話はそれますが、JavaScript の面白いところって、Unix の人も、Mac の人も、Windows の人も、平等に議論できるところにあると思うんですよ。今まで、それぞれの分野でやってた「スゴイ人」が、共通の話題を持って交流できる場、それが JavaScript なんです。で、Flash になると、今度は OS の縛りがないどころか、開発者だけじゃなくてデザイナーさんとも議論や意見交換できちゃう。この世界の広がりっぷりは只者じゃない。すごく
てっく煮ブログ - あまり語られていない Apollo のセキュリティについてまとめてみた
(2007年10月追記) この記事は、Adobe AIR と呼ばれている技術のα版時点でのセキュリティについて述べています。2007年10月現在での最新版についての情報は、以下のページを参照してください。akihiro kamijo: Adobe AIR ベータ 2 セキュリティ関連の変更点akihiro kamijo: Adobe AIR のデジタル署名機能について(追記ここまで) void element blog: いろんな意味でしゃれにならないApollo にて Apollo はセキュリティ的に危ないよ、という話が出ていたので、ちょっと調べてみました。Web 技術を使っているとはいえ、ローカル環境で動くので、ある程度の覚悟をもってインストールする必要があります。今回は、その心構え（？）のようなものをまとめてみました。セキュリティは専門ではないので、つっこみは大歓迎です。Apollo
てっく煮ブログ - Apollo 触ってみた。すごすぎ。
Apollo のα版がリリースされたので、さっそく触ってみました。初日はランタイムをインストールしてサンプルを動かしてみました。コンパイルは時間がなくてまだ試せてません。2007.2.24追記：HTML+JS版 Apollo アプリを作ってみる で解説文章を書きはじめていますApollo を知らない人のために、おおざっぱにざっくり説明しておくと、Apollo は Web アプリを作るようにローカルアプリケーションを作れるようになるステキなライブラリです。Flash だけに縛られているわけではなく、Flash, Flex, HTML, Ajax などを統合して利用することができます。イメージはこんな感じ（Adobe の apollo_docs_alpha1_031907.zip からの引用）。図からもわかるように、HTML/JavaScript だけで Apollo API を利用してローカ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
