携帯サイト制作のために・・・ Part1

コンテスト自体は終了してしまいましたが、ThinkQuest作品の幸せを運ぶ鳥~コウノトリの携帯電話版は、密かに更新中です。
アクセス方法は、パソコンと同じアドレスでもアクセスできますし、http://contest2007.thinkquest.jp/tqj2007/90445の最後に/m/をつけるとより簡単です。
ところで、どのように携帯サイトを作成しているのでしょうか、今後パソコンで携帯サイトを制作していく場合(どこかの携帯サイトサービスを利用せずに、パソコン用と両立するという条件で)に役に立つ情報を紹介します。

携帯とパソコンの振り分け

トップページへアクセスした際に、携帯でもパソコンでも同じアドレスだと、マーケティング活動の時にも便利です。
振り分けにはちょっとした方法でできるのです。
もちろん、普通にパソコン用サイトの上の方に(スクロールが大変だから)携帯サイトへのリンクを張って誘導すればいいのですが、ここでは、パソコン表示ではリンクを隠して、携帯電話(とごく一部のパソコンユーザー)のみに見せる方法です。

1.フレームを使ったページ

検索エンジンが上手く認識しない可能性もあり、あまり好まれていないのですが、フレームのサイトもありますので、もしもあなたのサイトがこの形であれば簡単に振り分けできます。
考え方は携帯電話はフレームに対応しないということです。(画面が小さいので)
現在のパソコンのブラウザではほぼ100%フレームに対応しています。対応していないブラウザはよほど古い機種ですし、対応バージョンまではバージョンアップできます。(Windows3.1ブラウザでもフレームは表示できます。)
そこで、フレームのHTMLファイルに指定すると、携帯ではフレーム未対応の時のファイル内容(<NOFRAMES>タグの内容</NOFRAMES>)が表示されます。
豆知識ですが、よく検索エンジンで、「このサイトではフレームを使用しています。」という結果が出てくるのですが、これは全く意味がありません。フレーム無し版へのリンクであったり、サイト内容の紹介を入れると効率的です。
それを利用して、非対応の表示の上の方に携帯サイトはこちらというリンクを張っておきます。
これで簡単に、携帯とパソコンの振り分けが完成しました。
幸せを運ぶ鳥~コウノトリはこの方法です。

2.JavaScriptによる振り分け

携帯電話では、JavaScriptに対応していません。
そこで何でもいいのでサイトの上部にJavaScriptを設置して、<NOSCRIPT>タグ内に</NOSCRIPT>携帯サイトへのリンクを張ればOKです。

これらの方法はFirefox等のPCブラウザでのUser-Agent偽装では表示されません。
また、第二弾を予定しています。

たのしくことばあそび (ThinkQuest@JAPAN2007金賞作品)

H22.5.27リンク先を修正しました。情報は当時のもので現在とは異なる場合があります。
今回紹介するのは「たのしくことばあそび」というサイトです。
Flashを使用した、自作の言葉遊びゲームがメインです。色々な物の名前を覚えたいという幼児の皆さんに是非とも使用していただきたいです。

実際に保育園や幼稚園での使用したという情報もあります。
幸せを運ぶ鳥~コウノトリと同じ学校の別の制作チームが制作した作品で、作品制作に直接携わったわけではありませんが、僕もテストプレー等で色々と手伝いました。
この作品はThinkQuest@JAPAN2007で金賞を受賞した作品です。ライブラリ入りもしており、いつでもご覧になれます。

実際に見てみよう

サイト上には書かれていませんが、Firefoxでご覧になった場合は、文字が画像や表の下に隠れてしまう可能性があります。
Internet ExplorerとOperaでは問題はありませんでしたので、こちらのブラウザをご使用ください。
また、今回のスクリーンショットはOpera9.20(Windows)の画面です。
サイトを開いてみると、トップ画面が表示されます。


初めての方は、「保護者の方へ」をご覧ください。
あそぶ」をクリックするとメインのゲームの一覧が表示されます。
すべてのゲームの説明をします。

「え」のあそび

左側の3つあるゲームです。
ルールは、表示されるイラストを見て、その物の名前を下のボタンを利用して入力します。間違えたときは戻すこともできます。
正解したら○が表示されて失敗すると正しい答えを表示します。
ちなみに、表示されるイラストはOfficeのオートシェイプで作成されました。
幸せを運ぶ鳥~コウノトリでは、コウノトリのオートシェイプや、作り方も紹介しています。

「おと」のあそび

右側の3つあるゲームです。
基本的な操作方法は「え」のあそびとは大きく変化しません。
スピーカーのボタンを押すと音声が流れます。その音声で言ったとおりのひらがなを下のボタンから選ぶという物です。

何回聞いてもいいので、耳で聞いた音がどの言葉なのかをしっかり理解できるようにしましょう。

ことばをつくろう!

表の下に書かれていて、うっかり見落としそうなところにあるのがこのコーナーです。
ここは特にゲームではなく、自由に言葉を入力して、いろいろと聞くことができます。
操作方法の練習用としても使えます。

※ゲームを開始しても正しく表示されない場合は、ブラウザの更新ボタンでページを再読込してください。

他のアクセス方法

このサイトは、本来のThinkQuestの作品アドレスに加えて、日本語と英語の独自ドメインも取得していますので、合計3つの方法でアクセスできます。(2010年1月31日まで)
ドメインの期限が切れたため、独自ドメイン名からはアクセスできなくなりました。

ご意見ご感想は・・・

このサイトには意見を送信するコーナーがありませんので、もし連絡を取りたかったら、制作者へ知らせますので、こちらのブログに書き込んでいただければと思います。
また、中学校のメールへも送信できますが、迷惑メール対策のためブロックされる可能性もあるので、できるだけこちらへ知らせた方がよいと思います。

ひとこと

このゲームの基本的な部分は、メディアポスト2006に応募した僕の作品「Speesh足し算」(何故かサイト上では足し算という言葉は省略されている)とその姉妹ソフトの「Speeshタイピング」が利用されています。
(ひらがなボタンはSpeeshシリーズではありません。)
正解、失敗判定および、その表示(○や正解表示)の部分はそのままですし、ボタンもSpeesh足し算から利用したクイズミリオネア(終了済)風のボタンです。

もちろん、利用できるいいソフトはどんどん取り入れるべきだと思いますが、オートシェイプでイラストを作っているチームにしては、ゲーム自体の画面構成をもっと充実させるべきだったと思います。

さて、このサイトが応募したコンテストであるThinkQuestですが、ThinkQuest@JAPAN 2008の応募受付が2007年5月30日から開始されています。
今年から開催期間が変更されて、3年生に対して優しいスケジュールになっています。
興味を持たれている方は是非参加してみてください。
Flash等の高価なソフトを持っていない場合でも、ホームページ作成ソフト(フリーソフトも可)だけで制作できる規定部門という物もあります。
詳しくはThinkQuestのサイトをご覧ください。

また、このブログでも良いサイトを紹介していきたいと思います。

教えて!gooについて

今回は普段利用しているサイトを紹介します。

教えて!goo

OKWave提供なので、本家OKWaveでもいいのですが、こちらはgooのアカウントさえ持っていたら、新たにアカウントを作成しなくても利用できるのが特徴です。
ちなみに僕も時々他の方の質問に対して回答をしています。
携帯電話版もありますが、閲覧のみで質問をすることはできないみたいです。
携帯電話についてのカテゴリも存在しますので、(デジタルライフ→携帯・PHS)携帯電話しか使えないときに調べたいことがあれば簡単に過去のQ&Aを検索することもできます。
※なお、これらの情報は記事掲載時の情報ですので、仕様変更等で変更になる場合があります。

自分と教えて!goo

こちらのブログやHPなどのハンドル名はyasu0796ですが、gooアカウント名の関係でyasu147として活動しています。
改めて公開プロフィールで登録日を調べてみると2003/08/26となっていました。
もう4年近くも使用しているのですか・・・しかも、このブログよりも少し前から行っていました。(このブログは2004/09/25開始)
自分の質問数も23件、回答数も96件、結構回答を多く行ったのですが、質問数の4倍という数値でした。(2007/05/27現在)
今日何故この記事になったかというと、何故か気分的に様々な質問へ回答をしていたからです。このブログもHPも軽くほっといて・・・?
自分の公開プロフィール(パソコン版のみ)を見れば分かるのですが、au携帯についてやWindowsXPなど今日だけで15件近く回答をしていました。
質問をするときに「回答通知メール」という機能があるのですが、そのメール確認はリロードせずにリアルタイムに表示されるウェブメールGmailがおすすめです。

幸せを運ぶ鳥~コウノトリ モバイル版

報告ですが、幸せを運ぶ鳥~コウノトリの更新履歴にあるように、何件か新聞掲載がありました。
  • 神戸新聞
    5月9日に掲載されました。写真では二人しか移っていませんので僕は映っていません。
  • 朝日新聞
    5月12日に掲載されました。写真はスクリーンショットのみです。
    また、直リンクはできませんので紹介していませんが、兵庫県の地域コーナーでもネット上から閲覧できます。
  • 日本海新聞
    まだ掲載されていませんが、取材は受けたそうです。
今回はタイトルにあるとおり、仮公開でほぼコンテンツはありませんが携帯電話版が登場したのでお知らせします。
i-mode版とEZweb版の二つを用意しています。
アドレスはこちらです
http://contest2007.thinkquest.jp/tqj2007/90445/m/
パソコンでのアクセスや、携帯電話でアクセスしたときの自動転送はまだありませんが、正しい端末でご覧ください。
なお、このアドレスは一応すべてのキャリア対応の予定です。
 

ThinkQuest結果発表

4月27日、ThinkQuest@JAPAN2007の結果発表がありました。
なんと、「幸せを運ぶ鳥~コウノトリ」は中学生の部のプラチナ賞と、ベストドメインネーミング賞に選ばれました。

今までこのブログを通してアクセスしてくださった皆さん、応援してくださった皆さん、本当に有難う御座いました。
余談ですが、高校でもPRしたのですが、その後数人の人が聞きに来るなど、やはり豊岡でのコウノトリの関心の高さを実感しました。
これから、ホームページの管理は誰がするのかはまだ決まっていませんが、僕も時々制作に携わっていきたいと思います。
(そんなこといってるといつまで現役中学生なのかと聞かれそうですが・・・)