「たった1日でサイトをつくる」 月10本ウェブサイトをリリースしているエンジニアが教えるウェブサイトの作り方


ブログもウェブサイトも考え方は一緒。悩まず作れ

こんにちわ、web父さんです。

突然ですが、あなたはwebサイトを作ったことがありますか?

私はウェブサイトを月に10本程度、作っている時期がありました。理由はいくつかあるのですが、 一番は「ウェブサイトづくりの障壁をもっと低くしたい」と想いでした。

ブログなら割と手軽にかけるのでなぜウェブサイトは手軽に作れないんだろうと思うときがあり、それは障壁がブログよりも高いことが原因であることに気づきました。

障壁というのは、技術的なスキルやアイディアなのですが、ひとりハッカーソンのおかげで技術的スキル面の障壁は下げれたと思います。あとはアイディアなのですが、

実はアイディアって誰もが持っているもので「面白そうだけど、⚪︎⚪︎がないから難しいかも」という気持ちがやる気を下げている理由なのだと理解しました。

私はインターネットサービスの強みのひとつに「作り直し」ができることが大きいと思っています。有形サービス、例えば農業だと作り直しが難しいコンテンツです。トマトの種を蒔いてからイチゴを育てたいというものは難しいですし、事前準備がとても大切です。逆にインターネットのような無形サービスはいつでも作り直しが可能です。β版でリリースしてユーザのニーズに合わせて事業プランの変更もできないこともありません。

今回はあまり考え込まずに、1日で「夏フェス」サイトを作ったときの手順や考え方についてご説明します。

 夏フェス動画まとめサイト – 夏フェスTube 

夏フェスTube

 

5W1Hで考える

コンテンツを提供していく上で、ゴールデンサークルの考え方は非常便利です。イケダハヤトさんの著書でも「なぜ」「何を」「だれが」「どうやって」「いつ」を明確化してブログを書くように推奨しています。

今回、夏フェスを動画をサイトをつくる上で 5W1H で分けていきます。

 

「Why(なぜ)」夏フェスサイトをつくるのか?

 

夏フェスで出演アーティストを探すのは面倒くさい。

夏フェスを大きく分けると「ROKIN’ JAPAN」「RUJI ROCK」 「SUMMER SONIC」があります。それぞれ別々にサイトがあり、出演アーティストやタイムテーブルを確認するには、それぞれサイトにアクセスをして確認する必要があります。

また名前でピンとこない場合、出演アーティスト名をYouTubeで確認したりしませんか?

通年参加している方であれば「フェス押し」、つまり出演者関係なく参加するという方もいらっしゃいますが、大概は「出演アーティスト」によって、行きたいフェスを決めます。ただ3大フェス共に、今年2015年にタイムスケジュールは公開されていますが、順々にアーティストが増えるので各自チェックする必要があります。

 

「Who(だれ)」に向けてウェブサイトをつくるのか?

 

夏フェスに行きたいもしくは興味がある人に向けてつくります。特定のフェス、例えばサマソニのタイムテーブルを知りたい人は、「サマソニ タイムテーブル」と検索しますが、「夏フェス タイムテーブル」と検索してもヒットしません。これは Google がサマソニのタイムテーブルは存在するけど、夏フェスのタイムテーブルはネット上に存在しないことを意味しています。

けど「夏フェスに行きたいけど、アーティストで決める!」って思っている人は多いはず。そんな人向けに提供していきます。

  

「What(何を)」夏フェス出演アーティストとYouTubeをまとめたい

 

各サイトでバラバラになっている出演情報とYouTube情報を一つにまとめることで「夏フェスを選ぶ上でのストレスを解消する」ことがサイトが提供する価値になります。

面倒くさがり屋な私に向けのサービスですが、googleサジェストでみると、同じように思う方もいるようです。

 

「Howto(どうやって)」YouTube APIとBootstrapを使って倍速で作業する

 

使う技術・知識

  • HTML / CSS / Jquery / PHP
  • データベース
  • API(Youtube API / iturnes)
  • SSH
  • スクレイプ
  • クーロン

 

使うツール

  • ワイヤーフレーム CACOO
  • レンタルサーバー さくらインターネット
  • CMS WordPress
  • テンプレート Bootstrap

 

CACOO

 cacoo-300x155

ワイヤーフレームといういわれるサイト構成をCACOOというツールで作成しています。ウェブサイトでよく使う構成もテンプレートとして用意しているので、サイトを作るまえは簡単にワイヤフレームをつくってから作業に入ります。

さくらインターネット

 レンタルサーバー|さくらインターネット

普段利用しているレンタルサーバーとして、さくらインターネットを採用しました。またさくらインターネットで運用しているドメインを一つ借りてサブドメインで運用しています。

Bootstrap

 Bootstrap

サイト実装には、Bootstrapというtwitterが提供しているテンプレートを利用して作業を短縮して作成しています。WordPressはよく使っているCMSなのでそちらを選びました。WordPressにもデータベースが使われていますが、さくらインターネットの簡単WordPressインストール機能を使えば、深い知識がなくても1クリックでサイトを作成することができます。

 

API (YouTube API / itunes API)

 YouTube

アーティスト情報とYouTube情報と紐付けるために利用しています。YouTube API を利用して人気のプレイリストを取得してアーティストページで流すようにしています。itunes API はアーティストの画像取得で使っています。

スクレイプ

馴染みのない言葉かもしれませんが、クローラーといえば聞き覚えがある方もいらっしゃる方もいるかもしれません。googleなどの検索エンジンはクローラーといわれるシステムであなたのブログやサイトにアクセスしてきます。サイト情報をタイトルタグやキーワード、h1タグなどの解析してデータベースに格納しているのですが、このhtml情報から必要な情報を取得する方法を「スクレイプ」と呼んでいます。

今回は、「ROKIN’ JAPAN」「RUJI ROCK」 「SUMMER SONIC」の3つのフェスを対象にスクレイプをかけてアーティスト情報を取得するようなプラグラムを書いています。ですので、わざわざ毎日サイトをみて新着アーティストをチェックしなくてもこのプログラムを時間設定していクーロンにかけておけば自動でデータベースに格納していくれるようになれるような仕組みになっています。

 

今回は具体的にどう使うはあえて説明しません。

ざっと説明すると、こんな感じです。

人によってWordPressをMovable Typeの方が得意という方はそちらを利用した方が良いですし、アーティストの取得やYouTubeの紐付けも手動で取る方が早いのであれば効率の良いものを選べば良いと思っています。

よくプログラミング言語はどの言語がいいですかという質問をもらいますが、これも一緒でPHPでもRubyでも自分が使い易いモノを利用すればよいのです。エディタもAtom や Sublime Text が人気ですが、私は秀丸をずっと使っています。

極論ですが、価値を提供するためにブログの方が伝わり易いのであればブログでも良いんです。プログラミングで書いた方が汎用性もあり自動で取得できるので私はプログラミングを選んでいます。

 

「When(いつ)」1日で夏フェスサイトをつくる

事前準備 企画案 / ワイヤーフレーム 3h

各種設定 レンタルサーバー / ドメイン設定 0.5h

サイト作成  5h

スクレイプ  2h

—-

合計 10h

 

時間的に少し働きすぎましたね。。

まとめ

冒頭で比較したブログとの大きな違いは自動でコンテンツを構築することができることがメリットだと思っています。1年前に作成したサイトがほとんど手をいれていれずに月2万人で600,000人が訪問していただき、そのほとんどが毎日訪問してくれています。トラフィック先は検索エンジンが大半ですが、知り合いが紹介してくれてソーシャル上から訪問してくれることもあります。ブログもある程度記事量があれば、自動的に訪問してくれる仕組みは作れるかもしれませんが、リリース当初から10万件のページを作成するのは難しいです。

この結果も1年前に思いついてサービスを作ったからなのです。そのときに思いとどまってサイトづくりのための情報を集めていたら作れなかったでしょう。当初Bootstrapも使ったこともありませんし、スクレイプという技術も取得していませんでした。

マルコム・グラドウェル氏の著書で「どんな技術でも習得するには1万時間 必要である」という提唱していますが、おそらくテクノロジーの進化で習得できる時間は短縮されているでしょう。

プログラムを学ぶのであれば、ドットインストール や スクー で動画をみれば今まで本やネットを取得できなかった情報がパッケージ化して情報を得ることができます。

最初の一歩が一番力が必要です。自転車も漕ぎ出す前はしんどいですが、漕ぎ始めたら案外楽なものです。