2014年5月アーカイブ

5/30 セミナー

| コメント(0) | トラックバック(0)
今週の動き
・レジュメ作成
・ブラウザ上での音声再生が可能に
・パノラマチャンネル表示時のAndroid端末の画面フリーズ改善
・iOSとAndroidでの画面遷移の動作検証(junaio)

今日の予定
・卒業研究発表要旨(第一回)提出
・卒業論文題目提出

実習後の予定
・学内オリエンテーリング教材の作成,内容充実(学内パノラマ撮影,説明文作成,取材など)
iOSとAndroidの画面遷移の動作検証を行った。

・iOS
     junaioチャンネル→junaioチャンネル   ◯
                junaioチャンネル→HTML        ◯
       HTML       →junaioチャンネル   ◯
     HTML       →HTML        ◯

・Android
     junaioチャンネル→junaioチャンネル   ◯
                junaioチャンネル→HTML        ◯
       HTML       →junaioチャンネル   ×
     HTML       →HTML        ◯

調査した所,Android版のjunaioではブラウザのバグによりHTMLから直接リンクでチャンネルに遷移することはできないとのことであった。
そのため,HTMLをもう一つ作り,そちらからブラウザの×ボタンへと誘導する手法を検討している。
オリエンテーリング教材の流れは以下のようになる。
nagaref .jpg

Android端末でメインチャンネル→パノラマチャンネルを表示した際に画面がフリーズしてしまう問題があった。

junaio日本語フォーラム
の 「Androidでプロトコルエラー」という記事にその対処法が示されていた。
チャンネルへのリンクを
href=javascript:arel.Scene.switchChannel(XXXXX)
と記述するというものである。

従来はindex.phpに

array(array("パノラマを見る", "panoramaButton", "junaio://channels/?id=******")

という形式で記述していたが,これを

array(array("パノラマを見る", "panoramaButton", "href=javascript:arel.Scene.switchChannel(******)")

とすることでiOS,Androidどちらでも正常にチャンネル遷移ができるようになった。

ヤギの鳴き声当てクイズの音声再生の際に画面が切り替わる点の改善

HTMLのaudioタグを使ってその画面のままで音声再生を行うことができた。

参考URL
TechBooster 「audioタグを使って音声を再生する」http://techbooster.org/html5/9915/
<audio src="*****.mp3" controls></audio>
のように記述するだけで画面上での音声再生ができる。

iOS,Androidそれぞれのjunaioブラウザで動作確認したがどちらでも再生された。
チャンネルとボタンの動きをタグ〜解説までPages(キャンバス)を用いて作成する。
すべてのHTML画面に戻るボタンを作る。解説ページにも。
iPhoneやAndroidでも動作確認。
音声を画面上で再生できるように(画面遷移せずに)
ビューポートで確認

5/23 セミナー

| コメント(0) | トラックバック(0)
今週の動き
・htmlでのクイズ画面,場所の解説ページ作成
・レジュメ作成開始
・ビオトープ論お手伝い

来週の予定
・ヤギ小屋のチャンネル完成(解説ページ等)
・レジュメ完成,提出
・卒論題目提出
・ビオトープ論お手伝い
それぞれのパノラマチャンネルから場所の解説,クイズページヘのリンクを作成した。

arel/logic.js に

function openWebsite(button)

{

arel.Media.openWebsite("yagi.html");

}

と定義することでhtmlへのリンクを作成することができた。

IMG_0146.PNGIMG_0147.PNG

左が従来のパノラマチャンネルに解説のページヘのリンクボタンを加えたもの

右が作成した解説ページ。下にスクロールすることでクイズに挑戦できる。


ビオトープ論で用いているスプレッドシートに画像を表示させることができるようになった。
これを用いて花ごよみの製作を行った。
前回の復習から授業は始まったが,大半の学生はその方法を十分に理解していたようであった。

花ごよみ作成では各自はスプレッドシートを作成し,既製の花ごよみを基に撮影した植物の写真を用いながら
共有していくというものであったが,画像のコピーや既製の花ごよみのコピー,ペーストで躓いている学生が散見された。
一昨日,ヤギの鳴き声当てクイズを作成した。
作成はHTMLで行い,パノラマチャンネルからのリンクで飛べる。
音声は2種類用意し,聴き比べながら回答を行うことができるようにした。

IMG_0144.PNG

HTMLを利用することでクイズの出題形式の幅が広がる。

引き続きクイズ画面の作成を行った。

クイズの解答後の画面についてであるが,はじめにjavascriptを用いた表示を試みた。
以下はその例である。
array("解答", "BUTTON", 'javascript:aler t("正解です")')

この場合alertが表示されるが,その画面のままフリーズしてしまうことが判明した。
こちらの記事によるとバグによりフリーズが起きているという記述があるが詳細は不明。
javascriptによる表示方法の模索は今後も続けていく。

次にhtml画面への遷移を試みた。
正解,不正解の画面をhtmlで制作し,選択肢からその画面へのリンクを作るというものである。
それぞれのページを作り,それぞれへのリンクを貼った。
IMG_0131.PNG IMG_0133.PNG IMG_0134.PNG
以上のように作成することができた。
このように複数の選択肢による問題であればこの方法で対応できる。
音声や画像の比較問題なども視野に入れ,他の方法に関しても試行錯誤していく。

セミナー

| コメント(0) | トラックバック(0)
今週の動き
・戻るボタンの完成
・クイズ画面の作成(一部)
・ビオトープ論,準備と当日サポート

junaioのhelpdeskが非常に役立つことを知りました。今後も活用していきます。

来週の予定
・卒論題目の確定,レジュメ作成
・クイズ画面の完成
・ビオトープ論,準備と当日サポート
クイズ画面作成に着手した。

パノラマチャンネルにクイズ用のタグを設定した。
タグをタップすることでクイズ画面が表示される。
IMG_0231.png IMG_0496.png

この選択肢の画面はArrayを用いて作成した。

array(

   array("たけし", "Button1", ""),

   array("きよし", "Button2", ""),

   array("つよし", "Button3", ""),

) //buttons

と記述することで分岐させていくことができる。それぞれの回答への表示をこれから作っていく。
3年生とともにビオトープ論のお手伝いをした。

事前の準備としては
・貸出用iPhone5c(5台)の充電とアプリのインストール(junaio,google+)
・Androidでの写真投稿の方法の確認とマニュアルの訂正
であった。

受講者の約半数がAndroidユーザーであり,Android環境でのサポートも求められていると感じた。
屋外での写真撮影では植物の名前がわからないまま撮影していた学生が見られた。その後にネットで検索して記入していた模様である。
GPSの設定などは全員順調に行えたようで,画像に埋め込まれた緯度経度の精度が良くはないのでGooglemapから取得することを推奨した。

戻るボタンが完成。

福地さんからアドバイスをいただき,サンプルコードを変更しつつの試行錯誤を行った。
phpが画面のタグを定義,htmlが画像などの画面上の表示の定義,jsがリンクなどの動きを定義していることを学んだ。

この知識を基に,developer portalの記事を参考にボタンの設置を行った。

arel/index.html に <div class="yourclass" ontouchstart="changeChannel(this)"><img src="back.png" width="50px"></div>
と記述し,戻るボタンにタップによるチャンネルチェンジを定義させる。

次に logic.js に

function changeChannel(button)
{
arel.Scene.switchChannel(******);
}

(注:******はチャンネルのID)
と記述し,飛ぶチャンネルの番号を定義する。

このときindex.phpに
ArelXMLHelper::start(NULL,"arel/index.html","Orientation");
と定義し,arel/index.htmlを参照させることも忘れてはならない。

これらを用いて,戻るボタンが完成した。
IMG_5425.png
IMG_2998.png

Macに割り当てられているIPアドレスを用いて,Webserverにjunaioのファイルをおくことで
Mac上でのjunaioの作業ができるようになった。

画面共有を用いて作業する従来の方法と比べ,動作がスムーズであり,作業の効率化に大きくつながった。

セミナー追記

| コメント(0) | トラックバック(0)
5月中にひな形を作る。
ARを普通の先生が使えるレベルまでもっていく。

9月の中間発表の段階では,街中でだれでも教材を作れる環境を作らなくてはならない。

2週間以内に基本的なシステムの構築
8/1のOCではクイズラリーを使用する。そこで問題点を洗い出し,これを元に学外の取材へ。

クイズを正解した時,何を学ばせたいか どう評価するか。
基本システム作りを具体的にイメージする。

クイズは単一問題。正解するとキーワードを1つずつ表示し,全問正解で単語ができる。

ひきかえけん

卒論題目についてはいくつか考え,相談する。

5/9 セミナー

| コメント(0) | トラックバック(0)
今週の動き
・junaioチャンネルの問題点の改善(文字化け,強制通話問題)
・データベースの活用(ビオトープ論)の準備
・戻るボタン設置の試行錯誤,クイズ作成の方向性の確定

来週の予定
・ビオトープ論準備(AndroidでのGPS利用の検証,画像公開のマニュアル完成),当日のお手伝い
・戻るボタン完成,先生方への取材とクイズ作成
junaioのボタン設定について

junaioの開発ワークショップの資料にカメラボタンの設定についての手順が示されていた.
それによるとボタン設定にはlogic.jsの修正が必要とのこと。
arelの設定でopenWebsiteというものを発見したのでこれを用いることでチャンネルのリンクが作成できるのかもしれない。
これまでindex.htmlの修正のみを行っていたのでこれを応用して元のチャンネルに戻れる設定を行いたい。

また,クイズ作成の方向性については先生,福地さんに相談し
宮城教育大学リフレッシャー教育システムのブログに記載されているクイズを元に,環境研の先生方にお話をお伺いしながら作成していく方向性となった。
問題の正答などを調査し,先生方に取材して完成させていく。
本日データベースの活用の講義において,3年生とともに来週のビオトープ論の準備を行った。
先週の課題点であったWindowsでの画像URL表示であるが,Windows7においては画像の右クリックから画像URLのコピーが可能であった。
スプレッドシートへのURLのコピーの際は末尾に .jpg を追加しなくてもタグの画像が表示されることが確認された。(以前の検証では.jpgを追加しなければタグに画像は表示されなかった。環境の違い?)
写真の撮影にあたっては,GPS機能を用いることでその撮影場所の緯度経度を記録させることができる。画像に埋め込まれたその記録を用いてスプレッドシートに緯度経度を記入することができる。
ただし,その数値の精度が高くない(小数点3位まで)ので,補助的にGooglemapを用いて緯度経度を表示させることも必要となる場合もある。
GPS機能を用いた写真撮影は現段階ではiPad,iPhoneで行っており,Android端末での利用について来週までに検証していく必要がある。
また,画像の共有にはGoogle+のアプリを入手する必要があるため,来週の講義では受講者にアナウンスしていく必要がある。

来週までの課題
AndroidでのGPS機能を用いた写真撮影の方法
3年生が作成したものをもとに画像公開までのマニュアル完成
先週のセミナーでお話したタグの文字化け問題が解決しました。



福地さんのブログを参照させていただき,ARELLibraryのarel_xmlhelperの記述を以下のように修正した。
スクリーンショット 2014-05-06 17.09.29.png

その結果・・・
IMG_8094.png
無事日本語が表示された。

次なる課題は戻るボタン。

先週のセミナーでお話した電話発信問題が解決しました。

arel → logic_LBS2.js 内にある以下の記述
スクリーンショット 2014-05-04 14.08.10.png

var callPOI = arel.Scene.getObject("5");
これによりindex.php内にあるidが5のPOIを読み込んだ時に電話を発信する命令がされる模様。
ちなみに画面下部にある発信先の情報をコメントアウトしても発信されてしまったため,以上の記述を削除するか,あるいは5以外のidを使用すること(上記の場合)が解決策となる。

5/2 セミナー

| コメント(0) | トラックバック(0)
こんにちは

今週の動き
・先週撮影したパノラマ写真を用いたパノラマチャンネルの作成とタグ作成
・チャンネルの戻るボタンの作成
・「データベースの活用」のお手伝い

来週の予定
・パノラマチャンネルの問題点の洗い出しと改善(文字化け,強制通話など)
・学内のパノラマチャンネルの内容充実(説明文やクイズなど)
・戻るボタンの完成
・「データベースの活用」のお手伝い

皆様,良いGWを。
testチャンネルで元のチャンネルに戻るボタンの設置を行った。

チャンネルにボタンを表示させるために,index.htmlを用いてボタンを左上に表示させた。
IMG_0992.png

このボタンはフリー素材として配布されているものである。

以下のソースでボタンの位置を調整することができる。
{
position: absolute;
left: 0%;
top: 7%;
margin-top: -10%;
display: none;
}

ボタンの表示には<body>内に以下の記述を用いる。
<img src="back.png" width="50px" />

ここで元のチャンネルに戻るためのリンクを貼る。htmlなので記述する内容としては
<a href="junaio://channels/?id=******"><img src="back.png" width="50px" /></a> (******はチャンネルのID)
が適切である。
が,この記述だけでは動作しなかった。他の方法を模索する必要がある。
先週撮影したパノラマを用いてそれぞれのチャンネルを作成した。
スクリーンショット 2014-05-02 11.25.47.png

それぞれのタグからパノラマチャンネルに飛べるよう設定した。


実際に使用してみたところ文字化けが起きていた。
IMG_3346.png

ここでタグをタップすることでパノラマチャンネルに飛ぶことができる。
IMG_0310.png


しかし,一部のタグはタップした瞬間に自動的に海外に電話をかけてしまうものとなっていた。
Phone call poiはすべて削除したが,なぜこのような動作をしたのか検証していく必要がある。


木曜2コマ「データベースの活用」の授業のお手伝いをさせていただきました。

内容としては自分の撮影した写真を用いてjunaioのタグをつくるというもの。
方法として,スマホで撮影した写真をgoogle+を用いて一般公開し,そのURLや緯度経度を入力するというものであった。
画像のURLを表示させる場合にjpgの拡張子が表示されていない場合があるので,その場合は手打ちで入力することで使用することができる。
google+に公開した写真のURLは,Macでは右クリック→新しいタブで画像を開く で表示させることができたが
WindowsやiPadで画像のURLを表示させようとした際にはうまくいかなかったため,今後その方法を模索していくことが必要になる。
福地さんにご相談させていただいて解決した。

junaioのチャンネル作成画面のeditにおいて index.phpをindex,php と記述してしまいチャンネルが表示されなかった。
このエラーでは画面に謎の文字列が表示される。
このようなエラーはよくあることなので,十分に気をつける必要がある。
エラーの検証では,まずはphpやhtmlの確認,ARELの確認,そしてチャンネル作成画面,のように段階的な検証が肝要となる。

junaioのチャンネルは,画面内にエアタグなどを設置するindex.phpと画面構成をコントロールするindex.htmlの二層構造となっている。


このアーカイブについて

このページには、2014年5月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2014年4月です。

次のアーカイブは2014年6月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。