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

  • -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 を絶対に設定してはいけない理由
    qinmu
    qinmu 2016/05/22
    《iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。これを制御するのが CSS の -webkit-text-size-adjust である。》
  • これがスマートフォン向けサイトを作るときの 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パターンだ
    qinmu
    qinmu 2015/12/22
  • コンプガチャだけじゃない!? ガチャに潜む確率の罠 - てっく煮ブログ

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

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

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

    qinmu
    qinmu 2012/05/11
    これは素晴らしい。
  • 文字を制限した軽量な日本語 Web フォントを作成する方法 - てっく煮ブログ

    HTML5最近、Web フォントをつかってかっこいい表現をしているサイトも増えてきました。ただ、残念ながら 日語で Web フォントを使うのは厳しいのが現実です。というのも、日語には英数字・ひらがな・カタカナ・漢字・記号・・・など必要になる文字数が多すぎるため、フルスペックの日語の Web フォントはファイルサイズがすごいことになりそうです。そこで、「利用したい文字だけを含んだ Web フォントをその都度作ればいいんじゃね?」ということを考えてみました。アイデア自体は珍しいものではなく、例えば デコもじ というサービスは同じようなことをやってくれるようです(ただし、無料では「書体 1 つまで」「5 文字まで」など機能制限が大きい)。手始めに日語 Web フォントを作ってみるまずは簡単に日語 Web フォントを作る方法を紹介しておきます。無料で公開されているフォントの中にも、フォン

    qinmu
    qinmu 2012/04/23
  • 「コピペできない文章」がコピペできなかった理由 - てっく煮ブログ

    html5先日公開した 絶対にコピペできない文章を作ったったwwww はおかげさまで好評だったようで嬉しい限りです。「不思議!」「どういう仕組みなんだ?」という声も多かったので裏側を紹介します。コピペできない訳ではないタイトルは「コピペできない」としていいますが、実際にはコピペはできます。正確に表現すると「コピーすると違う文字になる」という状態になっています。 ではなぜ違う文字になるのでしょうか。結論をいってしまうと「そこにある文字が、人間の目に見える文字とは違う」からです。といっても、これでは分からないですね。今回のために作成された独自フォントトリックの肝は「フォント」です。フォントといえば、文字の見た目を変えるために利用するものです。たとえば、「ほ」という文字を「メイリオ」フォントで表示するとこうなります。フォントを変えて「HG創英角ポップ体」フォントで表示すると、ポップな雰囲気になり

    qinmu
    qinmu 2012/04/23
  • 絶対にコピペできない文章を作ったったwwww - てっく煮ブログ

    html5一見、コピーできるように見えますが、ペーストしてみると・・・。ツイートする

    qinmu
    qinmu 2012/04/20
    webフォントで文字を入れ替えるというトリック。
  • はてブ受けしそうな記事を書いて、1ヶ月で約3万円を稼いだ顛末 - てっく煮ブログ

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

  • 新型インフルに対する京都大学の対応がかっこよすぎる - てっく煮ブログ

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

    qinmu
    qinmu 2009/05/23
  • 履歴消去じゃ消えないエロサイトの隠れた痕跡に要注意 - てっく煮ブログ

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

    qinmu
    qinmu 2009/05/20
    Flash の Local Shared Object。知らなかった。
  • 北海道を落とすとどう跳ねるのか?の裏側 - てっく煮ブログ

    asおかげさまで大好評の 北海道を落とすとどう跳ねるのか? ですが、どのように作ったか、製作過程を紹介することにします。1. 地図の素材を取ってくるまずは地図の素材が必要です。以下のサイトから拝借しました。白地図、世界地図、日地図が無料pdf や eps 形式の地図データを無料で配布してくれているありがたいサイトです。2. 都道府県ごとに分割する上記の素材は県境もベクター形式で提供されていて大変ありがたかったのですが、島がどの都道府県に属しているかの情報がありませんでした。そこで、Google Maps と見比べながら、島を都道府県ごとに分類していきました。無事、全ての島を分類し終わって、こんな感じになりました。とても地味な作業でした…。3. 都道府県ごとに SVG で出力する次に、Illustrator 内で分類したデータをプログラムで扱える形式にしなければなりません。ここでは XML

    qinmu
    qinmu 2009/04/22
  • 北海道を落とすとどう跳ねるのか? - てっく煮ブログ

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

    qinmu
    qinmu 2009/04/15
  • 濃いはてなーが大好きな濃いブログBEST50 - てっく煮ブログ

    はてなーが大好きなブログBEST100 を見ると、ホットエントリ常連ばかりで新鮮さがなかったので、ブックマーク コメントが多い順を調べてみたくなりました。幸い、手元には はてブ年鑑 を作るときに収集したデータがあるので、ちょっと頑張ればブログごとのコメント数を割り出すことができました。データ量が多かったので、2008年の日ごとホットエントリに1度でも入ったことのあるエントリからの集計です。コメントが多いブログ BEST10コメントつきのブックマーク数順に並べてみました。順位サイト名コメント数ブックマーク数コメント率1位はてな匿名ダイアリー472499440250.1%2位痛いニュース(ノ∀`)399496747059.2%3位GIGAZINE(ギガジン)159756497924.6%4位404 Blog Not Found96862968532.6%5位池田信夫 blog607414409

  • 郵便番号マップを作ってみた - てっく煮ブログ

    ビジュアライジング・データ ―Processingによる情報視覚化手法 を読んでたら「アメリカ郵便番号を地図上に図示する」という例が出てきたので、これの日版を作ってみました。 郵便番号マップ内陸地がぽっかりあいてるのが不思議だったり、色でどのへんの地域が近い番号なのかが分かったり、いろいろ興味深いです。絞り込み機能先頭の数字で絞り込む機能もつけてみました。これが東京(1XX)。これが中国四国地方(7XX)。うっすら四国の海岸線が見えます。今週は、これを作っていく過程を紹介していきたいと思います。乞うご期待。ビジュアライジング・データ ―Processingによる情報視覚化手法作者: Ben Fry, 増井俊之(監訳), 加藤慶彦出版社/メーカー: オライリージャパン発売日: 2008/12/01メディア: 大型 連載目次(予定)郵便番号データをデータベースに入れるgeocoding

    qinmu
    qinmu 2009/03/16
  • はてなブックマークの細かすぎて伝わりにくい新機能を勝手に紹介 - てっく煮ブログ

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

  • アドビの新サイトがすごいことになってる - てっく煮ブログ

    まあまあ、何はともあれ、次のキャプチャを見てくれ。これはアドビの「会社情報 > アドビについて」のページの一画面だ。Adobe が先週末にサイトデザインを一新して、何気なく色んなページを見て回っていたときに発見したんだけど、この画像、どう見ても日語だ。「ディッ」と読める。ん?これ?消費者金融の「ディック」。「ィ」の折れ曲がり具合といい、これとしか思えない。もしや、「消費者金融で借金してでもアドビの製品を買いましょう」というメッセージなのか?何はともあれ、会社情報を表示するページで関連のない別会社の看板を表示して、しかもそれが消費者金融というのは、ちょっといかがなものかと思ってしまう…。いや、消費者金融を悪く言うつもりはないんだけど…。よくあることなのかもね深読みはいいとして、実は英語版の会社情報のページでも同じ画像が使われている。ということで、おそらく日語が読めない人間が「この写真はク

    qinmu
    qinmu 2007/12/10
    これは「強力わかもと」みたいなものかと。
  • 1