かくして、地図アプリがひとまず完成しました。

ここでまとめとして、アプリ/サービスをゼロから企画・制作することに目を向けて、今後のモチベーションを上げていただきたいと思います。

 

このページで説明すること

4つの企画方針

(1)現在の技術で何が可能かを考える

(2)現実生活がこうなれば便利だと考える

(3)笑いに走る

(4)ビジュアルに走る

 

今回のアプリ作成の動機は「APIが分かり始めてきたから、GeoLocaitonAPIとGoogleMapsAPIを使ってみよう」というところから始まっています。

そして、大きな方向性は決めずに、機能を少しずつ足してきました。

本来アプリ等を作成するには、大きな方向性が必要です。それが「企画」であり、利用者の「ニーズ」であり、開発者から利用者への「提案」です。

 

企画の考え方

まず、アプリ/サービス開発のプロセスは大きく2種類あります。

(1)現在の技術で何が可能かを考え、それを形にする(開発者視点の企画)

(2)現実生活がこうなれば便利だと考えてから、どういう実装で可能になるかを調べて、それを形にする(ユーザー視点の企画)

 

1. 現在の技術で何が可能かを考え、それを形にする(開発者視点の企画)

1の場合は、技術的に可能な範囲からスタートします。ですから、モチベーションさえあれば完成形には到達します。今すでに存在するアプリ/サービスは、可能な技術によって成立していますから、自ずとそれらを参考にすることになります。また、APIドキュメントなどを読み解いて、実現できる機能を考えることもあります。この場合、新しいAPIがリリースされたとか、KINECTのような新しいが出たといったニュースに触れていく必要があります(情報収集能力)。

ただし、この方針で本当にユーザーが喜んでくれるものが完成するかは別問題です。ユーザーにあまり求められていないものが出来あがる恐れもあるのです。

ここでいう「現在の技術」とは、自分のスキルのことを指すと同時に、世界の先端技術レベルでどこまで可能かということでもあります。

自分のスキルに関しては、何に言い訳すること無く、どんどん磨いていけばよいのです。

しかし、どうやったって現在の文明には到達できないことも世の中にはあります。スペースシャトル開発に巨額の予算を投じても、科学技術レベルが未到達の領域、特に数学が未だ解明できていない問題というのが壁になっています。

 

2. 現実生活がこうなれば便利だと考えてから、どういう実装で可能になるかを調べて、それを形にする(ユーザー視点の企画)

2の場合は、現実世界がどうなれば便利か・面白いかという着想からスタートします。ですので、この方針で作られたアプリ/サービスは、ユーザーのニーズを満たしていると評価され歓迎されるでしょう。

お笑い芸人なんかが、テレビで世の中の不満を言っていたりしますよね。「山手線を24時間走らせてくれたらいいのに」「人気料理店だからといってなんであんなに並ぶのか」「駅の券売機を何度押しても反応しない」「なんでもっとこう簡単にならないのか」などなど。

こういうのはまさに「ニーズ」であり、着想の源泉となります。実際に人が不便だと言っていることを解決したり、自分の体験から考えたり、特に不満はなくても先回りして「こうなればもっと便利だ」と考えたり。これが「技術による問題の解決」が、ITやWebの担う役割です。もちろんプログラムだけでなく、デザインも、問題解決の方法の一つです。

しかし、ユーザーの要求は、時として荒唐無稽な夢物語も含まれてしまっています。「どの株銘柄が正確に予想するアプリ」があったら誰もが欲しいのは分かりきっている(ニーズがある)のですが、これは難しいでしょう。何でもかんでも実現できるほど世の中は簡単じゃないですよね。

では、「今日自分が聞きたい音楽を自動的に察知して、音楽を再生するアプリ」はどうでしょうか?一見不可能なようにも思えます。ですが、考えようによってはかなり近いものが出来るのではないでしょうか?例えば、天候データやスケジュールデータなどから、過去にこういう条件の時はこういう音楽を聞いていたという統計をもとに、再生する曲を選ぶとか。最近聞いていない曲と、よく聞かれている曲のバランスを3:7にするとか。それに、脳波測定デバイスがあればもっと正確になりそうですよね(実用化されています)。

 

まとめ

このように、1と2いずれの方針からアプリ/サービスの企画をスタートさせても、最終的には「ニーズ」と「技術レベル」のバランスをとって考えられることになります。

ビジネスになれば「収益性」のことも考えないといけないのですが、みなさんはまだコストと利益を一切無視しても構いません。

 

番外編

また、これまでの話とは異なる方針が実はまだあります。

それは「笑いに走る」という方針と、「ビジュアルに走る」という方針です。

これの方針には、役に立つかどうかとか、世の中が便利になるかどうかとか、これまでにない新しいものかといったことは全く関係ありません。

そういった評価基準からは完全に離れた所で、ひたすら「笑えればOK」「見た目がかっこよければOK」「かわいければOK」といった価値だけに特化します。

みなさんはおそらくこういうものを、アプリ/サービスの世界よりも、ニコニコ動画(「才能の無駄遣い」タグなど)やテレビ番組の「あらびき団」「ナニコレ珍百景」なんかでよく目にしていると思います。

こういうものは、センスやひらめきで作ってしまうものです。

センスで勝負するので、センスを共有していないと理解されません。

また「出オチ」のような存在でもあります。

 

Have fun!(^ω^)

Xbox E3 2013 Media Briefing
現地時間6月10日9:30、日本時間6月11日1:30

The Download: EA’s 2013 Press Conference
現地時間6月10日13:00、日本時間6月11日5:00

Ubisoft E3 2013 Media Briefing
現地時間6月10日15:00、日本時間6月11日7:00

Sony PlayStation E3 Press Conference
現地時間6月10日18:00、日本時間6月11日10:00

Ninetndo Direct @ E3 2013
現地時間6月11日 23:00

SQUARE ENIX PRESENTS

現地時間6月11日16:00~、日本時間6月12日8:00~

JavaScriptの基本文法を理解している前提で、PHPの場合を説明します。
とりあえずこれだけ知っとけばWordPress触る分には大丈夫じゃないかな?

 

PHPのコードは、開始タグと終了タグの間に書きます。

 

現在日時を出力する例

 

HTMLの中にも書けます

 

echo の省略形

 

文字列結合

 

PHPの変数 は $ で始める

 

別ファイルの読み込み

index.php

template.php

実行結果

日時:2013/6/9 9:30

足し算の結果:13

 

Have fun!(^ω^)

functions.phpとは

WordPressの動作を変えるには、
・プラグインの導入
・ウィジェットの導入
・WordPress本体を書き換える [ダメ!]
・テーマファイル(テンプレート)そのものを書き換える
といった方法があります。
これらとは別に、
functions.phpという、PHPプログラマーが書き換えるための、中間的なファイルが用意されています。

WordPress本体を書き換えると、WordPress本体の更新時に変更箇所は上書きされて消えます。
テーマの場合も同様で、上書きされて消えます。

これを阻止するため、最初から「書き換えるために」用意されているのがfunctions.phpです。

 

functions.phpに何を書くか?

プラグインやウィジェットとは別に、設定したい処理をPHPコードで書きます。

特に「functions.phpにこれ書いとくといいよ」というものは、さまざまなブログ記事で解説されています。

WordPressのfunctions.phpに書いておくといいかもしれないコードいろいろ
http://webdesignrecipes.com/wordpress-functions-php-snipets/

WordPressを使ったWebサイトでfunctions.phpによく書いてるやつ – かちびと.net
http://kachibito.net/wordpress/add-my-functions.html

 

テーマの更新で消える可能性

functions.phpは「書き換えるために用意されたファイル」なのですが、実はテーマに属するファイルなので、テーマを更新した際に、結局上書きされて消える可能性があります。

 

対策(1)
テーマを更新した後に、毎回書きなおす

→書きなおすための元となるテキストを、evernoteかどこかにキープしておく
→めんどくさい
→めんどくさいだけならいいが、忘れるとヤバイ
→自分のサイトなら別にいいが、仕事となるとミスは許されない

 

対策(2)
自作テーマを作れば、更新は発生しない

→ 自作テーマの作成 http://zokei.koekatamarin.com/archives/435

 

対策(3)
小テーマを作ってオーバーライド

→ 小テーマの作成 http://zokei.koekatamarin.com/archives/444

 

対策(4)
functions.phpの内容を自分専用プラグイン化

冒頭コメントを記述

functions.phpの処理をそのまま記述できる(例)

このように、functions.phpに書いていたコードをそのまま記述することができます。

このようなphpファイルを任意のファイル名で、任意のフォルダに格納して、./wp-content/plugins/ 配下にアップロードして有効化。

WorpPressテーマをカスタマイズするにあたって、どのような方針で始めるか?

 

(1) 変更箇所が多い場合、テーマの更新が必要ない場合
→ 自作テーマとして独立して作成
http://zokei.koekatamarin.com/archives/435

 

(2) 変更箇所が少ない場合、親テーマの更新を行なって行きたい場合
→ 小テーマを作成して親テーマを継承・上書き
http://zokei.koekatamarin.com/archives/444

 

[WP] テーマカスタマイズの方針
http://zokei.koekatamarin.com/archives/447

 

「TwentyEleven」を親テーマとした小テーマ「TwentyEleven-Child」を作成する場合

1. フォルダ作成
./wp-content/themes/
配下に、 twentyeleven-child フォルダを作成

2. style.cssの作成
childフォルダ配下に、style.cssを作成して以下を記述

3. テーマの有効化

管理画面の 外観 > テーマ から「TwentyEleven-Child」テーマを有効化。

これで、親テーマ「TwentyEleven」のstyle.cssの代わりに、子テーマ「TwentyEleven-Child」のstyle.cssが読み込まれるようになります。
親テーマのstyle.cssが使われないということは、小テーマでゼロからCSSスタイルを書かないといけなくなるので、@importで親テーマのスタイルを読み込んだうえで、小テーマで上書き(オーバーライド)していきます。

style.css以外のテーマファイルは親テーマ「TwentyEleven」を使う状態になります。

4. 他のファイルの上書き

style.css以外のファイルを上書きするには、twentyeleven-childフォルダ配下に上書きしたいファイルと同じファイル名のファイルを作成します。

ただし、functions.phpは、親テーマのも子テーマのもどちらも有効なものとしてWordPressに読み込まれて、他のファイルのように「上書き」にはなりません。

[WP] テーマカスタマイズの方針
http://zokei.koekatamarin.com/archives/447

 

ゼロからWordPressテーマを作る、というのは現実的ではありません。
任意のテーマ(初期テーマ=TwentyTwelveなど)をベースに作るのが妥当です。
テーマをフォルダーごとコピーして、名前を変えて設置して、自由にHTML/CSS/PHPをカスタマイズします。

例)講師の運営サイト

ガンバ大阪まとめ
http://j.hachimaki.net/

「Sampression Lite」をベースに、「ガンバ大阪」テーマを作成しました。

 

1. ベースにするテーマをダウンロード

管理画面からインストールしたテーマを、FTPでサーバーからPCにフォルダをダウンロードします
(一般サイトで公開されてるテーマなら、ダウンロードして解凍しておく)

 

2. コピーしてフォルダ名を変更

sampression-lite

gamba

 

3. style.cssの冒頭コメント部分を書き換える

  ↓

この情報が、管理画面に表示されるテーマ名になります。

 

4. アップロード
./wp-content/themes/ にフォルダごとアップロード

 

5. テーマの有効化

 

6. テーマのカスタマイズ

外観 > テーマの編集 から書き換えていくか、
エディタからFTP接続で直接編集します。

<WordPressテーマの基本構成>

404.php – ページが見つからないエラー用ページ
archive.php – アーカイブページ
author.php – 著者ページ
category.php – カテゴリーページ
comments.php – コメント部分
footer.php – フッター部分
functions.php
header.php – ヘッダー部分
image.php – 画像表示ページ
index.php – すべてのベースになる起点PHP。ここから角ページの処理に分岐
loop.php – 記事一覧ページ
page.php – 固定ページ
search.php – 検索ページ
sidebar.php – サイドバー部分
single.php – 単一記事ページ(「投稿」の単体表示に対応)
tag.php – タグページ

■ ファミ通App

「週刊ファミ通」はiPadおよびiPhoneの無料Appで無償で読むことができます。
巻頭の業界ニュース、マーケティングレポートは、他にはないまとめられ方をしていて役立つ情報が得られます。

2013-06-09 01.04.57

2013-06-09 01.05.09

■「フレンド」

最新ゲームに詳しい所謂「ゲーマー」と呼ばれる友人を、リアル・オンラインで作って、こまめに話して情報を得ましょう。特に、XBoxLiveやPSNetoworkで、ゲーム以外に接点のない交友関係を持つと、今まで自分がリアルで関係構築しやすかったタイプとは異なる人達と交流できます。
ネットの書き込みを見聞きするだけではなく、必ず自分の言葉で人と話すことがポイントです。
自分とは異なる様々な趣味嗜好が存在し、いろいろなゲームのニーズがあることを知ることは重要だと思います。

できれば、ゲームショップの店員が知り合いにいると、何がどう売れているかといった「街角の空気」もうかがい知ることができます。

また、オフ会やゲームショーなどにも足を運んでみましょう。

■ 実体験

講師の実体験を例に挙げます。
私は、Xboxで知り合ったゲーマーたちと頻繁にオンラインで会話(ボイスチャット)します。新しいソフトやハードについて意見交換します。そのうちひとりはゲームショップの店員さんで、限定版を予約してくれたり、売れ筋を教えてくれたりもします。

年に一回ぐらい飲み会を開いています。

具体的な成果を思い出してみると、自分が興味の無かったジャンルの、RTSやボードゲームの面白さを教わりました。また、しょっちゅう新作おすすめゲームが話題に上がるのですが、それは普段のネットサーフィンでは得にくいリアルな情報でした。

彼らのおかげで出会えたゲームは、

  • Halo4
  • GearsOfWar3
  • HaloWars
  • カタンの開拓者
  • シヴィライゼーション
  • シュタインズゲート
  • ElderScroll4 Oblivion
  • HappyWars
  • TransFormers Fall of Cybertron
  • カルドセプトサーガ
  • Fable2
  • ガーディアンヒーローズ
  • 鉄拳6
  • スーパーストリートファイター4

などです。
自分一人では決して買わなかったものばかりです。彼らのおかげで世界が広がる経験ができました。

 

たまに、自分から「新しいゲームのアイディア」を言ってみることがあります。「たしかにそういうタイプのゲームは今までなかったね」「その手のゲームはこういう部分の工夫が肝だよね」など結構アドバイスが貰えます。

「いっしょに企画考えていこうよ」という話にもなっています。

 

自分の関心のある方向、漠然とでも目指す方向に自分をきちんと導いていくために、「環境」と「習慣」を工夫してみましょう。

 

Have fun !(^ω^)

実装イメージ
2013-06-04 00.59.08
↑こんな感じになります

 

HTML

JavaScript

CSS

さて、「アプリ」や「サービス」というには機能的にちょっと物足りないかもしれませんが、ひとまずこのへんでそれなりの形にしてしまいたいと思います。

あなたが「ちょっと物足りない」と思うとしたら、それは機能やデザインを工夫して、作り込んでいくチャンスです。
そして、各人のイメージによってどういうプロダクトになっていくか、分かれ道でもあります。

また、教える側の都合としては、個別の機能追加についてひとつひとつこまかく説明していく時間がないという問題もあります。

基本的な概念と基本的なコードを理解すれば、あとは各自で調べていくことができます。「ggrks」ってやつです。
逆に言えば、「もっと面白いものが作りたい」という自分の知的好奇心を解決するには、自分でやっていくしかありません。

 

ともかく、今回のサンプルの仕上げとして、

  • マーカーを表示
  • 吹き出しを表示
  • 吹き出しに住所を表示
  • 緯度経度を表示

という変更を加えたいと思います。

 

動作デモ
http://dev.koekatamarin.com/zokei/20130604_geolocation3/

 

仕上げのコード

index.html の <head>内部

ページ名です。いいアイディアがあれば、別にこれでなくてもいいですよ。

 

index.html の <body>内部

 

script.js

ローカルPC上で問題なく動いたら、
ファイルをサーバーにアップロードして、スマホで確認ましょう。

 

iPhone/iPadの「ホームに追加」機能

このサイトをiOSのSafariで表示して、次のようにすれば、サイトがアプリっぽくなります。自分で作ったサイトをこのようにアプリ化しておけば、人にプレゼンする時などにいい感じですよ。

apple1

apple2

apple3

apple4

 

メニューバーを消す
<head>内に記述

こうすると、メニューバーが表示されなくなり、(ほぼ)全画面表示されます。アプリっぽいですね。
ただし、戻る/進むボタンも表示されなくなるので、必要な場合はjQueryとCSSで実装する必要があります。

参考)iOSで「ホームに追加」したWebclip(WebApp)モードのサイトに戻る/進むボタンを付ける
http://zokei.koekatamarin.com/archives/409
 

オリジナルのアプリアイコンを設定する
参考)
http://arigato-ipod.com/lab-webclip-apple-touch-icon.html

Have fun!(^ω^)