InstagramをAPI使ってサイトに表示したい話
今話題のハレノヒとは関係ないことはしっかりと伝えなければいけないと思い、筆をとりました。（嘘）
かれこれ200日ぐらい間が空いてしまっているというのに、1日に数件はアクセスがあるってんだから、はてなブログってすごいなぁ、としみじみ関心。
この200日の間、なんだかんだバタバタしていまして、プライベートでも個人でお商売をしている方のホームページなんかも作らせてもらったりしていた。
個人でお商売をするとなると、日々の情報発信がとてもとても大事になるようで、ホームページにはfacebookとInstagramを表示して欲しいとリクエストをもらっていた。
手始めにfacebookページプラグインとInstawidgetを使って、ぞれぞれを表示するようにしたんだけど、いざ運用が始まってみると投稿している内容がほとんど一緒。
しかも、facebookにいたっては縦長すぎる写真を掲載するものだから、プラグインで表示しているスペースでは写真1枚しか表示されないなんて現象が起きた。
それならばいっそ、Instagram APIを使っておしゃれに、フォトギャラリーっぽく見せた方が、見に来てくれた人にとっても有意義なんじゃないかと思い、今あれこれと調べている。
まだ調べ途中な感じは否めないけど、現状でのまとめ。
Instagram APIを使うにあたって、参考にさせてもらったサイトは、こちら。
このページに書かれている通り、Instagramのデベロッパー登録をして、アプリケーションの作成を進めてみると、アクセストークンの取得でまずつまずいた。
記事によるとコマンドラインで取得するようにと書かれているんだけど、コマンドプロンプトで同じ内容を入力しても、curlが認識できないとエラーが返ってくる。
コマンドプロンプト以外でのアクセストークンの取得方法を少し調べてみていたら、この記事にたどりついた。
これでURLを叩くだけで、アクセストークンが取得できるようになった。
ただ、私がアクセストークンを取得した際のURLには「&scope=public_content」が最後に付け加えられていたんだけど、どこで情報を仕入れたのか、どんな役割があるのかは不明。
https://api.instagram.com/oauth/authorize/?client_id=「CLIENT ID」&redirect_uri=「REDIRECT URI」&response_type=token&scope=public_content
こんな感じ。
アクセストークン取得できちゃったんで、もう調べませんけどね。
それで、最初の記事に載っていたサンプルのソースコードで試してみると……………表示されない…。
またまたアレコレ調べてみたところ、アプリケーションの「CLIENT STATUS」が「Sandbox Mode」となっていたら、他人の情報をひっぱってくることが出来ないらしい。
「Sandbox Users」に掲載したいIDを追加すれば、表示することも出来るみたいだけど、追加するには相手の承認も必要になるっぽい。
とりあえず依頼を受けた人にはリクエストは送っておいたけど、なかなかこういうことに疎い人なので、きっと直接声をかけないとリクエストは承認されないので、他人の表示についてはまた後日。（書かないかもしれない）
そんなこんなで右往左往したものの、とりあえずはまずは実験と割り切って、自分の情報をひっぱってみることにした。
情報をひぱってくるにあたり、ユーザーIDが必要になるようなのだけど、自分のユーザーIDであれば、アクセストークンの最初の「.（ピリオド）」前までが、ユーザーIDになるらしい。
それで、また最初の記事に載っていたサンプルのソースコードで試してみると……………表示されたっヽ(・∀・｡)ノ
これでCSSを調整してレイアウトすれば問題ないかと思いきや、画像サイズを大きくするとボケボケの写真になってしまう。
ちゃんと見てみたところ、読み込まれている画像のサイズは150px四方の小さいものだった。
これじゃ思ったようなレイアウトが出来なさそうだったので、何とかできないかと調べてみたら、instafeed.jsの公式サイトにちゃんと説明があった。
どうやら「resolution」というオプションを設定することで、画像サイズは変更することが出来るらしい。
ちなみに最小は「thumbnail」でこれがデフォルト。
最大サイズは「standard_resolution」で612px四方の画像を読み込むことが出来る。
私は612pxまでのサイズは必要ないので、「low_resolution（306px四方）」を指定することにした。
これで残りはcssの調整である程度形にすることが出来そうなぐらいまで、進めることが出来た。
ひとまず現時点でのまとめはここまで。
ブログ書くの久しぶりすぎて、スクリーンショット画像作ったりするのすっかり忘れてたけど、落ち着いたらまた少しずつ手を加えていこうかな…。
スマホのブラウザシェアって…と焦った話
四十路にして新米なんていうのもおこがましいが、スマホ対応のディレクションをはじめてまだ半月程度。
いきなり一発目の案件で考えさせられる事案が発生した。
「Androidの標準ブラウザでレイアウト崩れてますけどどうしますか？」
検証チームからこのような指摘があげられてきた。
しかもリリース直後に。
勉強不足なことこのうえないが、Androidの標準ブラウザはChromeだとズーッと思っていた。
Androidもちょっとは触らないとダメだよって神様に言われてるんだなんて気持ちと、検証中に気づいてよって気持ちが入り混じりながらも、対応を考えなくてはいけない。
とはいえ、今回の案件は既存ページの更新だったので、これまでの対応ブラウザを確認すれば、修正すべきか否かが分かるはずである。
そこで、前任者にこれまでは標準ブラウザを対象としていたか確認をしたところ、「今回の検証に含めるかどうか検証チームになんて伝えました？」と、期待とはちょっと異なる回答。
以前の対応方針を聞きたかったのだけど、いきなり私の不手際を指摘されても困惑してしまう…。
ちなみに、このレイアウト崩れは前任者が担当した案件から発生している問題だったのですが…という言葉はグッと飲み込んだ。
私としてはもともとある不具合だっただけに「標準ブラウザは検証の対象外です」の一言が欲しかっただけどなぁ…。
少々愚痴っぽくなってしまったが、検証チームとも相談した結果、レイアウト崩れが発生しているとはいえ、数pxズレてしまっているだけで、コンテンツが見れないわけではなかったので、仕様として片付けてしまった。
それにしても、今のチームはずっとスマホ関連のサイトディレクションをやっているはずなのに、ブラウザに対する意識があまりないのか、組織としてどこまでを対象にして、どこから切り捨てるのかをあまり考えていないように見受けられる。
またまた愚痴っぽくなってしまったが、このままでは、事業側から対応ブラウザについて質問が来たところで的を得た回答など出来るはずがないので、ブラウザシェアを調べてみた。
そして行き着いたのがココ。
・StatCounter Global Stats
全然知らなかったんだけど、ブラウザシェアを調べるならまずここをチェックすべき的なサイトらしい。
勉強不足なことこのうえない…。
さっそく日本のシェアを調べてみる。
「Browser Market Share」から、「Platform」で「Mobile」、「Region」は「Japan」を選択。
そして出てきた結果がコレ。
Source: StatCounter Global Stats - Browser Market Share
「Android」となっているのが標準ブラウザのことかな。
抽出時点のシェアでAndroidは1.54%。
開発・サポートが終了していることを考えると、古い機種を使用している人がわずかに残っている程度なのかな。
担当サービスのユーザーはネットリテラシーが高いため、今回発生した不具合に遭遇する割合は1%もいないと考えられる。
結果、今回の標準ブラウザを対象外とした判断は間違っていなかったのではないかと。
ただ、自社のサービスではネットリテラシーがあまり高くないユーザー層をターゲットとしているものもあるため、今回の判断が全てのサービスに適応できるかというと、ちょっと足を止めて考えないといけないのかもしれない。
…とはいえ1.54%ですからねぇ…。
Chrome拡張機能って便利だと今さら気づいた話
colisさんでGoogleのデベロッパーツールを紹介する記事を見て、Chromeが便利だったことを思い出した。（今更）
いかんせん先月まで担当していたサービスがIE推奨だったため、Chromeなんてのは表示確認するぐらいで、ほとんど使う機会はなかった。
さりとて今月からはそのIEしばりも無くなり、さらにスマートフォン対応も必要になってくるので、Chromeに乗り換えるまたとないチャンス。
ということで、この機会に整理・追加した拡張機能をまとめておきたいと思います。
1.Window Resizer
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=ja
あらかじめ設定されているサイズにウィンドウサイズを変更してくれる便利ツール。
レスポンシブデザインの確認のためというのもあるんだけど、キャプチャを取るときに毎回サイズが変わるのが気になっていたので、ウィンドウサイズを程よく変更してくれる拡張機能を探して行き着いた。
ただ、タブを開きすぎていると、幅がうまくリサイズされないことがあるようなので、注意が必要。
2.Sizzy
https://chrome.google.com/webstore/detail/sizzy/nfhlbmjiiogoelaflfclodlkncbdiefo?hl=ja
いくつかのデザイン関連の記事にもまとめられていたので、これはあらかじめ追加していた拡張機能。
レスポンシブデザインの確認にはこれがあればひとまず充分なのではないかな。
実際の業務が始まってみないと分からんけど。
Chromeの最新バージョンではデベロッパーツールを使うとフルページのキャプチャが取れるようになったので、もしかしたら使わなくなるかな…と思ったけど、やっぱり必要っぽい。
デベロッパーツール開いて、Ctrl+Shift+pでcapって入力するっていうのはやっぱり手間。
ツークリックでキャプチャが取れるFireShotの方が断然便利に感じる。
4.Alt & Meta Viewer
https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl?hl=ja
実際に表示されているテキストはちゃんと校正しても、じつはaltに誤植が潜んでいて…なんてことをたまにやらかしていたので、前々から入れていた拡張機能。
校正苦手。
5.Font Face Ninja
https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh?hl=ja
これからWEBフォントがたくさん使われるようになると、どんなフォントなのかソースコードを見ないでも分かれば便利だなと思って入れた拡張機能。
今のところ全く使ってないけど、きっと近い将来役に立つと信じてる。
6.Black Menu for Google
https://chrome.google.com/webstore/detail/black-menu-for-google/eignhdfgaldabilaaegmdfbajngjmoke?hl=ja
これは言わずも知れた感がありますが、Googleの各サービスのサマリーが見れて、さらにショートカットにもなっちゃう拡張機能。
これを入れて気づいたのは、思ったよりGoogleの各サービスを使っていなかったってこと。
でもまだアンインストールはしない予定。
あ、それとわざわざ紹介するほどじゃないですが、Onenoteの拡張機能は入れています。
他にもきっとまだ便利な拡張機能はたくさんあるんだろうけど、インストールしすぎても使い切れない不器用な子（40歳）だから、ここら辺でしばらく様子を見ようと思います。
ガントチャートを簡単に作りたい話
この6月から久しぶりにWEBディレクターとして異動になった。
今までは自分の担当サービスがあったので、業務量もコントロールしやすかったが、これからはそうも言ってられない。
しかも、今まではだいたいの案件が自己完結できていたが、これからは制作部門へ発注することになる。
これまで以上にタスクとスケジュールの管理が大切になってくる。
業務を進める上でガントチャートをタダで簡単に作れたら便利なんじゃないかと探してみると、やっぱりいろいろありますね。
いくつか試してみたので、備忘録的に感想をまとめておきます。
1.Elegantt
https://elegantt.com/
Chromeの拡張機能で、Trelloというタスク管理サービスをベースにガントチャートを作れるもの。
触り始めはとても使いやすそうだと感じていたけど、僕の使い方が悪かったのか、拡張機能の不具合なのか分からないけど、途中からスケジュールをうまく登録出来なくなってしまった。
何度か解決を試みたものの、やっぱりダメで、このツールは見送ることに。
2.Brabio!
http://brabio.jp/
Eleganttがうまく使えなかったのは、英語が理解できなかったからに違いないと、次に手をつけたサービスが「Brabio!」。
日本のサービスだし、5人までならタダで使えるということだったので、試してみたけど、速攻解約した。
ただ、なんで解約したか全然記憶がない…。
今、サービスのページを見直してみると、悪くなさそうなんだけど…とは思うけど、何か納得できないことがあったんだと思う。
3.Instagantt
https://instagantt.com/
最終的にたどり着いたのは、「Instagantt」というサービス。
これは「Asana」というタスク管理サービスと連携して、ガントチャートを作ってくれるもの。
「Elegantt」と同じような臭いを感じたけれど、これは特に不具合もなく、プロジェクトのスケジュール管理も問題なく出来そう。
スプレッドシートの書き出しにも対応しているので、プロジェクト関係者にもスケジュールを共有しやすい。
ただ、書き出したスプレッドシートでは曜日が分かりにくかったり、不要な情報があったりしたので、書き出したスプレッドシートの必要な部分だけをコピペすればスケジュール表が出来るエクセルは用意しておいた。
はじめからそれで管理すればよいじゃんって話は聞こえません。
総じて「Instagantt」の感触がよいのだけど、欲を言えばタスク・サブタスクにファイル添付が出来るようになればよいのになと思う。
JSやjQueryの勉強したくてProgateをはじめた話
フロントエンドエンジニアって響きが素敵すぎて、かねてからJavascriptやjQueryは華麗に扱えるようになりたいなと思っていた。
そんなある日、こんな記事が目に飛び込んできた。
東大生が作ったプログラミング学習サービスなんていったら、学歴コンプレックスの塊である私にとっては、まぶしいばかり。
これは試してみるしかないでしょうということで、さっそくProgateに登録。
まずは無料で出来る範囲で試してみると、説明スライドで確認してから、手を動かしてコードが書けるので、勉強した感があって非常に良い感じ。
ただ、無料で出来るレッスンは限られており、ホント触りのところまでしか出来ない。
むむむむ…。似たようなサービスで「CodeStudy」なんてのもあったから、そっちに鞍替えしようかなと探してみたけど、どうやらサービス終了してしまっていたみたい。
それならばしょうがない･･･ということで、980円/月のプランに申し込み。
仮に2ヶ月続けたとしても1960円だから、そこら辺の参考書を買うのと変わらないでしょう。
全てのレッスンが開放されたところでレッスンを進めてみると…隙間時間を使って1～2日でJavascriptとjQueryの全レッスンが終わってしまった。
レッスンで「上級編」となっているものが、実際のところ初級の中で難しい方ぐらいの位置づけなイメージ。
他にもJavaやらSwiftやらのレッスンもあるにはあるんだけどJavascriptとjQueryが中途半端な状態で他の言語に手を出す気にもならず。
とはいえ、プログラミング学習したいなと思っていたけど、重い腰をなかなか上げれないという私のような人が、手始めに触ってみるには良い方法なのかなとも思う。
きっかけ作りで980円/月を安いと思うか、高いと思うかはその人次第。
私は1ヶ月だけなら有りな気がしました。
「Adobe XD Meeting #03」に行ってきた話
昨年末にwindows10版（β）も公開されて、注目が高まっている気がしている「Adobe XD」。
「Adobe XD」についてほとんど知っていることはないけれど、この波には乗っておきたいところ。
というわけで、「Adobe XD Meeting #03」という勉強会に参加してきた。
詳しい内容は、参加者の皆さんのtweetをtogetterにまとめていただけているので、こちらを見ていただくのが手っ取り早い。
以下、私の感想。
「Adobe XD」自体がまだβ版ということもあって、皆さん手探りで活用方法を模索している段階なのかなんだなと思った。
そして、やはりまだ改善点も多く残されているようで、中でも「画像書き出し機能強化」と「Adobe他社製品との連携強化」の2点は特に多く要望が出てた。
もちろん改善点ばかりではなく、「Adobe XD」のメリットも挙げられていた。
特に「動作の軽さ」と「操作の簡単さ」は皆さんが口をそろえて絶賛していた。
正直、そんなに簡単っていうんだったら、ちょっと使ってみようかなと思えたぐらい。
とはいえ、会社支給のPCはwindows7なんだよね…。
「Sublime text 3」をもう少し調べてみた話
前回からの続き。
「Sublime text 3」をインストールしたは良いものの、イマイチ使いこなしきれなかったので、良い使い方をしている人はいないかと検索したらLIGさんのブログに行き着いた。
記事の投稿日が2012年になっているあたり、いかに私が取り残されてきたかを物語っているようで心が痛い。
そして投稿された当時にこの記事を読んだ記憶がうっすらあるんだけどなー。
このページで紹介してくれいるいろいろな機能を触ってみると、やっぱり「Sublime text 3」便利かもと思えてくる。
中でもショートカットキーを覚えておくとかなりはかどりそうだったので、チートシートを作って公開してくれている方もいたのだけど、まだ全体を網羅するにはちょっと早いと思ったので、ひとまず以下のページぐらいのショートカットは覚えておこうかなと思う。
そして、まだインストールしていなかったプラグインをいくつか追加した。
なかでも便利だなと感じたのがEMMET。
恥ずかしながらEMMETのこと自体知らなかったので、調べて以下のページで概要を確認した。
これ、めちゃくちゃ便利。
今までHTML・CSSを生真面目にコーディングしていたのが馬鹿らしくなった。
無知って本当に怖い。
今はあまりコーディングする機会がないのだけど、これからHTML・CSSを書くときはEMMETを積極的に活用したいと思った。
