スマートフォン向けの 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>に見えるのが隠し味になっていま
コンプガチャが話題になっています。コンプガチャにハマりやすい理由として「最初は当たりやすいが、だんだん確率が低くなる」という指摘があります。なぜ「確率が低くなる」という現象おきるのでしょうか。この記事ではコンプガチャの裏側にある確率マジックを分かりやすく解説します。サイコロの面を全部そろえるゲームいちばん身近な確率といえばサイコロです。サイコロを使ったこんなゲームを考えてみます。サイコロ コンプのルール サイコロを 1 回振るには 10 円が必要。 6 つの面をすべてを出せば、ペットボトル飲料をプレゼント。「サイコロの 6 つの面をすべてコンプしよう」というゲームなので、シンプルな「コンプガチャ」といえます。このゲーム、あなたなら参加しますか？6 つの面を全部だせばよいので、運がよければ 6 回（60円）でペットボトルが手に入ります。なんだかお得そうです。ためしにやってみると・・・サイコロ
html5Web フォントは「Web サイトにオリジナルのフォントを埋め込む」ための技術です。現行のブラウザーは全て Web フォントに対応している状況です。そんな状況であるため、絶対にコピペできない文章を作ったったwwww は Web フォントに依存したコンテンツでしたが、特別な配慮はせずに公開しました。しかし、公開後、Web フォントが適用されなかった複数の方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。４種類のフォーマット一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
html5一見、コピーできるように見えますが、ペーストしてみると・・・。ツイートする
win8, as3, msWindows 8 の情報がいろいろ出てきています。この中で気になるのが「Windows 8 の IE では Flash が動かない」という話です。ちょっと煽りすぎたかもしれないので、もう少し正確に説明してみます。２つの IE10Windows 8 には２つの Internet Explorer 10 が搭載されます。Metro 版 IE10従来版 IE10利用イメージ: Metro 版 IE10Metro というのは iOS や Android のようにタッチ端末でも使いやすいよう設計されており、Windows 8 の標準 UI に採用されています。Windows 8 を起動すると、タイル上のメニューが Metro で表示されます。タイルメニューの左上にある Internet Explorer を選択すると Metro 版 IE10 が回転しながら起動します。M
GoogleMapsAPI, asGoogle Maps をジオラマ写真風にすると印象が変わる、というアイディアが チルトシフトの新しい使い方 その2 に書いてあった。おもしろそうなのでリアルタイムに Google Maps をジオラマ風に表示するものを作ってみた。好きな場所を表示できるので、地球全体がジオラマにしてしまった。簡単な使い方：上部の検索欄に英語で入力して移動左のコントロールは Google Maps と同じShift+ドラッグで視点移動日本各地を巡ってみた東京駅前車がミニチュア風でかわいい。京都御所箱庭になりました。大阪駅前線路と高速道路とビル群。 どうぞご利用くださいあなたの街をジオラマ風に！ソースコードチルトシフトのエフェクトは「彩度をあげる」「周りをぼかす」「周りを暗くする」ことで実現している。ソースコードは以下に（map_1_20.swc、minimalcomps、T
みんな、自分が過去にブックマークした記事って気になるよね。はてなブックマークを使ってると、勢いでブックマークしてしまうけど、なかなか振り返る機会はないもの…。少し前に「ブックマーク棚卸しがイイヨ」という記事があったんだけどブックマークの棚卸し(?)をしてます。今年一年かけてブックマークしたものを順番に見て行ってます。見るといっても、全部の記事を開いて見るわけではなく、流し読みで、「ああ、これはもう一回読んでおきたい」と思ったものを開いてはインプットしているという感じです。 はてなブックマーク棚卸し - naoyaのはてなダイアリー１年分の棚卸しとなると楽しくないし…。わたしもみんなと同じ、その一員でした。でも、もう平気。「全自動ブックマーク棚卸し」があれば！全自動ブックマーク棚卸し があればもう大丈夫。全自動で １年前のブックマークを RSS 配信 してくれちゃいます。試しにやってみましょ
Apple のスティーブジョブズ CEO が公開した Thoughts on Flash を和訳してみた。この文章では、「なぜ iPhone、iPod、iPad に Flash が搭載されないのか」について Apple の立場から６つの理由を説明している。細切れにジョブズの口から理由が語られたことはあったが、まとまって文章化されたことはなかった。目次Flash はオープンじゃない全ての Web を見るために本当に Flash は必要か？セキュリティとパフォーマンスを犠牲にしたくないFlash を使うとバッテリーが持たないFlash はタッチを前提としていない一番重要な理由Apple は Adobe と長い期間、関わり合ってきた。実際、我々が Adobe の設立者に会ったのは、彼らがガレージで起業したばかりのころだった。Apple はレーザープリンタに Adobe の Postscript
はてブ年鑑とは？ はてブ年鑑は はてなブックマーク の年間ランキングと月間ランキングを集計し、ランキングを生成するWebサービスです。 集計方法について ブックマーク数は、年間・月間にブックマークしたパブリックユーザ数を元に算出しています。 サイト別ランキングおよびタグ別ランキングは、期間中にホットエントリ入りしたエントリを対象に集計しています。 更新間隔について 現在、データ更新は手作業で行っています。月１～２回の更新を予定しています。 制限・注意事項 はてブ年鑑は、個人が運営するサイトであり、予告なくサービス内容の変更やサービスの停止を行うことがあります。ご了承ください。 連絡先 はてブ年鑑に関するお問い合わせは までお願いいたします。 英文メールを書くときに便利な表現集550 users 今日の覚え書き Tickler's bunkum days: 「激しく使える」サイトの自分用まと
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
前回の 日本の伝統色をHSV空間に配置してみた が意外に面白かったので、今度は世界各国のデータで試してみた。日本自然界にある色を中心に、埋め尽くすかのように沢山の色があるのが分かります。色名の由来がまた、素敵なんだよなー。中国日本に近い。というよりかは、日本がもろに中国の影響を受けたんだろうな。イギリス日本・中国とは全く違う分布になっていますね。教科書的に均等にばらついていて円に近い。果物とか花とか宝石の名前が多いのかな。フランスイギリスと同じくばらついているんだけど、右上の紫と、右下の黄色が充実しているのが印象的。紫色が充実しているのは、ワインを表現するため！？ 黄色が充実してるのは、チーズを表現するため！？アメリカ彩度が高い色（円の外側）が充実しまくっている。超原色だぜ、USA！アフリカ特徴的な原色。水色、緑は、他の国には登場すらしていないぐらいに強烈。8bit ゲーム機のような色だ。
まあまあ、何はともあれ、次のキャプチャを見てくれ。これはアドビの「会社情報 > アドビについて」のページの一画面だ。Adobe が先週末にサイトデザインを一新して、何気なく色んなページを見て回っていたときに発見したんだけど、この画像、どう見ても日本語だ。「ディッ」と読める。ん？これ？消費者金融の「ディック」。「ィ」の折れ曲がり具合といい、これとしか思えない。もしや、「消費者金融で借金してでもアドビの製品を買いましょう」というメッセージなのか？何はともあれ、会社情報を表示するページで関連のない別会社の看板を表示して、しかもそれが消費者金融というのは、ちょっといかがなものかと思ってしまう…。いや、消費者金融を悪く言うつもりはないんだけど…。よくあることなのかもね深読みはいいとして、実は英語版の会社情報のページでも同じ画像が使われている。ということで、おそらく日本語が読めない人間が「この写真はク
このサービスを利用するためには Flash Player 9 以降が必要です。 → インストールする This site requires Flash Player 9 or later. → Please click here to download Flash Player 9 ブログのURLやニュースサイトのURLを入力してください： Please input URL of any blog or news site.: (例) アサヒコム、発言小町、livedoor天気予報、竹原慎二 オフィシャルブログ、はてなブックマーク 人気エントリ (ex) CNN.com、digg、Popular pages on del.icio.us
関西人にとっては思い入れの強い丸ビルを RSS リーダーにしてみました。丸ビルRSSリーダー 遊び方ニュースサイトの URL やブログの URL を入れて遊んでみてください。URL だけじゃなく、メッセージを入力すれば、それを表示することだってできます。入力した URL は自動的に #http:// という形で URL（location hash） に保存されるので、ブログからリンクすることもできますよ。（例） このブログを表示：http://tech.nitoyon.com/marubiru/#http://d.hatena.ne.jp/nitoyon/リリースノート電光掲示板って不思議ですよね。どうでもいい情報でも、最後まで読まないと満足できなかったりします。新幹線の各車両の前後に電光掲示板がありますが、あれに流れるニュースとか広告って、なぜかぼーっと眺めちゃうんですよね。流れてくる情
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く