Author Archives: Admin

こんにちはイッシーです\(^o^)/。たまにミッチャンて呼ぶ人もいますが、まぁ好きな方で呼んでください♪

普段はスマートフォン事業部でiPhoneやandroidのアプリを開発してるのでクライアントはMacです。今まではWindowsを使用してたので、戸惑うこともチラホラ・・・そこでMacでのWebアプリケーションの開発環境を本日はメモっておきます。

と思ったのですがWindowsユーザにも読んでほしいので、Windows用の設定も書いておくことにします。

  • テキストエディタはwindowsのメモ帳を使用せず、秀丸・サクラエディター・emeditorなどを使用し、Macの場合はターミナルでそのまま編集してください
  • プロジェクト名は「hoge.plusr.biz」とします

【step1】xamppをインストール

Win

http://www.apachefriends.org/jp/xampp-windows.html

Mac

http://www.apachefriends.org/jp/xampp-macosx.html

【step2】apacheの設定 – その一

Win
C:\xampp\apache\conf\httpd.conf
Mac
vi /Applications/XAMPP/xamppfiles/etc/httpd.conf

以下の記述の部分を

#
# Controls who can get stuff from this server.
#
Order allow,deny
Allow from all

以下のように変更しローカルからのアクセスのみ許可します。

#
# Controls who can get stuff from this server.
#
Order allow,deny
Allow from 192.168.
Allow from 127.0.0.1

【step3】apacheの設定 – その二

Win
C:\xampp\apache\conf\extras\httpd-vhosts.conf
Mac
vi /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf

バーチャルホストの設定

以下の部分の記述を

#NameVirtualHost*:80

以下のようにしてコメントを外します。

NameVirtualHost*:80

次に、行末に以下を追記します。

Win
<VirtualHost*:80>
    ServerName hoge.plusr.biz
    DocumentRoot "C:\xampp\htdocs\hoge.plusr.biz\trunk\public_html"
</VirtualHost>
Mac
<VirtualHost *:80>
    DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/hoge.plusr.biz/trunk/public_html"
    ServerName hoge.plusr.biz
</VirtualHost>

【step4】mysqlの設定

Win
C:\xampp\mysql\bin\my.ini
Mac
vi /Applications/XAMPP/xamppfiles/etc/my.conf

それぞれのセクションに以下を追記します。

[mysqld]
character_set_server = utf8
[client]
default-character-set=utf8

以下のような記述も見られますがセキュリティの観点から推奨はしません。といっても開発環境なんだけど。。。

skip-character-set-client-handshake
character-set-server = utf8
collation-server = utf8_general_ci
default-character-set = utf8
init-connect = SET NAMES utf8

【step5】phpの設定

Win
C:\xampp\php\php.ini
Mac
vi /Applications/XAMPP/xamppfiles/etc/php.ini

mbstringのセクションにある以下の項目を変更し、文字コードをUTF-8ベースに変更します。

mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = pass
mbstring.http_output = pass
mbstring.encoding_translation = off

但し、開発するシステムの仕様に依存しますので携帯サイトなどはこの限りではありません。

また、開発環境では問題とならないが以下の項目を変更してPHPの情報をレスポンスヘッダから隠します。

expose_php = Off

【step6】Apatch, MySQLの再起動

XAMPPのコントロールパネルから再起動してください。

【step7】hostsファイルの設定

Win
C:\WINDOWS\system32\drivers\etc\hosts
Mac
http://www.apple.com/jp/downloads/macosx/tools/hoster.html

ちなみにiPhoneのシミュレータはデフォルトでhostsファイルを参照するようなのですが、androidのシミュレータはhostsファイルを参照させるために別途設定が必要なようです。

Win

以下のように記述することで任意のドメインでアクセスしたときにローカルを参照するようになります。

[自分のIPアドレス] hoge.plusr.biz

Mac

基本的な概念は変わりませんがhosterを起動して設定してください。

基本的な内容ではありましたがいかがでしょうか?基本的にはファイルパスが違うだけで設定項目は変わりません。次回は遊び心あるトピックにしようかと思います。

初めまして。谷口です。これからよろしくお願いします。

前職でケータイゲームのプランナーを担当することがありましたので、今回は企画に関する記事にしようと思います。題して、『釣り★スタ』のスゴさです。

■なぜ『釣り★スタ』か

『釣り★スタ』とは、GREEにて現在公開されている、釣りをテーマにしたソーシャルゲームです。CMやネット広告での露出がかなり高いので、ほとんどの方はご存知だと思います。かく言う私もCMを見て興味を持ったクチで、実際にGREEに登録したきっかけもこのゲームでした。商品として短命だと言われるソーシャルゲーム業界において、なぜ『釣り★スタ』はリリースから3年経った今でも遊ばれているのか。そういった疑問を持つ方々にとって、この記事がすこしでも手助けになれればと思います。

■そもそもソーシャルゲームって?

ケータイにおけるゲーム開発でやっかいなのが、パッケージゲームでは付いていて当たり前のものが存在しない(あるいは極端にスケールダウンしている)、なんてことが起こりうることです。軽く列挙すると、

  • 説明書がない
  • 画面が小さい
  • 専用コントローラーがない
  • マナーモードでプレイしていると音がない
  • 多種多様な端末があるため、厳密な動作環境の仕様がない

これだけの悪条件が揃っていて、先人たちはよくゲームを作ろうと思ったな、と。しかもよくここまで巨大産業に育て上げたな、と畏敬の念を禁じえません。

とは言え、ダウンロード型のアプリならまだマシです。ソーシャルゲームの場合、さらに以下の条件が付け加えられます。

  • 完全に無音
  • 「ボタンを押す」という1アクション毎に通信待ちの待機時間がある
  • 「ゲームクリア」という概念がない

ここまで来ると、本当にゲームなのかすら疑わしいです。ですが、多くの人がそれをゲームとして受け入れていますし、今や巨大な産業にまで成長しています。

誰かが呟いていました。

ソーシャルゲームが流行るまで、平気で企画を落としたり、予算をダンピングする時に「ゲーム性が低い」という言葉を理由に使ってきた人達が、今や一切その言葉を使えなくなったというのが実にユカイかと思ってます。

そう、ソーシャルゲームにおいては今までのゲームとは全く違った考え方が必要なのです。その考え方を実現してヒットしたのが、『釣り★スタ』なのだと思っています。

■システムのスゴさ

よく、「ゲームの企画とはルールとゴールを定めるものだ」と言われます。『釣り★スタ』の場合、そのゲーム上でのルールとゴールが誰にでも楽しめるようにうまくデフォルメされているのです。

『釣り★スタ』公式ページには、ゲームの説明としてこう書かれています。

  1. 釣り場を選ぼう!
  2. 釣りをしよう!
  3. お魚をGET!

以上、たった3点だけです。ぶっちゃけこの説明を読まなくても、『釣り★スタ』はなんとなくプレイすることができます。

その「なんとなくプレイできること」こそ重要なのです。これまでゲームをやってきたことがない人にもとっつきやすい親切設計。「とりあえず話題になっているから、やってみようかな」とアクセスしてきた人が、試しにやってみて楽しめる。そこを重点に作られているように思います。『釣り★スタ』にとって、ケータイゲームの欠点であったはずの「説明書がない」ことは重要ではないのです。それを裏付けるように、『釣り★スタ』の新規ユーザー登録は今でも絶えません。新規ユーザーの流入は、そのままゲームの寿命を延ばす役割を果たしています。

現実世界における釣りの面白さのエッセンスをうまく抽出し、ゲームシステムに反映させる。それが、『釣り★スタ』のゲームシステムのスゴさです。

■ゲーム部分のスゴさ

さて、ここからがいよいよゲーム部分の分析です。

単純に、『釣り★スタ』はゲームが面白いです。継続してプレイしている人の大半の理由は、このゲームに、ゲームとしての根源的な面白さを感じているからではないでしょうか。では、HD画質のゲームが当たり前の時代において、画面は小さい、画質も悪い、音もないようなFLASHゲームを、なぜ人は面白いと感じるのかを考えていきたいと思います。(今回は、多くの初心者が行うであろう「川釣り」をメインに解説します)

私は、大きく分けて3つの要因があると考えています。

  • 緩急のバランス

『釣り★スタ』のゲームパートは、「ウキを投げて魚が食いつくのを待つ」パートと、「食いついた魚を釣り上げる」パートに分かれています。これを、それぞれAパートとBパートとします。

「ウキを投げて魚が食いつくのを待つ」Aパートは、アクションゲームとしてはゆったりした流れです。制限時間もありませんし、何かのテクニックを強要されることもありません。ウキを投げる方向と強さを決めたら、あとは魚が食いつくのを待つだけです。唯一Aパートでテクニックを発揮するとしたら、魚が食いついた瞬間に決定キーを押下することでしょうか。それを合図にゲームは進行し、Bパートへと移ります。

Bパートでは、Aパートと打って変わって非常に動きの激しいアクションゲームらしい画面になります。魚が画面の中心点に来たタイミングを見計らって、決定キーを押します。もちろん、それ以外の場所でキーを押すと魚に逃げられてしまいます。大きい魚やレアな魚だと動きが抵抗が激しく、難易度も上がります。このBパートは、目標が画面の中央にきたらボタンを押す、というFPSゲームと同じ面白さを持っています。

このAパートとBパートの緊張と弛緩のリズムがとてもバランス良く配置されて、相乗効果を発揮しています。ゲーム中、プレイヤーが実際に押すのは決定キーのみです。ボタンひとつでこの絶妙なバランスを実現するのは、ゲーム開発者にとって非常に難しいことだと思います。

  • 振動(バイブレーション)機能の活用

この、「振動(バイブレーション)機能」はソーシャルゲームを語る上で欠かせない重要な要素です。(いずれこの事のみで記事を詳しく書きたいなあ)

BGMやSEがないソーシャルゲームにとって、振動機能は多くの役割を果たします。ゲーム中、ケータイが振動するのは、ウキに魚が触れたり食いついた瞬間です。これは、「実際の釣りでの魚が食いつく感触の再現」であり、「(動きの激しいBパートの始まりを告げる)ホイッスルの合図」であり、「プレイヤーの目を覚まさせる興奮剤」であります。

「ケータイを手に持つ」という感覚と、「釣り竿を持つ」という感覚をリンクさせるキーワードとして、振動機能は欠かせません。BGMもSEも無い環境で、視覚と触覚だけが頼りになるゲームシステムが、逆に『釣り★スタ』の醍醐味として持ち味になっているのです。

  • 間(ま)の利用

「間」、というのはゲーム開発者たちがみな頭を悩ませる問題だと思います。何フレームで画面を遷移させるか、どのタイミングで演出を入れるか、何秒をタイムリミットとするか、など、多くの「間」をトライアルアンドエラー的に繰り返し試しているはずです。

ソーシャルゲームにとって、「間」というのは情報を取得する「通信時間」という大きな問題として常に念頭に置くべき要素ですが、『釣り★スタ』はこの「間」の利用が非常に上手い。

プレイヤーは、魚を釣るために遊んでいる間、その魚が何なのかを知りません。シルエットで大きい魚か小さい魚か、くらいの情報しか与えられないのです。そして、釣りに成功して、「GET!」と表示されてから通信時間に入ります。この通信時間の間、プレイヤーは「どんな魚が釣れているんだろう!」と期待しているに違いありません。オノマトペで言うと「ワクワクドキドキ!」といったところでしょうか。多くのソーシャルゲームが、「通信時間」をただの「待機時間」のままにしているのに対して、『釣り★スタ』においてはそれをプレイヤーの欲求や期待を増幅させる装置として活用しているのです。

ここでも、通信時間というソーシャルゲームの弱点を『釣り★スタ』はうまくプラスの要素に転化しているのです。

■まとめ

以上のように、『釣り★スタ』はソーシャルゲームの弱点と思われる部分を、「釣り」という独特のシステムに取り入れて昇華させているのです。だから、ゲームとして面白い。だから、誰でも楽しんでもらえる。もちろん、無料である(ノーリスクである)ということと、大量の広告が流された、という点も絡んできますが、それ以外にもヒットする要因は確実にあると思っています。

さて、非常に長い記事となってしまいましたが、ここまで読んでくださった方々、本当にありがとうございました。

次回は「ソーシャル性」に富んだヒットゲームの記事を書きたいと思います。もしよろしければ、次回もお付き合いください。

みなさんこんにちは。2月に入社した石本(通称:イッシー)です。会社ではスマートフォンのネイティブアプリを作ってます。\(^o^)/

さて、ご存知の方も多いと思いますが、Gmailに新しいオプションが付きました。「設定 > 全般」の項目の「デスクトップ通知」という項目です。この機能を”オン”にした場合、Google Chromeではデスクトップ右下(Macは右上)に、メール受信のお知らせが表示されるようになります。この通知機能によって、メールの受信に気づけるようになるわけです。

そこで本日は、スマートフォンのネイティブアプリには直接関係ないですが、Web Notifications(通知機能)について解説したいと思います。

サンプル

Google Chromeで以下のボタンを押すと、右下に小窓が表示されます。

※初回は「許可」を選択し、再度ボタンをクリックしてお試しください。

サンプルコード

以下のようにするとWeb Notificationsが使用できます。細かい解説はコードの中にコメントとして記述しました。

document.getElementById('button').addEventListener(
    'click',
    function(e){
        // 通知機能を実装していないブラウザを除外します
        if(typeof window.webkitNotifications == 'undefined'){return;}
       
        // 通知機能はユーザが許可したサイトでしか使うことができません。
        // そこでユーザのブラウザから許可を得ているかを取得します。
        var permission = webkitNotifications.checkPermission();
        switch(permission){
            case 0:// 許可されているとき
                var notification = webkitNotifications.createNotification(
                    '',                                   // アイコンの画像ファイル
                    '通知ですー',                           // 通知のタイトル
                    '(サンプル)お知らせが届きました!\(^o^)/'// 通知の内容
                );
                notification.show();// 通知の表示
                break;
            case 1:// 許可されていないとき
                webkitNotifications.requestPermission(function(){
                    // 「許可」もしくは「拒否」が押された後に呼ばれるコールバック関数。
                    //  但し、どちらが押されたかを取得することはできない。
                });
                break;
            case 2:// 拒否されているとき
                break;
        }
    },
    false
);

いかがでしょうか?意外と少ないコード量で実現することができました。上述の場合、通知機能は表示されたままですが、一定時間の表示後に消すこともできます。

        switch(permission){
            case 0:// 許可されているとき
                var notification = webkitNotifications.createNotification(
                    '',// アイコンの画像ファイル
                    '通知ですー',// 通知のタイトル
                    '(サンプル)お知らせが届きました!\(^o^)/'// 通知の内容
                );
                notification.ondisplay = function(){// 通知が表示されたときのイベント
                    setTimeout(
                        function(){
                            notification.cancel();// 通知を消す処理
                        },
                        2000// 2秒後
                    );
                };
                notification.show();
                break;
            case 1:// 許可されていないとき
                webkitNotifications.requestPermission(function(){});
                break;
            case 2:// 拒否されているとき
                break;
        }

その他のイベントハンドラやメソッドについては以下のようになってます。(参考:chromium Design Document

interface Notification : EventTarget {
 // メソッド
 void show();// 表示する
 void cancel();// 閉じる

 // イベントハンドラ
 attribute Function ondisplay;// 表示されたとき
 attribute Function onerror;
 attribute Function onclose;// 閉じたとき
}

以下のように、W3Cのthe Notification interfaceとは若干実装されているものが異なってるようですね。(参考:the Notification interface

interface Notification : EventTarget {
  void               show();
  void               cancel();
           attribute Function   onclick;
           attribute Function   onshow;
           attribute Function   onerror;
           attribute Function   onclose;
           attribute DOMString  replaceId;
           attribute DOMString  dir;
};

2011年2月現在では、Chromeと同じWebkitを採用しているSafariで、この機能を使用できませんでした。しかし、今後はSafariだけでなく、より多くのブラウザで今回解説した通知機能が使用できるようになるはずです。

参考

ちなみに去年のGoogle Developer Day 2010 Japanでも紹介されていました。