ksk1015のブログ

html, css, javascript 等のウェブ制作の技術をブログしてきます。あばばばばば。

うちは蚊が多い。ただでさえ多いのに、今日、ミスで窓を開けっ放しにしていたために、ものすごく蚊が侵入してしまった。部屋をぐるっと見回すと壁や天井に蚊がいるいる。狂ったように蚊の退治に励んだ。

今回の蚊の大侵入とは関係ないいつだか蚊に刺されたときの痕。

f:id:ksk1015:20141002200856j:plain

仕事の進捗状況まずいです

2013年をふり蛙

1月ころ

キンタローにはまる。繰り返し動画見てた。

3月

暇すぎて苦痛な自動車通勤中にTBSラジオのjunkをポッドキャストで聞くようになった。そのイベントがTBSであり、ちょうど東京に行く予定と重なったため見に行った。爆笑問題とかバナナマンとかお笑い芸人を初めて観た。東京に住んでいるときは芸能人を見る機会はほとんどなかった。松村邦洋を中央線の電車の中で二回ほど観たことあるくらいだ。

現在は、爆笑問題カーボーイ有吉弘行のサンデーナイトドリーマーと、ポッドキャストだけど、バイリンガルニュースをよく聞いてる。

4月

4月ではないが、勤めやめる半年くらい前からウェブの勉強会にちょくちょく参加して、静岡のウェブ制作やってる方々を知る。

5月

お勤めやめる。

6月

一年半の勤めで15キロ太ってて、体調的にも相当悪く、糖質制限ダイエット始める。厳しくやったのは最初の一周間で、その後は軽く、今はほとんど制限してないが、10キロ減った。

フットサルで右足首折る。ジャンプしたときに足をひねってという自爆。高2のときにと理由と箇所もほぼ同じ。でもこの歳での骨折は回復力が無いのとリハビリをちゃんとしてないので今も違和感が残ったままだ。しかも親との海外旅行三日前の時で僕はキャンセルに。

7月〜9月

おとなしくしたり、ちょこちょこ仕事をしたり。

10月

開業届け出す。仕事する。

12月

今に至る。

好きなCSSプロパティは background-sizeのcoverとcontain

f:id:ksk1015:20131216003345g:plain

CSS Property Advent Calendar 2013 の16日目の記事です。

好きなCSSプロパティというか値ですが、background-sizeのcoverとcontainです。

coverを指定すると、背景画像が縦横比を保ちながら要素を覆うようにぴったりとリサイズされ、containを指定すると、同じく縦横比を保ちながら要素内に収まるようにぴったりとリサイズされます。

対応してないブラウザもIE8以下くらいです。

嬉しい!

下記のデモで background-sizeのcoverとcontain を体験できます。

明日は xl1 さんです。

 

BEMというよりクラス名をわかりやすく区切りたい

ウルトラ怪獣500 ベムスター

メリークリスベム。
BEM Advent Calendar 2013 の14日目の記事です。

わざわざBEMを持ちださなくても、クラス名には

  1. 可読性を高めるためだけの区切り
  2. 親子間を示す区切り
  3. 修飾句との区切り

の3種類の区切りが発生するこはままあることかと思います。
2つ目の区切りのあるクラスは、親に依存したパーツであったり、3つ目の区切りのあるクラスは、拡張されたパーツであったりするため、3種類の区切りを区別させたい欲求を持ったことあるマークアッパーは少なくないんじゃないかと思います。

いつだか僕はこれを解決するために

  • 親子間は ハイフン2つ ・・・ parent--child
  • 修飾句は ハイフン1つ ・・・ element-modifire
  • 可読性を高めるための区切りはキャメル ・・・ className

というBEMに似た命名規則を夢想まではしましたが、こんなの他人が見たら、キモがられるだろうなと思って、そっと胸にしまいました。

 

今年の6月。
サイバーエージェントの方々が僕の住む静岡まではるばるやってきて貴重な話をしてくださり、その中でBEMが紹介されました。ずっと胸に溜め込んでいた3種類の区切りを区別したい欲求が顔を覗かせましたが、自分の夢想した以上のキモさと厳格そうなルールを前にすぐに引っ込めてしまいました。

 

そして今月12月。BEMアドベントカレンダー
実のところ覚めた目で、BEMアドベントカレンダーの記事を追ってましたが(覚めていても追っているのは諦めきれないからですが)、12日目の記事 実践 めんどうくさくない BEM - ダーシマ・ヱンヂニヤリング を読み、自分が感じでいる窮屈さに対してもっと自由に積極的に解決していこうと勇気付けられた気がし、3種類の区切りを区別してクラスを書いていきたいと思うに至りました。

めでたしめでたし。

今んとこはダーシマ・ヱンヂニヤリングさんがこの記事で紹介してる

blockName-elemName_modifier

の命名規則がいいなかとと思ってます。

明日15日は thleap さんです。

Google ウェブマスターツールでサイトの対象地域を登録

Googleのウェブマスターツールでサイトの地域ターゲッティングというのを設定できるようになってる。いつの間にか。。。

http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=62399

日本国内向けのサイトでjpドメインじゃないドメインを使用してる場合、

comやnetなどのトップレベルドメイン日本国内向けのサイトだけど、me(モンテネグロ)やin(インド)を使用してる場合とか

は、地域ターゲッティングを設定した方がいいっぽいけど、そんなことしなくてもgoogleは適切に検索結果を表示してくれそうな気もする。

やることにこしたことないという類か。

サイトにFacebookページの投稿を表示する方法

すごく手間取ったのでメモしておいて、公開してなかった。

テスト用に作った https://www.facebook.com/JorokumoAtShizunami を例にして。

 

◆まずはfacebookページのIDを取得

https://graph.facebook.com/{username}

にアクセスすると、そのfacebookページについてのデータを返してくれる。IDもそこにいる。

 

例) https://graph.facebook.com/JorokumoAtShizunami

 

 

 

◆写真はアクセストークン無しで取得できる

これが私が手間取った一つの原因なんですが。ウォールに並ぶ写真や指定したアルバムの写真一覧のデータを取得するには、アクセストークンという認証コードみたいなのは不必要なんですね。

https://graph.facebook.com/{id}/photos

例) https://graph.facebook.com/247496375312768/photos

写真は写真だけでなく、写真と一緒に投稿したメッセージなども取得できます。だからもし投稿するとき常に写真を添えてたら、実質、投稿一覧を取得できるようなものです。

写真がアクセストークン無しで取得できるなら投稿もアクセストークン無しで取得できるだろうと勝手に思ったんですが取れないのです。なぜだFB!?

あるはずのない認証なし投稿取得メソッドみたいなのを探すのに時間かけてました。

ちゃんとドキュメントに書いてあります。

https://developers.facebook.com/docs/reference/api/page/

のconnectionのphotosには、no access token、postsにはany valid access token。

 

◆で投稿を取得するには

以下のようになります。

https://graph.facebook.com/{id}/posts?access_token={access_token}

アクセストークンがないと、An access token is required、アクセストークンが必要だよと言われます。

例 https://graph.facebook.com/247496375312768/posts

 

◆アクセストークンを取得するには

自分の経験の無さや英語力のなさにもよるのですが、アクセストークンの取得方法がよくわかりません。

Graph apiエキスプローラーというのがあって、そこでアクセストークンが発行されるのですが、こいつだと、ちょっと時間(二時間らしい)がたつと無効になってしまうのです。

https://developers.facebook.com/tools/explorer

テスト用のアクセストークンなんでしょう。

 

◆アプリ用のアクセストークンを取得すればいい

アクセストークンにはいくつか種類があるようなんですが、ユーザー用は二ヶ月とからしいです。それは嫌なんですけど、そもそもどうやって取ればいいかわかりません。

で、アプリ用のアクセストークンというのがあって、こいつはできることは制限されるのですが、永続的に使えるっぽいのです。制限されるといっても、facebookの公開されてるデータ(ログイン無しで閲覧できるもの)を取得する分には制限されません。

アクセストークン発行のためにアプリを作り

https://developers.facebook.com/apps

作ると発行される、APP IDというのとシークレットキーを使って

https://graph.facebook.com/oauth/access_token?client_id={APP ID}&client_secret={シークレットキー}&grant_type=client_credentials

にアクセスすると、アクセストークンをくれます。

そいつを使えば、投稿データも取得できちゃいます。

 

駄文だ!

 

CSSでランダムボタン

 

CSS Programing Advent Callendar 2012 の15日目です。

日をまたいでしまい申し訳ないです。

カレンダーには乱数と書きましたが、乱数は言い過ぎですね。CSSだけでもランダムな結果を返すボタンを作ることができます。

これを利用してCSSおみくじを作りました。

http://jsdo.it/ksk1015/wTlL

そして以下が解説用のサンプルです

http://jsdo.it/ksk1015/joOY

 

ご覧ください。

ランダムボタンというのは透明のlabelをanimationで動かして何のラベルがクリックされるかわからないという仕組みのボタンです。

ポイントは、acitve時にanimatio-play-state: pausedにして、アニメーションを一時停止しえあげることです。

animationとかで動かしてる要素のクリックは、mousedownしてからmouseupするまでにhover状態が外れてしまうと無効になってしまうからです。

ランダムボタンを最初に思い付いたときは、クリックしずらくなる問題が解決できずにしょんぼりしてました。

しかし、この辺りのことを12日目の1026さんの記事でも触れてますが、1026さんがCSSベースボールを作ったときに、同じ問題にぶつかり、xl1さんがacitve時にanimatio-play-state: pausedするという解決策を上げ、これでランダムボタンが作れるぞととてもワクワクしました。

おみくじはとても簡易なものですが、ランダム的なことを取り扱えると、作れるものがとても広がると思いますので、意欲のあるCSSプログラマーの方は是非是非、壮大なものを作ってください!

次、16日目(現在既に16日になってしまいましたが)は negic さんです。よろしくお願いします。