タグ

ブックマーク / tech.nitoyon.com (24)

  • これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ

    スマートフォン向けの 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>に見えるのが隠し味になっていま

    これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ
    adsty
    adsty 2013/02/16
    viewportの設定によって見た目や使い勝手が随分変わる。
  • -webkit-text-size-adjust: none を絶対に設定してはいけない理由

    PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhoneAndroid のブラウザーは、縦向き (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-

    -webkit-text-size-adjust: none を絶対に設定してはいけない理由
    adsty
    adsty 2013/02/15
    WebKitのバグにつき「none」ではなく「100%」を設定する。
  • コンプガチャだけじゃない!? ガチャに潜む確率の罠 - てっく煮ブログ

    twitter をみていたら、こんなツイートが回ってきました。 モバゲー・GREEが確率明示しないのは、搾り取るためというよりは、クレーム対応減らすため。1%でSR、って書くと「100回引いたのに出ない。詐欺だ」。確率だから、って説明すると彼らはこう返す「だから、100回に1回出るんでしょ?」さあ、どう返そうか。 2012-05-06 17:15:49 via モバツイたしかに「1% のガチャを 100 回引いたら当たる」と思い込んでしまう人は多そうです。では、1% のガチャを 100 回引くと、どれぐらいの人が当たり、どれぐらいの人が当たらないのでしょうか。1% のガチャを 100 回引いて当たらない確率は?さっそく計算してみましょう。1 回ガチャを引いて当たらない確率は です。当たる確率は なので 1% と求まります。2 回ガチャを引いたときに、1 度も当たらない確率は です。つまり、

    adsty
    adsty 2012/05/17
    「1/nの確率のガチャをn回引いても36%の人は当たらない(n≧100)」という性質の秘密(1/e)。
  • コンプガチャの確率マジックを中学生にも分かるように説明するよ - てっく煮ブログ

    コンプガチャが話題になっています。コンプガチャにハマりやすい理由として「最初は当たりやすいが、だんだん確率が低くなる」という指摘があります。なぜ「確率が低くなる」という現象おきるのでしょうか。この記事ではコンプガチャの裏側にある確率マジックを分かりやすく解説します。サイコロの面を全部そろえるゲームいちばん身近な確率といえばサイコロです。サイコロを使ったこんなゲームを考えてみます。サイコロ コンプのルール サイコロを 1 回振るには 10 円が必要。 6 つの面をすべてを出せば、ペットボトル飲料をプレゼント。「サイコロの 6 つの面をすべてコンプしよう」というゲームなので、シンプルな「コンプガチャ」といえます。このゲーム、あなたなら参加しますか?6 つの面を全部だせばよいので、運がよければ 6 回(60円)でペットボトルが手に入ります。なんだかお得そうです。ためしにやってみると・・・サイコロ

    adsty
    adsty 2012/05/11
    「確率が低くなる」という現象を数学的に解説。
  • 段ボール15箱の引っ越し(東京→京都)が2万円以内になった節約術 - てっく煮ブログ

    引っ越しシーズンの3月です。過去に何度か引っ越ししたことがありますが、7年前に東京から京都への引っ越しが印象に残っています。このときの、自分の荷物は段ボール15箱でした。東京から京都は長距離でしたが、2万円以内で引っ越しできました。軽トラ借りて運転したわけではありません。長距離運転は大変だし、時間がかかります。ちゃんと、荷物を取りにきてくれて、新居で荷物を受け取りました。 どういう方法を使ったと思いますか? 答えは簡単。「ゆうパック」を利用しました。ゆうパックは頼めば集荷してくれますし、なんといっても 10 箱以上なら「数量割引」を受けることができます。引っ越し手順はこんな感じでした。近くのコンビニで段ボールをもらってくる荷物を箱詰めするゆうパックの集荷センターに電話して、取りにきてもらう日程を決める集荷に来てもらう新幹線で移動する翌日か翌々日に新居で受け取る簡単ですね。ゆうパック引っ越し

    adsty
    adsty 2012/03/06
    「ゆうパック引っ越し」のメリットとデメリットのまとめ。
  • Google がまだ Flash を使っているサービスでみる脱 Flash の難しさ - てっく煮ブログ

    Flash, HTML5スマートフォンの普及が進む中、iPhone には Flash が搭載されず、Android 版 Flash は開発停止になるなど、遅かれ早かれ Web 上から Flash が消えていき、リッチな表現は HTML5 に置き換わっていくことは確実となりました。「これからは HTML5 だ」という印象を世間に強く与えたのが、2009 年の Google I/O でした。Google I/O 2009 レポート グーグルが賭けるHTML 5の未来 − @ITGoogle はそれ以降、多くのサービスに HTML5 を取り入れてきました。しかし、いまだに Flash を利用しているサービスがいくつかあります。この記事では HTML5 化していない、または、できていない 5 つの Google のサービスを通してどのこで Flash が使われているのかなぜ Flash が使われて

    adsty
    adsty 2012/02/28
    Flashが使われている場所と理由の考察。
  • はてブ受けしそうな記事を書いて、1ヶ月で約3万円を稼いだ顛末 - てっく煮ブログ

    このブログでは今年の2月ぐらいから Google AdSense の広告を貼っていました。どれぐらい儲かるんだろうとワクワクしていたのですが、普通に記事を書いていても期待はずれな収入でした。そこで、はてなブックマークでウケそうな記事を集中的に公開して、ページビューを稼いでどれだけ広告収入が増えるか試してみることにしました。調査期間2009日5月10日〜5月末方針海外のデザイン系ブログを少し翻訳して転載しただけの記事を書くことはプライドが許しません。かといって即時性では有名ブログには勝てないので、「個人的には面白いのに世間ではあまり知られていないものを分かりやすく紹介する」という方向で売れ線を狙って書いてみることにしました。記事を書くに当たっては、次のようなことに気をつけてみました。注目を集めるためにタイトルは少し煽り気味にする一番伝えたいことがちゃんと伝わるよう、何度も見直す題に関係ない

    adsty
    adsty 2009/07/02
    「個人的には面白いのに世間ではあまり知られていないものを分かりやすく紹介する」の実験結果。期間中に公開した6つの記事は全て当たり高収益を達成。
  • 中国の町並みをドット絵で再現したE都市がすさまじい - てっく煮ブログ

    中国の地図サイト「E都市」は一昔前の RPG のようにドット絵で中国の町並みを再現しています。描き込みの量もすごいし、再現されている範囲も広くて驚きました。たとえば 上海 はこんなの。もちろんドラッグで移動できます。少し拡大してみます。さらに拡大してみます。右下のビルの看板の文字が読めちゃってます。自分が見た範囲では全ての場所で地図がここまで拡大できました。すべてのズームレベルでしっかりと描き込んであるのが驚きです。Google Maps の衛星地図とも比較できます。衛星写真を45度ぐらい時計回りに回転すると、上のドット絵に近くなりますね。道の形や屋根の色まで忠実に再現されています。北京を旅する北京 の天安門広場〜紫禁城。天安門にズームイン。もちろん毛沢東の肖像画まで再現。オリンピックで話題になった鳥の巣スタジアムも再現されています。すぐ近くはビル街だったんですね。香港を旅する香港 の大量

    adsty
    adsty 2009/05/28
    ドット絵のようなイメージで町並みを再現する中国の地図サイト「E都市」。
  • 新型インフルに対する京都大学の対応がかっこよすぎる - てっく煮ブログ

    新型インフルエンザ(豚インフルエンザH1N1)の感染が広がっています。京都市内でも新型インフルエンザ感染者が見つかり、小中高校だけでなく、大学でも休校が相次いでいます。 新型インフルエンザの感染拡大を防ぐため、府内の私立の小中高校、幼稚園、専修・各種学校計161校・園が22日夕までに休校を決めた。期間は一部を除き27日まで。私立小中高など161校が休校 京都府内、新型インフルで:京都新聞大学でも京都大学以外は休校・登校停止といった対応をしているようです。 大学、短期大学は国公立を含む府内全47校のうち、京都大を除く46校が休校・登校停止の措置をとった。 私立小中高など161校が休校 京都府内、新型インフルで:京都新聞京都大学はなぜ休校しないのか?京都大学のホームページを見てみましょう。 京都市内において新型インフルエンザの感染が確認されたところです。また、京都市、京都府から休校も要請されて

    adsty
    adsty 2009/05/23
    一斉休校を「過剰反応」と見て通常通りの授業を行う姿勢。
  • 履歴消去じゃ消えないエロサイトの隠れた痕跡に要注意 - てっく煮ブログ

    色んなホームページを見ていると閲覧履歴が自動で保存されます。恥ずかしいページを見たあとには、他の人にばれてしまわないように、こっそり履歴を消している人もいることでしょう。通常、ブラウザには「履歴を削除する機能」が備わっていて、ブラウザの履歴を削除すればあなたの悪行の数々は消え去ってくれるように思えます。しかし、ブラウザからは消せない履歴が残っているのです…ブラウザからは消せない履歴それが Flash の Local Shared Object です。Local Shared Object は Flash 版の Cookie みたいなもので、Flash で一時的なデータを保存するときにはよく用いられるものです。Local Shared Object は次の場所に保存されています。OS場所Windows XPC:\Documents and Settings\ユーザ名\Application

    adsty
    adsty 2009/05/19
    Flash版のCookie「Local Shared Object」とその消し方。
  • フォント同士を交配させて新しいフォントを作る「genoTyp」が面白い - てっく煮ブログ

    「この発想はなかった!」と驚いた。genoTyp はフォント同士を交配させて新しいフォントを生み出す実験サイトだ。早速、試しにやってみた。1. 第一世代の親を決めるgenoTyp を開いて左上の [Breed] タブをクリックすると「交配ページ」が表示される。[add original font] ボタンをクリックして、祖先となるフォントを2つ追加してみた。交配させるために2つのフォントをドラッグしてくっつけた。くっついた状態になれば交配の準備は完了だ。2. 交配させてみる中央の [cross] ボタンを押すと第一世代が誕生する。4人の子供が誕生した。父親似だったり、母親似だったり、子供によって雰囲気が異なっている。3. 第一世代でも交配別の [original font] を追加させて、第一世代の中から気に入ったものと交配させてみた。3人の子供が第二世代に誕生した。4. さらに交配!今度

    adsty
    adsty 2009/05/15
    フォント交配の実験サイトの紹介。予想外なフォントができて楽しいけどダウンロードは不可。
  • 全自動ブックマーク棚卸しが想像以上に有意義な件 - てっく煮ブログ

    みんな、自分が過去にブックマークした記事って気になるよね。はてなブックマークを使ってると、勢いでブックマークしてしまうけど、なかなか振り返る機会はないもの…。少し前に「ブックマーク棚卸しがイイヨ」という記事があったんだけどブックマークの棚卸し(?)をしてます。今年一年かけてブックマークしたものを順番に見て行ってます。見るといっても、全部の記事を開いて見るわけではなく、流し読みで、「ああ、これはもう一回読んでおきたい」と思ったものを開いてはインプットしているという感じです。 はてなブックマーク棚卸し - naoyaのはてなダイアリー1年分の棚卸しとなると楽しくないし…。わたしもみんなと同じ、その一員でした。でも、もう平気。「全自動ブックマーク棚卸し」があれば!全自動ブックマーク棚卸し があればもう大丈夫。全自動で 1年前のブックマークを RSS 配信 してくれちゃいます。試しにやってみましょ

    adsty
    adsty 2009/05/12
    「全自動ブックマーク棚卸し」の解説。
  • 北海道を落とすとどう跳ねるのか? - てっく煮ブログ

    北海道を落としたらどうなるんだろう? 少し気になったので調べてみました。START をクリックすると確認できます。北海道以外も確認できるので、しばらく待って気になる都道府県が登場するのを待つとよいかもしれません。最後の鹿児島と沖縄は圧巻です。よつ葉バター1缶ジャンル: 品・スイーツ > チーズ・乳製品 > バター > その他ショップ: 北海道お土産探検隊価格: 593円

    adsty
    adsty 2009/04/15
    各都道府県を落として跳ねさせてみる実験。
  • 【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 を入力して

    adsty
    adsty 2008/12/15
    「Yahoo! Query Language(YQL)」の解説。SQL風の言語を発行すると結果をXMLやJSONで受け取ることが可能。
  • はてなブックマークの細かすぎて伝わりにくい新機能を勝手に紹介 - てっく煮ブログ

    はてなブックマークがリニューアルして毎日楽しく使っているわけですが、そんな中で気付きにくいけど知ってると便利な機能を勝手にまとめてみました。人気エントリの要約を非表示にみんな大好き人気エントリーに、リニューアル後から要約が表示されるようになりました。クリックする前に概要が分かって便利なのですが、古いインターフェースのほうがよかった…という人もいることでしょう。でも大丈夫。そんな人は「人気エントリー」の右端にある▲のボタンを押してみましょう!要約が消えます。すっきり読みたい人にお勧め。あ、もう一回クリックすると要約は復活します。タグとお気に入りを旧バージョンで右側のボタンつながりで、タグとお気に入りを戻す方法を紹介します。タグが一覧になってしまって悲しい人は、右側のボタンを押しましょう。おー、一昔前のタグクラウドと切り替えられるわけですね。お気に入りも見た目が変わりましたが、これも右側のボタ

    adsty
    adsty 2008/12/12
    「新機能を探す」という楽しみ方もあるよね。まあ何にせよ、地球に生まれて良かった!(タイトル的に)
  • jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ

    JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを5つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){

    adsty
    adsty 2008/12/11
    jQueryの内部処理を疑似コードで示しつつ高速に使うためのポイント5つを紹介。
  • はてブ年鑑

    はてブ年鑑とは? はてブ年鑑は はてなブックマーク の年間ランキングと月間ランキングを集計し、ランキングを生成するWebサービスです。 集計方法について ブックマーク数は、年間・月間にブックマークしたパブリックユーザ数を元に算出しています。 サイト別ランキングおよびタグ別ランキングは、期間中にホットエントリ入りしたエントリを対象に集計しています。 更新間隔について 現在、データ更新は手作業で行っています。月1~2回の更新を予定しています。 制限・注意事項 はてブ年鑑は、個人が運営するサイトであり、予告なくサービス内容の変更やサービスの停止を行うことがあります。ご了承ください。 連絡先 はてブ年鑑に関するお問い合わせは までお願いいたします。 英文メールを書くときに便利な表現集550 users 今日の覚え書き Tickler's bunkum days: 「激しく使える」サイトの自分用まと

    adsty
    adsty 2008/12/10
    はてなブックマーク の年間ランキングと月間ランキングを集計し、ランキングを生成するWebサービス。
  • ワリオランドシェイクみたいに 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

    adsty
    adsty 2008/09/29
    ブックマークレットでワリオランドシェイク。仕組みに興味あり。
  • 幕末古写真ジェネレータをハックする - てっく煮ブログ

    幕末古写真ジェネレーター というウェブサービスがちょっと前に話題になりました。どんな写真も幕末の写真のように加工してくれる面白いサービスです。この仕組みを 幕末古写真ジェネレーターの仕組み? - 将来が不安 で解析していたのが面白かったので、続きをやってみることにしました。→成果を先に見たい人は、こちら からご覧くださいませ。1. 真っ黒な画像を渡すまずは、真っ黒な写真を幕末風にしてもらいます。これが幕末風にするための型紙です。以降はテンプレート画像と呼ぶことにします。2. RGB の階調を渡す直感的に、ジェネレータの実装は (元画像+色補正)+テンプレート画像 と考えられます。テンプレート画像は得られたので、あとは色補正のパラメータを探れればハック完了です。そのために、RGB の階調をジェネレータに渡してみました。結果はこうなりました。おー。青色がほとんど消えてますね。グラデーションの方

    adsty
    adsty 2008/04/08
    技術系の話でありながらとても丁寧で分かりやすかった。すごいよボブ。
  • Yahoo! Pipes の Page Fetch モジュールでスクレイピングし放題 - てっく煮ブログ

    pipesこのブログでも何度か Yahoo! Pipes の話題は取り上げてきましたが、先日実装された「Page Fetch」モジュールは素敵すぎます。ほんとに。今まで、Yahoo! Pipes といえば、XML・CSVYahoo が提供してるサービスのデータを加工することしかできませんでした。それが、「Page Fetch」モジュールの登場により、任意の Web ページを加工できるようになったのです。Yahoo! Pipes の使い道といえば、次の2つだと思います。1. RSSリーダーで読むための XML 作り複数の RSS を結合したり、見た目を整えたりして、自分専用の RSS を作る。 (例)サイトの最新被ブックマークを livedoor Reader で読むための Pipes2. Web サービスとの連携JSONP に対応してるので、JavaScript と組み合わせてサーバ

    adsty
    adsty 2007/12/12
    「Yahoo! Pipes」の使い道は「RSSリーダーで読むためのXML作り」と「Webサービスとの連携」。