Webfontについてちょっと調べてみた

↓を読んで「ん?」って思ってブコメを読んでちょっと納得して少し知らべて思ったことのメモ

重いんじゃね?

ベクターファイルだから基本的には軽くなることが多いらしい。自分で作ったこと無いからわからないけど、ベクターファイルでできてるんであれば大きな画像になればなるほど軽くなると思う。ただし結局はフォントセットを丸々ダウンロードすることになるから1箇所だけWebfontを導入してIcon作ってみましたとかだと重くなると予想できる。やるなら画面で使っているiconをすべてwebfontに変更してその組み合わせだけのフォントセットとかを作ってやれば軽くなるんじゃないかと思う。そうすればCSS Spriteと同じような効果が発揮されるんじゃないかと想像。

色付けれないんじゃね?

fontだから色付けられないんじゃないかと調べてみたらやっぱりそうみたい。基本的に装飾はCSS3で装飾してtext-shadowつけたりcolorで色変えたりとかそこら辺で頑張るのが普通っぽい。iconとか簡単かつ単色で問題ない画像ならいいだろうけど複雑で単色ではないものを実現したいときはwebfontを使うのは無理。relativeとかで重ねればなんとかなるのかもしれないけどそこまでの労力を払うなら画像用意したほうがよっぽどいい。

SEO的にどうなの?

Webfontって本来は普通の文章を装飾するためにあるものだからSEO的には全然ダメだと思う。普通に文章書いてて特殊なフォントで記載したタイトルとかを出したいからしょうがなく画像を使ってますとかそういうサイトならSEO的にいいと思うけど、今回の使用方法を考えると全然ダメ。これなら画像にaltをきっちり書いたほうが機械も理解しやすいだろうからそっちのほうがいいんだろうと想像。

Fontファイルがダウンロードされなかったら終わりじゃね?

普通にブコメでも突っ込まれてたけどそうだよなーって思う。webfontって単なるフォントだからaっていう文字コードがきたら☆っていうものを表示してねっていうだけの技術なんでわけわからないものが見える可能性がある。だけどちょっと考えると、リストのiconを表示したいんだったら上から順番に1,2,3,4とかいう数字に表示したいものを割り当てればダウンロードされなかったとしても普通に見えるだろうし、twitterのマークをtに割り当てるとか文字と画像が何となく分かる組み合わせだったら問題ないのかも。

まとめ

つらつらと書いてみたけどWebfontは文字の装飾で使うべきで画像の代わりに使うものではないと思う。でもいっぱいアイコンを使わなければならないサイトとかならダウンロードされなかった場合に表示される文字と画像とがつながっているのであればお気軽に使えるCSS Spriteの代わりとして使うのもありなのかなーって思った。僕としてはSVGでブラウザに画像書かせようぜ!っていうほうがメリットが大きいんじゃないかなーって思う。

参考


HybridAuth を触ってみた

FacebookでTwitterやFacebookへのログイン機能をこれ1個で実装できるPHPライブラリ「HybridAuth」:phpspot開発日誌っていう面白そうな記事が回ってきたから触ってみた。備忘録もかねてできたことを列挙してみる。

ダウンロード

以下のページのダウンロードって書いてるところからダウンロード

ファイルの中身

簡略化して列挙すると以下。

├─examples
│  ├─facebook_integration
│  ├─hello_world
│  ├─signin_signup
│  ├─social_hub
│  └─widget_authentication
└─hybridauth
    └─Hybrid

中身を見ると多分こんなかんじと思われる。僕は簡単に認証出来るだけでよかったからhallo_wordしか触ってない。ほかはざっと読んだだけだから間違ってるかも

  • facebook_integrationがFacebookでやる場合の簡単な使い方
  • hallo_worldが一番簡単な使い方
  • single_signupがMVCで分けてかける簡単なアプリを作るための雛形っぽい。DBまである
  • social_hubがマルチコネクトの管理までやってくれそう。SNS的なやつを作る雛形っぽい
  • widget_authenticationがボタンが並んだ認証画面を作る奴っぽい
  • hybridautoが本体

config.phpを変更

config.phpで以下の部分を弄る必要がある

  • base_urlをhybridauthを配置したURLを記載。ファイルの中身の「hybridauth」フォルダのURLを書くことになる。
  • providersで使うやつをenabledをtrueにして必要なkeyを入力

動かしてみる

とりあえずtwitter認証をやってみたかったから自分のアプリケーションIDとかをconfig.phpに入力して、index.phpに書いてある相対パスとか変更してhollo_world/index.phpを動かしてみると案外あっさり認証が動いた。これは便利。

試したURL。しばらくしたら消すかもしれないけど、Twitterで認証走ってsatohu20xxAppTestのアプリ名で「HybridAuthの日本語テストですぞ!!!」ってつぶやかれる。Tokenとかとってないからお試しにどうぞ。

ポストのテスト

せっかく認証まで言ったのでついでにポストも動かしてみる。

<?php
        $twitter->setUserStatus( "hogehoge" ); 
?>

みたいに書くと↓のように出力される。日本語もバッチリ出力されるんだけど、文字コードがShiftJISになっていたせいでエラーが返答され続けてちょっと悩んだ。。。

他にもAPIはあるみたい。Token取る奴もあるみたいだからいざとなればTokenとっちゃって色々やれば別にAPIがなくても問題ない。

http://hybridauth.sourceforge.net/apidoc.html
hybridauth.sourceforge.net
 

まとめ

Twitterしか試してないけどこれは便利。コードもわかりやすく書いてあるし、読みやすくてなにか起こった時でも自分で直せそう。これ使っていつかなんか作る。

パチンコから学ぶコンプガチャに変わる試作3つ

先に行っておくと、僕はカードゲームを作っている中の人でもなんでもない単なるパチンコ好きのカードゲーム嫌い。だからこれから書くことは、法律云々でやっちゃダメなことかもしれないし、既にやってることかもしれない。

ガチャを引く台を自分で決めれるようにする

台によってレアカードが出る確率が違うふうなことを記載して、自分で台が選べるようになると引く人も増えるんじゃないだろうか。自分で選んだ台だからレアカードが出なかったのは違う台を選ばなかったからじゃないのか?っと錯覚させることで次に別の台でガチャを引くっていう動作につながるかもしれない。

台の直近で出たカード履歴を出す

今まで出たカードの履歴を出すことによって、クズカードが続いたから今度はレアカードが出るんじゃないかと錯覚してガチャを回してしまう。俗に言われるギャンブラーの誤謬ってやつ。これに台選択の自由まで与えると、クズカードが出続けた台でやればレアカードが出るんじゃないの派とレアカードがいっぱい出てるほうがレアカードが出る確率がいいんじゃないのか派に分かれてガチャを引く人が増えそう。

確率変動を設ける

何分の1の確率で確率変動に入るようにする。確率変動中は今まで30分の1だったのが2分の1で引けるようになりますよみたいな触れ込みを書いておく。こうするとこれまで使ったものも確率変動一発でレアカードがじゃんじゃん出るんじゃないのか?と錯覚してクズカードを引きまくる人が出てくる。台選択の自由を出しておくと、レアカードが出てすぐだと、これは確率変動にいるんじゃないのか?と錯覚してガチャを回してしまう。

まとめ

ざっくりとすぐに思いつくものを書くと↑の3つぐらいだけど、これ以外にも「天井制度」とか「フリーガチャカード」とか色々浮かんでくる。ということは結局ガチャがあるカードゲームってパチンコと作りはあまり変わらないんじゃないのかなーっておもったりもする。僕個人としてはあまりカードゲームは好きではないので(*1)、これを気に単純なカードゲームは全部潰れてしまってみんなが楽しめるゲームがもっと流行ってくれるといいなぁと思う。

*1: クリックするだけで進むやつね。マジック・ザ・ギャザリング的なのは好き

SPモードメールの容量を減らす方法

スマホってすごくメモリ容量が少なくて、気がつくとすぐに空きメモリがなくなる。だから、僕は定期的に使わなくなったアプリのアンインストールをするんだけど、SPモードメールだけ使ってる容量の桁が違うことが目に付く。多分送受信したメールをすべてバカみたいに本体においてるからだと思うんだけど、これを解決するには自動で削除するしかなさそう。

メールを自動でゴミ箱に移す

操作がちょっとわかりにくくて、SPモードメールのアプリを立ち上げて、「受信BOX」を長押しする。するとメニューが出てくるから「自動削除設定」を選んでどれくらい経過したメールを削除するかの設定を行えばいい。「送信BOX」も同じね。

ゴミ箱の削除

↑の操作をやれば自動的に削除してくれるのかとおもいきやゴミ箱に移すだけ。だから定期的にゴミ箱を空にしてあげないといけない。操作は「ゴミ箱」を選択してメニューボタンを押してから「全削除」を選択すれば削除される。

まとめ

全般的にどうしてこうなったとしか思えないアプリ設計。普通に保存先をSDカードに移してくれるだけでこんなめんどくさい動作を行う必要がなくなるのに保存先を選択できない意味がわからん。ゴミ箱って言ってるのに自動削除の期間を選べない意味もわからん。保存先とか調べて定期的にどうにかするメーラー的なアプリつくろうかなー。まぁ、とりあえずメールを直近の1か月分だけ残して全部削除してやったら30Mぐらい使用容量が減ったからやる価値はあると思う。

メールを削除しないと本体にたまり続けていく仕様をつくることでメールの定期削除を促す。これは、過去を振り返らずに前を向いて行きましょうっていう暗黙的なDOCOMOからのメッセージなのかもしれない。余計なお世話だけど・・・。

スマホでimgタグのwidth、heightを取る場合に注意すること

imgタグのwidth、heightは画像のロードが完了しないと取れないっぽい。対応策としてはimgタグでloadが終わった後に取れば問題ない

$.each($('selecter').children(), function() {
    if(this.tagName.toLowerCase() === 'img') {
        $(this).load(function() {
            // ここでwidthもしくはheightを取る
        });
    }
}

そんだけ。

はてなブックマークで効率良くデータを集める方法

僕はこんなのをつくるぐらいはてなブックマークが好きなんだけど、どうしてもノイズが混じりやすい。ノイズもノイズで面白いんだけど、ちょっと効率良く情報を集めるためにやるちょっとした小技。

はてなブックマークをURLでフィルタ

どこかのURL配下のものしか欲しくない場合は以下のように書くと取れる。下の場合はITmediaの場合。

はてブ数でフィルタ

はてブ数はthresholdの数字で決まる。50以上の場合は、以下

タグでフィルタ

タグでフィルタする場合はURLをちょっと変えてやる必要がある。hogehogeってタグでフィルタしたい場合は以下

ユーザでフィルタ

ユーザでフィルタする場合もURLをちょっと変えてやる必要がある。hogehogeってユーザでフィルタしたい場合は以下

RSSで見る

出ているはてブの情報をRSSで受信したい場合はmodeを変更してやる。hogehogeってタグのはてブ情報をRSSで受信したい場合は以下。

複合技

thresholdはどこでも使える。タグとユーザとURLはどれも複合できない。thresholdを上げれば上げるほどノイズは減るけど面白い情報は入ってきにくい。URLとタグで興味のある情報が入ってきやすい状況にしてthresholdでノイズを減らすのがおすすめ。ノイズが減った情報をRSSで取得して暇な時にRSSの情報をためて読むと捗る

IT Media
http://b.hatena.ne.jp/entrylist?threshold=30&url=http://www.itmedia.co.jp/&mode=rss
techcrunch
http://b.hatena.ne.jp/entrylist?threshold=30&url=http://jp.techcrunch.com/&mode=rss
ますだ
http://b.hatena.ne.jp/entrylist?threshold=30&url=http://anond.hatelabo.jp/&mode=rss
Android
http://b.hatena.ne.jp/t/android?threshold=30&mode=rss
node.js
http://b.hatena.ne.jp/t/node.js?threshold=30&mode=rss

まとめ

こんな感じでいろんなURLとかタグとかでフィルタすると情報を集めやすいと思う。ただ、これってはてなが公式に出しているものではないみたいだからいきなり変更されて取れなくなる可能性はあると思う。変更されるまでは使い倒してやっていいんじゃないかなー

node.js + socket.ioの覚書

今触ってる奴の覚書

ServerとClientの通信

socket.io.jsを読み込んでio.connectで接続する。Server、Clientともにsocket.onでメッセージを受信して色々やる

// サーバ側
io.sockets.on('connection', function (socket) {
    // こんな感じでメッセージを受信
    // Clientの第1引数と同じで受信できる
    socket.on('user info', function(info) {
       // メッセージ受信後の処理
    });
});
// client側

// これで接続
socket = io.connect();

// これでメッセージ送信
// 第1引数がメッセージ名、第2引数が送信するデータ
socket.emit('user info', info);

これから記載していくことはServer側、Client側でSocketという名前の変数に値が入ってるものとして記載してる

通信中のclient idを取得する

サーバ側で取得する

    // これで通信中のIDが取得できる
    var id = socket.id

メッセージを送信してきたClientへメッセージを返答

socket.emit('message', info);

接続しているClient全体にメッセージを送信

io.sockets.emit('message', info);

個別にデータを送信

io.sockets.socket(socket.id).emit('message', info);

まとめ

WebSocketのリアルタイム通信は大体これぐらいあればいろいろできる。簡単にチャットソフトとかもすぐできる。io.emit()でClient側から来たデータをio.sockets.emit()で全Clientに流す。個別チャットをやりたかったらio.emit()で第2引数に個別の送信先のsocket.idを渡してもらえばそこ流すだけでいい。

あまりに簡単にかけすぎるからnode.jsとWebSocketに恋してしまいそう。ってか、Binaryデータもデータとして投げてこれるらしいんだが、それをそのままClientに流しちゃうとセキュリティ的に色々困ったことが起こりそうな気がする。まぁ、個人でやってる分にはそこまで考えないけど、企業でやるならそこらへんまで気を付けないといけないのかもねぇ。

当たり前のレベル

人間にはその人の当たり前のレベルがあると思う。この当たり前のレベルが高ければ高いほど人間って素晴らしく生きていけるんだと思う。

例えばデブとガリがいたとする。デブは常々っ痩せたいと思っていてガリは常々太りたいと思っていたとする。この二人の食生活とか運動量とかを比べると明らかな違いがあったとしても二人から見れbそれが当たり前なのかもしれない。要はどこが基準となって当たり前っていうのを考えるかっていつお当たり前ってのはその日それぞれにそれぞれの高さで定義荒れているものだと思う

人間として高みを目指したければ当たり前のレベルを上げればいい。

運動することが当たり前になれば運動することは苦にならなくなるし、勉強することが当たり前になれば勉強することが苦にならなくなる。当たり前のレベルを上げることで勝手にその人の能力が上がるっていう話だ。

逆に言えば当たり前のレベルっていうのを考えればいろいろ幸せになれる、

何かのコンプレックスで悩んでいるんでればコンプレックスを当たり前だと思えばいい。別にコンプレックスはあって当然なんだ、それは当たり前なんだと思い込んでしまえばいい。当たり前のレベルが下がれば人は幸せを感じることが多くなるんじゃないかと思う。自己のレベルを上げたいのであれば当たり前のレベルを上げて、シア合わせになりたければ当たり前のレベルを下げればいい。相対的な評価を考えていろいろ思い悩むぐらいなら全てを捨てて当たり前だと思えばいい。

ちょっと考え方を変えるだけで人間はすぐに楽になれる。

はてなブログからWordPressへ移行した

はてなブックマークが第三者に行動履歴を送ってたとかですごく盛り上がってるけど、僕としてはそんなことはどうでもよくてはてなブログがとにかく機能が足りない。はてなダイアリーを使い続けても良かったんだけど、レンタルサーバ借りてるなら自分で作るべきだよなぁと一念発起してWordPressを入れてみた。んで、WordPressを導入する上でやったこと。

WordPressのインストールとテーマの設定

まぁ、普通に。これはどうでもいいところだから割愛。強いて言えば、テーマ探すのに結構手間取った。(*1)

スパム対策

Akismetが標準で入ってるけど、これってIDが必要。英語読んでID入れるのがめんどくさかったから別のを探してみた。Google先生に聞いてみると「Spam Free WordPress」の評判がいいみたいだから、こいつを入れてみた。ちょっと使ってみてダメだったら別のに変える。

はてな記法の追加

僕がもともとはてなを使っていたのははてな記法が便利だったから。WordPressに移行してもはてな記法を使いたいなーって思ってたらプラグインを作ってる人がいた。「WP HatenaNotation」っていうやつ。これ、すごく便利。作ってくれた人ありがとう!!!

コードの色付け

コードを書くことが多いから色付けして欲しい。Google先生に聞いてみると「SyntaxHighlighter Evolved」一択っぽい。これを導入すると以下みたいに色付けすることができる。

void main(void) {
    printf("はろー、わーるど");
}

んけど、普通に「SyntaxHighlighter Evolved」の記載方法を行うと「WP HatenaNotation」を入れてるからpタグが入ってしまう。なんで、「SyntaxHighlighter Evolved」の記載方法を使わずに「WP HatenaNotation」のスーパーPre記法を使って書く。そのままだと色付けしてくれないいのでFooterに以下を記載して無理やり色付けさせる。必要ないjavacriptも読み込んでしまうことになるけど、別に気にする必要もないかなー。

<script type='text/javascript' src='http://blog.choilabo.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js?ver=3.0.83c'></script>
<script type='text/javascript' src='http://blog.choilabo.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushCpp.js?ver=3.0.83c'></script>
<script type='text/javascript' src='http://blog.choilabo.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushCss.js?ver=3.0.83c'></script>
<script type='text/javascript' src='http://blog.choilabo.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJava.js?ver=3.0.83c'></script>
<script type='text/javascript' src='http://blog.choilabo.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJScript.js?ver=3.0.83c'></script>
<script type='text/javascript' src='http://blog.choilabo.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPhp.js?ver=3.0.83c'></script>
<script type='text/javascript' src='http://blog.choilabo.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushXml.js?ver=3.0.83c'></script>
<script type='text/javascript'>
	(function(){
		var corecss = document.createElement('link');
		var themecss = document.createElement('link');
		var corecssurl = "http://blog.choilabo.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0.83c";
		if ( corecss.setAttribute ) {
				corecss.setAttribute( "rel", "stylesheet" );
				corecss.setAttribute( "type", "text/css" );
				corecss.setAttribute( "href", corecssurl );
		} else {
				corecss.rel = "stylesheet";
				corecss.href = corecssurl;
		}
		document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
		var themecssurl = "http://blog.choilabo.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeRDark.css?ver=3.0.83c";
		if ( themecss.setAttribute ) {
				themecss.setAttribute( "rel", "stylesheet" );
				themecss.setAttribute( "type", "text/css" );
				themecss.setAttribute( "href", themecssurl );
		} else {
				themecss.rel = "stylesheet";
				themecss.href = themecssurl;
		}
		//document.getElementById("syntaxhighlighteranchor").appendChild(themecss);
		document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );
	})();
	SyntaxHighlighter.config.strings.expandSource = 'ソースを表示';
	SyntaxHighlighter.config.strings.help = 'SyntaxHighlighterについて';
	SyntaxHighlighter.config.strings.alert = 'SyntaxHighlighter\n\n';
	SyntaxHighlighter.config.strings.noBrush = '指定のブラシが見つかりませんでした: ';
	SyntaxHighlighter.config.strings.brushNotHtmlScript = 'HTMLスクリプトのオプションのためにブラシが構成されませんでした: ';
	SyntaxHighlighter.defaults['auto-links'] = false;
	SyntaxHighlighter.defaults['pad-line-numbers'] = false;
	SyntaxHighlighter.defaults['toolbar'] = false;
	SyntaxHighlighter.defaults['wrap-lines'] = false;
	SyntaxHighlighter.all();
</script>

上記では一部しか色付けされないんだけど、必要になったら追加する。

まとめ

別にわざわざ移行する必要性はなかったんだけど、自分で色々いじくれるならこっちのほうが断然いいよね。僕がレンタルサーバを初めて借りた時には「WP HatenaNotation」がなかったから結局WordPressのブログは閉じてはてなダイアリーに戻ったんだけど、これがあるならわざわざはてなダイヤリーとかはてなブログとか使う必要性がないよね。

本当に「WP HatenaNotation」さまさまですね。

*1: シンプルなテーマって結構ない。。。