はじめに
タイトルの通りに初めて1人でウェブサービスを作ってみました。ウェブサービスって言っても凄く簡単なものです。iPhoneアプリを初めて作った時もそうなのですが、最初は簡単なアプリから作り始めました。
OkinawaGram – Instagramから沖縄タグの付いた写真を集めてみました。
(参考:C言語すら知らなかった私が2ヶ月でiPhoneアプリをリリースするまでにやった事。 | Last Day. jp)
簡単なアプリケーションでもやっぱり完成すると嬉しいです。一回出来るようになれば大きな自信になるし、2個目からはもっと作りこんだアプリを制作すれば良いと思うのです。最初から複雑な処理があるアプリケーションに挑戦して頓挫するのが一番辛いので・・・
今回はOkinawaGramというサービスを作りました。Instagramから”沖縄”のタグが付いた直近の写真20枚を取得してOkinawaGramに表示する本当にシンプルなものです。
(参考:5分でわかる Instagram の始め方 | WWW WATCH)
制作期間について
初めてのサービスだったので1週間くらいで出来たら良いなって思ってましたが、作ってみたら意外に簡単で5時間くらいで完成しました。
短期間で出来た理由はHTML,CSSは元々わかってた事。iPhoneアプリFasterous,NozbeInboxを制作した時にAPIを利用したのでAPIに親しみがあった。ウェブサービス自体がシンプルな事。
(参考:個人でWebサービスを超高速でつくる人たちの作り方を考察。 │ モノづくりブログ 株式会社8bitのスタッフブログです)
HTML, CSSについて
HTMLとかCSSがわからない人はまずYouTubeで基本を覚えるのがオススメです。高価だけどAdobeから出てるDreamweaverっていうソフト使うと本当に簡単にウェブページ制作が出来る。
Dreamweaverもチュートリアル動画がYouTubeで沢山観れる。
Adobe Creative Suite 5.5 Web Premium Macintosh版 アップグレード版「A」(CS4からのアップグレード) | |
![]() | アドビシステムズ 2011-05-20 売り上げランキング : 655 by G-Tools |
とりあえずやった事。
InstagramのAPIを読む。→Instagram
InstagramのAPIを利用するのには申請が必要なのでアプリの名前とURLを記入してCLIENT IDとCLIENT SECRETを取得します。僕の場合はInstagramからTagが取得できれば良いのでtagの部分のドキュメントを読みます。
ドキュメントを読んだら理解できたのですぐさまHTMLとCSSの制作を開始。
前述の通りDreamweaverでサクっとデザインして作りました。業務では使う事ないCSS3を使いました。なのでDamnassIE6とかモダンブラウザ以外の動作は保証できません。
写真にマウスオーバーすると写真が拡大します。写真をクリックするとInstrgamのページにリンクします。
まずはInstagramにログインする→沖縄のタグの付いた写真をJSON形式で取得。
あとはInstgramから沖縄のタグが付いた写真20枚を取得してunoderedlistにfor loopでぶち込んで表示させているだけです。コードも10行もありません。(It’s that simple.)
あとはsocialボタンの実装。FacebookとかTwitterとかのボタンですね。
この辺の細かい仕様書は次のブログ記事で書きます。
自分でウェブサービスを作りたいと思ってる人へ
APIを利用するのは本当にオススメです。数行のコードで面白い事ができます。スクラッチからウェブサービスを作るのは初心者には中々難しいのでまずは簡単なウェブサービスから作り始めてスキルアップしていくのが良いと思う。
おわりに
ということでInstgramに#沖縄 っていうタグを付けるとOkinawaGramに写真が表示されるので沖縄の方もそうでない方も沢山Instagramに写真を投稿してください。僕が沖縄の写真を見たいがために作ったアプリケーションなのでもっとニヤニヤしたいのです。よろしくお願いします。
OkinawaGram – Instagramから沖縄タグの付いた写真を集めてみました。
コメント
[…] […]
[…] […]