インディーゲームの種火: むきむきINDIE STREAM　第１回　「登録～ユーザーページ作成（サンプルコード付き）」

公式サイト：Indie Stream -Discover Indie Game !-
公式解説放送：Indie U-Stream 第２５回　「Indie Streamの使い方」

ユーザーページのサンプルコードを公開します

最近知り合いのゲーム開発者からこんな話を聞いた。

「INDIE STREAMのユーザーページを作る時間が無い」
「サイトがオシャレ過ぎて、うちのゲームを登録するのを憚れる」

確かに筆者も気合の入ったユーザーページを作るのに多くの時間とエネルギーを使ったよ。じゃあ解説とサンプルコードを公開することで、皆にラクしてもらおう。そしてゲーム開発に専念してくれ！

貧弱な僕もINDIE STREAMでむきむきに

これからINDIE STREAMに関する記事を連載していく。
タイトルは「むきむき INDIE STREAM」。
第１回目のこの記事では登録からユーザーページ作成について解説する。
(タイトルの由来を知りたい？ならU-Stream放送の01:06:00、01:11:00あたりを聴いてくれ)

むきむきINDIE STREAM　第１回「登録～ユーザーページ作成（サンプルコード付き）」
目次：

はじめに　そもそもINDIE STREAMって何なのさ？
登録編
ユーザーページ　本文作成編
ユーザーページ　スライドショー作成編
宣伝編
さいごに

はじめに　そもそもINDIE STREAMって何なのさ？

INDIE STREAM概要 (2013年9月22日のプレゼン資料より引用)

INDIE STREAMを一言で説明すると「ゲーム開発者を中心に横つながりして酒飲んで仲良くなってお互いのネットワークを使おうぜ。って場所。」である(公式FAQより引用)。

具体的に出来ることは以下の通り(招待メールより引用）。

自分の団体の専用ページが持てる
プレスキットを保存して参加者と共有できる
フォーラムでいろいろ相談できる

興味を持たれた方は上の動画で
INDIE STREAM発起人　東江亮（Nyamyam）からのメッセージをご覧ください
いますぐご登録なさる >>

さらに詳しく知りたい方は、ちょっと長いけど以下のU-Stream放送を聴いてほしい。
Indie U-Stream 第２５回　「Indie Streamの使い方」

登録編

登録の前にまずFAQを読もう

まだ登録していない人は最初にFAQを読もう。必要な情報が揃っている。
次にREGISTER画面で申請する。
申請して暫くするとメールで下記の事を問い合わせてくるので返信する。

登録団体名(英語名もあればお願いします)
登録団体WEBサイト
登録用メールアドレス(プレスキットの保管にDropboxを使いますので同じメールアドレスのほうが便利です)
Dropbox用メールアドレス
Wordpressの利用経験の有無

返信して暫くすると登録完了メールが届き、いよいよユーザーページの作成だ。

ユーザーページ　本文作成編

ユーザーページの本文

サンプルコードここから

インディーゲームの種火は、BitSummit等で出会った素敵なインディーゲームを応援するサイトです。
2014年6月26日現在で、26個のゲームの特集記事を掲載しています。またOcufesInOsakaや2Dゲームハッカソン、M3等のイベントレポートも書いております。英語に翻訳したブログも開始しました。

日本語版URL <a href="http://pilot-burner.blogspot.jp/">http://pilot-burner.blogspot.jp/</a>
英語版URL <a href="http://pilotburner.wordpress.com/">http://pilotburner.wordpress.com/</a>

このようなプレイ動画や画像を使って、ゲームを紹介しています。

<a href="http://pilot-burner.blogspot.jp/2014/03/021-fallendom.html" title="作品021. アクションと戦術でマップを踏破せよ「Fallendom(フォールンダム)」">作品021. アクションと戦術でマップを踏破せよ「Fallendom(フォールンダム) 」</a>
<iframe frameborder="0" height="315" src="//www.youtube-nocookie.com/embed/3sYp9vKAFak?rel=0" width="420"></iframe>

<a href="http://pilot-burner.blogspot.jp/2014/03/blog-post_9.html" title="作品001. こいつは手強いパズル「サイコロンブス」">作品001. こいつは手強いパズル「サイコロンブス」</a>
<iframe frameborder="0" height="320" src="https://vine.co/v/MiXDOEe0rZi/embed/simple" width="320"></iframe>

最新５件の記事
[RSSImport display="5" feedurl="http://pilot-burner.blogspot.jp/feeds/posts/default?alt=rss" date="true"]

サンプルコードここまで

ユーザーページの本文作成について説明する。
とは言ってもマニュアルに詳しく書かれているので問題ないだろう。
Forumの「Indie Stream 全般 › マイページ編集のコツ」の掲示板にも有用な情報が載っている。分からなければ質問しても良いだろう(筆者も出来る限りサポートする）。

ちなみに、本文にYouTubeやVineの動画を載せる方法はいくつかあるが、筆者は下記の埋め込みコードを取得する方法を使っている。ご参考まで。

YouTube動画の埋め込みコードの取得方法

Vine動画の埋め込みコード取得方法

ユーザーページ作成　スライドショー編

ユーザーページのスライドショー

サンプルコードここから

<ul class="bxslider-auto">
<li><a href="http://pilot-burner.blogspot.jp/2014/05/026-save-earth-co-op.html"><img src="//indie-stream.net/wp-content/uploads/2014/05/SAVE-EARTH-CO-OP_JA.png" /></a></li>
<li><a href="http://pilot-burner.blogspot.jp/2014/05/025-atonoato.html"><img src="//indie-stream.net/wp-content/uploads/2014/05/Atonoato_JA.png" /></a></li>
<li><a href="http://pilot-burner.blogspot.jp/2014/05/024-breaks-lp.html"><img src="//indie-stream.net/wp-content/uploads/2014/05/BreaksLP_JA.png" /></a></li>
<li><a href="http://pilot-burner.blogspot.jp/2014/05/miyatarity-rashorizm.html"><img src="//indie-stream.net/wp-content/uploads/2014/05/MiyatarityAndRashorizm_JA.png" /></a></li>
<li><a href="http://pilot-burner.blogspot.jp/2014/05/023-kirakira-star-night.html"><img src="//indie-stream.net/wp-content/uploads/2014/05/KiraKiraStarNight_JA.png" /></a></li>
<li><a href="http://pilot-burner.blogspot.jp/2014/05/014-colorful-mine.html"><img src="//indie-stream.net/wp-content/uploads/2014/05/ColorfulMine_JA.png" /></a></li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="//indie-stream.net/wp-content/uploads/2014/05/SAVE-EARTH-CO-OP_THUMB.png" /></a>
<a data-slide-index="1" href=""><img src="//indie-stream.net/wp-content/uploads/2014/05/Atonoato_THUMB.png" /></a>
<a data-slide-index="2" href=""><img src="//indie-stream.net/wp-content/uploads/2014/05/BreaksLP_THUMB.png" /></a>
<a data-slide-index="3" href=""><img src="//indie-stream.net/wp-content/uploads/2014/05/MiyatarityAndRashorizm_THUMB.png" /></a>
<a data-slide-index="4" href=""><img src="//indie-stream.net/wp-content/uploads/2014/05/KirakiraStarNight_THUMB.png" /></a>
<a data-slide-index="5" href=""><img src="//indie-stream.net/wp-content/uploads/2014/05/ColorfulMine_THUMB.png" /></a>
</div>

サンプルコードここまで

スライドショーの作り方もマニュアルに詳しく書かれているが、少々難しいため補足する。

スライドショーには画像か動画(YouTube, Vimeo等)を載せることが出来る(最大サイズ　横930×縦360)
サムネイルは８個まで。画像の最大サイズは　横93×縦52。
スライドショーの画像にAタグを付けることでリンクできる。
時間経過でスライドさせたい場合、ULタグをclass="bxslider"をclass="bxslider-auto"に変更する。動画を再生していても停止しないので注意。

ちなみに筆者はスライドショー画像を、フリーソフトPixiaで下記のように作成している。ご参考まで。

筆者なりのスライドショー画像作成方法(Pixia使用)

宣伝編

Facebook. の INDIE STREAMコミュニティページ　メンバーに注目

苦労してユーザーページを作ったよ！これでむきむきになれる…わけではない。黙っていてもユーザーはゲームの事を知らないままなので、新しい武器を使って宣伝しよう。

まずFacebook.のINDIE STREAMコミュニティに投稿するのがおすすめ。仲間内で宣伝してどーすんのと思うなかれ。メディアの人結構いるんですよ(詳しくはメンバーを参照のこと)。
Twitterで宣伝するのも有効。筆者はFacebook.とTwitterでブログの宣伝を行っているが、Twitter経由のアクセスの方が多い(フォロワー数とかの要因もあるけどね)。公式ハッシュタグは#indiestream
でも一番有効なのはイベントや飲み会で人と会い、友達(or知り合いorライバル）になること

さいごに

2013年9月22日 INDIE STREAMの会場風景

ここからは解説記事ではなく筆者の独白になる。

筆者はこの記事を書いていて、2013年9月22日に行われたINDIE STREAMの決起集会(筆者はこう呼んでいる)の凄まじい熱気を思い出した。
ちょうど東京ゲームショウ2013にてインディーズゲームフェスが初めて開催された日の夜である。この写真を撮影している方向に、凄い人数のインディーゲーム開発者やメディアが集まったのだ(ビールと食事があっという間に無くなった)。

この会場でINDIE STREAMの発表を聞いた時は震えた。昔からフリーゲームや同人ゲームで遊んでいたのだが、「なんでこんな面白いゲームを皆遊ばないのだろう」と悔しがっていた。そしたらインディーゲームを広めようとしている人たちがいたのだから。

で、この想いがさらに爆発したのがBitSummitに参加した後である。BitSummitで出会った面白いゲームが、皆に遊ばれていないのが悔しくてたまらなかった。これがブログを始めたきっかけである。

長い話になりましたが一言で説明すると、
インディーゲームの種火はINDIE STREAMとインディーゲーム開発者を応援します。

インディーゲームの種火

ページ

2014年6月14日土曜日