初めて1人でOkinawaGramというウェブサービスを作ったので色々調べた事とか書いてみる。

タイトルの通りに初めて1人でウェブサービスを作ってみました。ウェブサービスって言っても凄く簡単なものです。iPhoneアプリを初めて作った時もそうなのですが、最初は簡単なアプリから作り始めました。

OkinawaGram – Instagramから沖縄タグの付いた写真を集めてみました。

簡単なアプリケーションでもやっぱり完成すると嬉しいです。一回出来るようになれば大きな自信になるし、２個目からはもっと作りこんだアプリを制作すれば良いと思うのです。最初から複雑な処理があるアプリケーションに挑戦して頓挫するのが一番辛いので・・・

今回はOkinawaGramというサービスを作りました。Instagramから”沖縄”のタグが付いた直近の写真20枚を取得してOkinawaGramに表示する本当にシンプルなものです。

初めてのサービスだったので1週間くらいで出来たら良いなって思ってましたが、作ってみたら意外に簡単で5時間くらいで完成しました。

短期間で出来た理由はHTML,CSSは元々わかってた事。iPhoneアプリFasterous,NozbeInboxを制作した時にAPIを利用したのでAPIに親しみがあった。ウェブサービス自体がシンプルな事。

(参考:個人でWebサービスを超高速でつくる人たちの作り方を考察。 │ モノづくりブログ株式会社8bitのスタッフブログです)

HTMLとかCSSがわからない人はまずYouTubeで基本を覚えるのがオススメです。高価だけどAdobeから出てるDreamweaverっていうソフト使うと本当に簡単にウェブページ制作が出来る。
Dreamweaverもチュートリアル動画がYouTubeで沢山観れる。

Adobe Creative Suite 5.5 Web Premium Macintosh版アップグレード版「A」(CS4からのアップグレード)
	アドビシステムズ 2011-05-20 売り上げランキング : 655 Amazonで詳しく見る by G-Tools

InstagramのAPIを読む。→Instagram

InstagramのAPIを利用するのには申請が必要なのでアプリの名前とURLを記入してCLIENT IDとCLIENT SECRETを取得します。僕の場合はInstagramからTagが取得できれば良いのでtagの部分のドキュメントを読みます。

ドキュメントを読んだら理解できたのですぐさまHTMLとCSSの制作を開始。

前述の通りDreamweaverでサクっとデザインして作りました。業務では使う事ないCSS3を使いました。なので~~Damnass~~IE6とかモダンブラウザ以外の動作は保証できません。
写真にマウスオーバーすると写真が拡大します。写真をクリックするとInstrgamのページにリンクします。

まずはInstagramにログインする→沖縄のタグの付いた写真をJSON形式で取得。

あとはInstgramから沖縄のタグが付いた写真20枚を取得してunoderedlistにfor loopでぶち込んで表示させているだけです。コードも10行もありません。(It’s that simple.)

あとはsocialボタンの実装。FacebookとかTwitterとかのボタンですね。

この辺の細かい仕様書は次のブログ記事で書きます。

APIを利用するのは本当にオススメです。数行のコードで面白い事ができます。スクラッチからウェブサービスを作るのは初心者には中々難しいのでまずは簡単なウェブサービスから作り始めてスキルアップしていくのが良いと思う。

ということでInstgramに#沖縄っていうタグを付けるとOkinawaGramに写真が表示されるので沖縄の方もそうでない方も沢山Instagramに写真を投稿してください。僕が沖縄の写真を見たいがために作ったアプリケーションなのでもっとニヤニヤしたいのです。よろしくお願いします。

OkinawaGram – Instagramから沖縄タグの付いた写真を集めてみました。