Font Awesome5をCSSで利用する方法
サイト内にアイコンを設置する時に便利なFont Awesomeですが、CSSでアイコンを表示した際はちょっと工夫が必要でした。
バージョンが5になってからCSSでの利用方法がやや変わり、PCのブラウザでは古い方法のまま表示できましたがiPhoneなどのスマホブラウザではうまく表示できないようになっていたので解消した方法をご紹介します。
まずは、htmlのhead内にCDNからFont Awesome5を設置します。(無料版version5.2.0の場合)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
そして以下のjavaScriptを入れます。※ここが重要
<script>
FontAwesomeConfig = { searchPseudoElements: true };
</script>
cssを適用したいhtmlに例として
<div class="icon">アイコンを設置したい箇所</div>
のように記載し、
CSSではそのclassにfont-familyで 'Font Awesome5' を指定します。
使用したいFont Awesomeのアイコンの文字コードの先頭にバックスラッシュ'\'をつけてcontentに指定して、beforeかafterの疑似要素で追加するのがベターかと思います。アイコンの配置をabsoluteにして位置調整をしやすくしています。
.icon {
position:relative;
padding-left:20px;
}
.icon::before {
position: absolute;
top: 2px;
left: 0px;
color: #0079d6; /* アイコンの色 */
content: '\f4ad'; /* 各アイコンの文字コードは公式サイトにて確認可能 */
font-family: "Font Awesome 5 Free";
font-weight:bold; /* 公式サイトの Solid のアイコンを表示する際に必要 */
}
アイコンの文字コードは公式サイトのアイコン詳細ページに記載されています。
以下の吹き出しのアイコンでは「f4ad」となっているので、contentに設定する際は
content: '\f4ad';
と記載することになります。
ちなみにRegularのアイコンに font-weight:bold; をつけると白抜きアイコンではなくべた塗りアイコンに変わります。
fontawesomeはすべてのアイコンに太字 標準 細字の3タイプ用意されていて、Regularのアイコンは無料で太字と標準が使えるのでどちらでも表示され、Solidは太字アイコンのみが無料なのでboldを設定する必要がある、という理由のようです。
ブラウザでの表示は以下のようになります。
totoBIGで確率の低すぎる結果が出た件についてシステムの不具合を考えてみた
2ちゃんねるまとめサイトで、totoBIGを2回購入したら、それぞれの5口が連続同じ結果になってしまった話が掲載されていました。
totoBIG第909回
— 540 (@4DOqRqe5bPw4tUh) 2017年2月15日
写真左 5口買い
写真右 10口買い
1〜5番目までくじが完全一致 pic.twitter.com/WlcGBR4rGy
totoBIG
— 540 (@4DOqRqe5bPw4tUh) 2017年2月15日
1〜5口目まで全く同じ pic.twitter.com/pvlGQcQZdI
内容を一言で言うと、2回totoBIGを購入し、1回目は10口、2回目は5口買った結果、
最初の5口が2回とも全く同じ結果なってしまったという状態でした。
あまりにも確率が低すぎる出来事なので、2ちゃんねるでは不正があったのか？などと疑念を持ったコメントも見られました。
まず、totoって何？
サッカーの14試合分の結果を、それぞれ
1:ホームチーム勝ち、2:アウェイチームの勝ち、0:引き分け、その他
で予想し、すべて当たったら1等になります。
基本的に、1週間に1回のペースで開催されています。
totoBIGは、この14試合のくじ結果をすべてシステムが勝手（ランダム）に選ぶものです。
1等の当選確率
3の14乗分の1の確率、478万2,969分の1になります。
これは不正なのか？
冒頭にある、totoBIGの5口分の結果で完全一致が起こる確率は
約2,503,100,000,000,000,000,000,000,000,000,000 分の1です。
もうゼロが多くて意味不明な数字ですね。
漢字で表すと、約25溝0310穣分の1です。
これでも分からないですね笑
溝（こう）とは、10の32乗のことを表します。
ちょっとだけ分解すると、
1溝 = 1兆 × 1兆 × 1億
ということになります。
1兆が小さくみえてしまうレベルです。
ジャンボ宝くじでいうと、1等を4回当選する確率よりもさらに低い数字です。
偶然というレベルとは思えないほどの確率の小ささだとわかっていただけたと思います。
ではなぜこんなことが起きたのか。
大きく分けて原因は、「運営の不正」「とんでもない偶然」「システムの不具合」の3つの可能性がある。
「運営の不正」の可能性ですが、不正に関しては検証があまりにも難しい（中の人のリーク等が無いと発覚させるのはほぼ不可能）のでスルーします。
「とんでもない偶然」に関しては上記の通りあまりにも確率が低すぎるのでスルーします。
最後の「システムの不具合」の可能性ついて考えてみようと思います。
具体的に、システムにどんな不具合があると考えられるのか
ここからは少しプログラムの作り手側の話になります。
まず、totoBIGのシステムがどうやってランダムに試合結果を予想しているのかを考えてみます。
ランダムに試合結果を予想するとき、一般的にはプログラムで「疑似乱数」という数字を求めることになります。
擬似乱数を計算する際にはシード値（設定のようなもの）呼ばれる物を設定することになります。
このシード値の特徴は、同じ値に設定すると同じ結果の疑似乱数が得られるということです。
例えば、プログラムでサイコロのふるように1〜6の数字の範囲で、疑似乱数を発生させるプログラムを作ったとしましょう。
そのプログラムで、シード値を1に設定して4回分を実行した場合、
1回目 1
2回目 3
3回目 5
4回目 2
5回目 6
といった順にランダムに1〜6の数字が現れます。
そして、もう一度シード値を1にしてプログラムを実行すると
1回目 1
2回目 3
3回目 5
4回目 2
5回目 6
と全く同じ順に数字がでるような仕組みになっています。
擬似乱数の特徴は、シード値が同じ限り何回プログラムを実行しても
同じ順番で同じ数字が出る点です。
これが人間がサイコロを振るのとは大きく異なる部分です。
擬似乱数のシード値が購入ごとに同じになっていたことが原因か
今回のtotoBIGの件では、2回の購入で「疑似乱数のシード値」が同じだったため、5口分が全く同じ結果になってしまったと考えるのが自然です。
totoBIGシステムが疑似乱数を発生させる際のシード値が何通りあるのか、そしてどんな方法でシード値を決定しているかは外部からはわかりませんが、冒頭の5口分が全く同じになる確率と比べるとかなり高いです。
仮にシード値をプログラムでよく使われる数字のint型（約42億通り数字が扱える型）とした場合、重複する確率は1840京分の1とかなり低い確率となるので、int型よりも小さい範囲でシード値を設定していたり、もしくはシード値の算出に際に偏りが出てしまっている可能性もあります。
つまり購入者の方は1回目10口、2回目5口を買っていますが、もし2回目も10口買っていたら、10口すべてが1回目と全く同じものになっていたということになります。
購入回ごとにシード値が一定のため、稀にシード値が一致した場合、5口だろうと100口だろうと何口買っても重複した結果しか出ないという仕組みになっているのでしょう。
もし本当にこの仕組みなっている場合、システムの不具合と言われても仕方ない状態だと思います。
公正なくじにするためには、乱数の生成手法は非常に重要である
PokerStarsというオンラインポーカーの人気サイトでも、乱数の生成についてはプイバシーポリシーのページで明記されています。
シャッフル
「乱数を生成する数学的な方法を検討する者は罪を負っている。」- ジョン・フォン・ノイマン、1951 年
公正で予測不可能なシャッフルアルゴリズムの使用が PokerStars ソフトウェアにとってきわめて重要であることを理解しています。これを行い、[1] で説明した大きな問題の発生を回避するために、真にランダムなデータを作成するため 2 つの独立したソースを使用しています。
ユーザー入力。ソフトウェアから収集されたマウスの動きやイベント発生時の概要を含む。
スイス企業 ID Quantique が開発した真のハードウェア乱数生成器 Quantis [2]。量子のランダム性をエントロピー源として使用。
これらのソースはそれぞれ公正で予測不可能なシャッフルを実現するために十分なエントロピーを生成します。
PokerStarsではハードウェア乱数生成器を用いているようです。
システムの改善策はどうすべきか
システムが上記の予想通りだった場合は、totoBIGシステムの改善策としては以下の2点が挙げられます。
1. シード値の範囲を広くする or 偏りを検証する
2. 購入ごとではなく、1口ごとに疑似乱数のシード値を変更する
1口ごとにシード値を更新すれば、今回のように5口連続で同じ数値になる確率をかなり下げることができます。
自分もtotoBIGはたまに買うのですが、今後は同じ開催では複数回買わず、一度にまとめて買おうと思います。
投資考えて純粋に利益を考えるならやはり株やFXの方が分がありそうです。
DMM FXさんは2万円キャッシュバックなど太っ腹なキャンペーンもやっています。
Get Wild ラーメンタイマーを作りました。
Get Wild Advent Calendarに参加したかったのですが乗り遅れたので、季節関係なくサービス作って発表しようと思います。
作った物はこちら
カップラーメンの3分を測れるタイマーで、3分経過するとGet Wildが流れ始めます。
いつもラーメン3分を計る時はスマホのタイマーを使っていたのですが、アラームの音を好きな音楽にしたいと思い、(事務所の公式チャンネルで)YouTubeにアップされている楽曲のGet Wildを利用しました。
技術的なこと
YouTube Player APIを利用する上で困った点
Chromeで別タブにある動画を自動再生するには工夫が必要だった
タイマーという性質上、別タブで他のサイトを見ている際も3分を測るタイマーの進行とアラーム（動画再生）は機能していなくてはいけないのですが、
Chromeではアクティブでないタブで動画の自動再生が行われなくなったようです。
非アクティブのタブでもjs自体は実行できるので、setInterval関数でタイマーは動かし続ける事は出来るのですが、3分経過しても動画が始まらないという現象に陥ってしまいました。
回避策としては、タブがアクティブの時に1度動画を再生した後は、非アクティブでも再生できるということがわかりました。
Get Wildラーメンタイマーでは、タイマーのスタートボタンを押した時点で音量のボリュームをゼロにした動画を一瞬再生させて停止することで、タブが非アクティブの状態でも動画の再生ができるようにしました。
一度もアクティブになっていないタブで動画の自動再生は無理かなと思います。
スマホが非対応になってしまった
iPhoneに関しては、ブラウザで動画の自動再生そのものができない仕様だったので論外、
Androidに関してはChromeでは自動再生が可能でしたが、別タブに移動すると自動再生ができなくなるので、実質不可能ということのなりました。（ずっとタイマーのページを開いてくれていれば問題ないのですが。。。）
来月からのGet Wild Advent Calendarに参加される方の内容に期待しましょう！
- アーティスト: TM NETWORK
- 出版社/メーカー: Sony Music Direct(Japan)Inc.
- 発売日: 2013/10/23
- メディア: MP3 ダウンロード
- この商品を含むブログを見る
がんばろう熊本！くまモンアイコンメーカーを作りました。
＜追記＞LINE instagramの丸いアイコンにも対応しました！
作った物はこちらです。
使い方はいたってシンプルで、自分のPCやスマホに入っている写真・画像を選択するとくまモンの画像を合成します。
下のようにくまモンが入ったアイコンが簡単に作れます
今回のような震災において、自然の力はあまりにも大きく、一人一人ができることはわずかですが、少しでも早い復興を願っています。
熊本県への義援金はこちらから
熊本県庁
https://www.pref.kumamoto.jp/kiji_15416.html
http://www.jrc.or.jp/contribute/help/28/
Yahoo!ネット募金
http://docs.donation.yahoo.co.jp/report/kumamoto.html
＜※追記＞
サイトをアップデートし、LINEやinstagram用の丸いアイコンも作成できるようになりました！
LINE instagram用アイコンを選択をすると
このように丸いアイコンになります。
ITmediaさんでもご紹介いただきました！
ありがとうございます。
くまモンの著作権について
個人利用についてはコピーライトを記載すればSNSなどのアイコンに利用できます。
個人が利用する場合でも、利用申請が必要となるか。
以下に例示するような場合は必要ありません。
(1)個人のツイッターやフェイスブック、LINE等のSNSのトップ画面に、くまモンのイラスト(又は写真)を利用する場合
(2)個人のSNSやHP、ブログなどの記事としてくまモンのイラスト(又は写真)を掲載する場合
(3)ランニング仲間数人が揃いの(既成の)くまモンTシャツを着て練習や試合に出ること
(4)営利目的ではないが、自分で作ったくまモンのマスコットを、制作経費だけもらって身内にプレゼントする場合
(5)個人で楽しむ事を目的に自分で作ったくまモンのマスコット等を、自分のブログなどに掲載する場合
個人利用の場合でも、著作権の表記は行ってください。
日本語表記 ©2010熊本県くまモン
外国語表記 ©2010 kumamoto pref. kumamon
お問い合わせ
くまもんアイコンメーカーへのお問い合わせや、不具合のご報告は以下のリンクよりお願いします。
http://goo.gl/forms/xyLOf3w4gx
twitterでのご連絡はこちらから
