event

Posted by muchag | Google Maps JavaScript API V3 | 2011-07-22 (金) 22:21:39

Google マップに対してユーザがことを起こすと
event オブジェクトが生成される。

Google Code:Google Maps JavaScript API V3 のイベント

種類
  • 状態変化イベント
  • ユーザイベント

API クラス毎に様々なイベントが用意されている。

Google Code:Google Maps JavaScript API V3 リファレンス
 

受け取り

addListener(instance:Object, eventName:string, handler:Function)

Google Code:Google Maps JavaScript API V3 リファレンス MapsEventListener オブジェクトの仕様

第1引数:イベントを受け取るオブジェクト
第2引数:イベント名称
第3引数:イベント処理メソッド
 

  1. /* Map オブジェクトの zoom 値が変更されるイベント */
  2. google.maps.event.addListener(map, 'zoom_changed', function() {
  3.     setTimeout(moveToDarwin, 3000);
  4. });
  5.  
  6. /* Marker オブジェクトが click されるイベント */
  7. google.maps.event.addListener(marker, 'click', function() {
  8.     map.setZoom(8);
  9. });

 

プロパティ
latLng

イベントが発生した位置のカーソルの緯度/経度。

  1. /* Map オブジェクトの zoom 値が変更されるイベント */
  2. google.maps.event.addListener(map, 'click', function(event) {
  3.     var latlng = event.latLng; /* ← クリックされた場所の緯度・経度 */
  4. });
  5.  
  6. /* Marker オブジェクトが click されるイベント */
  7. google.maps.event.addListener(marker, 'click', function(event) {
  8.     var latlng = event.latLng; /* ← クリックされたマーカーの緯度・経度 */
  9. });

 
他にも event オブジェクトのプロパティはあるらしいのだが
ブラウザ依存だそうで、ブラウザによって異なる。

そのため使い辛いようだ。

よって、上述の latLng プロパティですら

  1. var latlng = event.latLng;
  2.  
  3. とはせずに
  4.  
  5. var latlng = this.getPosition();

という記述を奨める記事があった。
おやじプログラマー日記:「GoogleMap API V3」 の使い方その4(イベント)

Google Maps JavaScript API V3 | 2011-07-22 (金) 22:21:39 |

マーカーとバルーン

Posted by muchag | Google Maps JavaScript API V3 | 2011-07-22 (金) 10:36:41

クロージャ・・・何となく使えるようになった思っていたのは
気のせいだったらしい。

何度もやり直した。
まだまだまだまだだ。

新しい記事

infoWindow 複数配置
けど、こっちが不要かどうかは未精査。

1個設置
  1. function initialize() {
  2.  
  3.     /* マップ */
  4.     var myOptions = {
  5.         zoom: 5,
  6.         center: new google.maps.LatLng(35, 139), // 適当
  7.         mapTypeId: google.maps.MapTypeId.ROADMAP
  8.     }
  9.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  10.  
  11.     /* マーカー */
  12.     var marker = new google.maps.Marker({
  13.         position: new google.maps.LatLng(35.362873, 138.731567),
  14.         map: map,
  15.     });
  16.  
  17.     /* バルーン */
  18.     var infowindow = new google.maps.InfoWindow({
  19.         content: "富士山"
  20.     });
  21.     infowindow.open(marker.getMap(), marker);
  22. }

 

 

クリックイベント

上の例だと最初からバルーンが表示されているので
マーカーをクリックしたらバルーンが表示されるタイプに改変。
 

  1. function initialize() {
  2.  
  3.     /* マップ */
  4.     var myOptions = {
  5.         zoom: 5,
  6.         center: new google.maps.LatLng(35, 139), // 適当
  7.         mapTypeId: google.maps.MapTypeId.ROADMAP
  8.     }
  9.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  10.  
  11.     /* マーカー */
  12.     var marker = new google.maps.Marker({
  13.         position: new google.maps.LatLng(35.362873, 138.731567),
  14.         map: map,
  15.     });
  16.  
  17.     /* バルーン */
  18. -   var infowindow = new google.maps.InfoWindow({
  19. -       content: "富士山"
  20. -   });
  21. -   infowindow.open(marker.getMap(), marker);
  22.  
  23. +   google.maps.event.addListener(marker, 'click', function(event) {
  24. +       var infowindow = new google.maps.InfoWindow({
  25. +           content: "富士山"
  26. +       });
  27. +       infowindow.open(marker.getMap(), marker);
  28. +   });
  29. }

 

複数設置

問題はここから。

マーカーを複数設置するのは問題なし。

でも、そのマーカーのクリックイベントリスナーを
前述の例の如く設定すると、どこをクリックしても
最後のマーカーが反応してしまう。

そこでイベントリスナーは関数にして
外へ出す。
 

  1. function initialize()
  2. {
  3.     /* マップ */
  4.     var myOptions = {
  5.         zoom: 5,
  6.         center: new google.maps.LatLng(35, 139), // 適当
  7.         mapTypeId: google.maps.MapTypeId.ROADMAP
  8.     }
  9.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  10.  
  11.     var data = new Array();
  12.     data.push({lat: 35.362873, lng: 138.731567, content: "富士山"});
  13.     data.push({lat: 34.295929, lng: 132.319870, content: "厳島神社"});
  14.     data.push({lat: 43.366375, lng: 142.340302, content: "ラベンダーの森"});
  15.  
  16.     for (var i = 0; i < data.length; i++) {
  17.  
  18.         /* マーカー */
  19.         var marker = new google.maps.Marker({
  20.             position: new google.maps.LatLng(data[i].lat, data[i].lng),
  21.             map: map,
  22.         });
  23.  
  24.         /* バルーン */
  25.         var htmlContent = "<dl><dt>" + data[i].content + "</dt><dd></dd></dl>";
  26.         attachMarkerClickEvent(marker, htmlContent);
  27.     }
  28. }
  29.  
  30. function attachMarkerClickEvent(marker, htmlContent)
  31. {
  32.     google.maps.event.addListener(marker, 'click', function(event) {
  33.  
  34.         var infowindow = new google.maps.InfoWindow({
  35.             content: htmlContent
  36.         });
  37.         infowindow.open(marker.getMap(), marker);
  38.     });
  39. }


これで無事に複数のマーカーとそれぞれのバルーンを設置できた。
 

バルーンの制御

しかし、このままだとバルーンが同時にいくつも表示されるし
1つのマーカーでもクリックするたびに同じ位置に新たにバルーンが表示されてしまうので
その辺を改良。
 

  1. +var currentInfoWindow = null;   /* 現在開いているバルーン格納変数 */
  2.  
  3. function initialize()
  4. {
  5.     /* マップ */
  6.     var myOptions = {
  7.         zoom: 5,
  8.         center: new google.maps.LatLng(35, 139), // 適当
  9.         mapTypeId: google.maps.MapTypeId.ROADMAP
  10.     }
  11.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  12.  
  13.     var data = new Array();
  14.     data.push({lat: 35.362873, lng: 138.731567, content: "富士山"});
  15.     data.push({lat: 34.295929, lng: 132.319870, content: "厳島神社"});
  16.     data.push({lat: 43.366375, lng: 142.340302, content: "ラベンダーの森"});
  17.  
  18.     for (var i = 0; i < data.length; i++) {
  19.  
  20.         /* マーカー */
  21.         var marker = new google.maps.Marker({
  22.             position: new google.maps.LatLng(data[i].lat, data[i].lng),
  23.             map: map,
  24.         });
  25.  
  26.         /* バルーン */
  27.         var htmlContent = "<dl><dt>" + data[i].content + "</dt><dd></dd></dl>";
  28.         attachMarkerClickEvent(marker, htmlContent);
  29.     }
  30. }
  31.  
  32. function attachMarkerClickEvent(marker, htmlContent) {
  33.     google.maps.event.addListener(marker, 'click', function(event) {
  34.  
  35. +       if (currentInfoWindow) currentInfoWindow.close();
  36.  
  37.         var infowindow = new google.maps.InfoWindow({
  38.             content: htmlContent
  39.         });
  40.         infowindow.open(marker.getMap(), marker);
  41.  
  42. +       currentInfoWindow = infowindow;
  43.     });
  44. }

 

1行目

1行目で、現在開いているバルーンを格納する変数を定義。
 

35行目

35行目で、現在開いているバルーンがあれば
まず閉じる。
 

42行目

42行目で新たに開いたバルーンを変数へ格納。
 

参考元サイト

なんちゃって☆めも:複数のgoogle.maps.Markerに吹き出しをつける
Google Maps 活用講座:Maps API v3でv2のように、1つだけの情報ウィンドウが開くようにする(1)

Google Maps JavaScript API V3 | 2011-07-22 (金) 10:36:41 |

Fusion Tables -> マイマップからの移行 CSV 編

Posted by muchag | Excel VBA,Fution Tabels | 2011-07-17 (日) 22:35:23

Fusion Tables -> マイマップからの移行 KML 編

CSV

テキストファイル。

前回の記事で書いた Google マップの KML ファイルを
CSV 形式に変換して Excel で編集して
Fusion Tables に取り込むことができる。
 

KML の問題点

前回の記事に書いたけど
KML ファイルでマイマップの情報を Fusion Tables に移行させると
今まで付けてきたマーカーが、1種類に変換されてしまう。

そこで、KML ファイルからマーカーの情報を取り出して
ちゃんとテーブルから反映させるために
CSV 形式にて移行することにした。
 

変換作業

KML ファイルは XML 形式なので
CSV 形式にするには一手間必要。

そこで、その手間を Excel に担当してもらうことにした。
 

KML ファイルの取得

マイマップの KML ファイルの取得方法は
Fusion Tables -> マイマップからの移行 KML 編
参照。
 

CSV に変換

自作 Excel VBA マクロを用いる。
KML2CSV_0.0.2.xls

以前、WordPress プラグイン QuickTags 用の マクロ を公開したが
今回も、いつも情報やらライブラリやらをいただいてばかりの私のちっさな恩返しとして、
こんな私の稚拙なマクロでも役に立つ奇跡を祈りつつ公開してみる。
 

利用上の注意
  • このマクロを利用して何か問題・損害が発生しても私は一切関知しません
  • 必ず「自己責任」でどうぞ
  • 私が必要とする狭い利用例を元に製作してあるので、機能が足りないとか誤変換とかの可能性は大
  • Fusion Tables は、現在 Beta 版なので仕様変更の可能性は大。そうしたら使えなくなる可能性は極大

KML2CSV_0.0.2.zip (40,600byte)

Windows XP Pro SP3 & Excel 2003 VAB にて作成および動作確認。
Google Fusion Tables (Beta) にて動作確認。
2011-07-17 現在。
文字コードは UTF-8 。

【更新履歴】
v 0.0.2 2011-07-17
バグフィクス。

v 0.0.1 2011-07-17
新規作成。

 

完全自動変換


 

1.「KML => CSV 自動変換」ボタンをクリック(上図参照)

 

2..kml ファイルを選択する

 

3._auto.csv ファイルが .kml ファイルと同じディレクトリに保存される

 

テーブル手動編集

1.「KML ファイル読み込み」ボタンをクリック(上図参照)
CSV シートの初期化

CSV シートに残っている
前回の作業結果をクリアする。

もちろん初めて利用される方にはもんだいありませんが、
綺麗サッパリなくなるので、
2回目以降の方で不安な場合は、シートをコピーしておいてください。

 

マイマップから DL した .kml ファイルを指定

 

CSV シートに読み込まれる


これを読み込むとこうなる。

タグの除去

description カラムについて
独断と偏見により不要と思われるタグ系文字列を除去してあります。

あくまでも私の環境で不要と感じただけなので
もし、必要だと感じられる方がおられたらすみません・・・。
 

2.「CSV」シートを自身で編集
1行目はフィールド(カラム)名

マイマップから取得した .kml ファイルの項目を
私が勝手にカスタマイズして上図のように次のようなカラム名を付けてある。

  1. name タイトル部
  2. icon マーカー名称
  3. geometry ポイントの緯度・経度
  4. description 詳細テキストエリア内のテキスト

第4カラムの description のみ改行に合わせて
次々とセル分割して入れてある。

これを用途に合わせて変更する。

左図例では
description の代わりに
zip, phone, content
としている。

 
この例では、データが少ないのですんなりいくが
多い場合はカラムとデータがズレズレになるので
面倒でも編集する・・・orz
 

セル内改行

今回の例に合わせると
歌詞は1つのセルにまとめたい。
でも、表示するときは改行を入れたい。

そういうときは、Alt + Enter でセル内改行を利用する。

こうしておけば、本番でも1つの項目内で改行される。

 

3.「CSV ファイル保存」ボタンをクリック(上図参照)

KML ファイルと同じディレクトリに
ファイル名_manual.csv
という名前で保存される。

前述の例を変換するとこうなる。

  1. "name","icon","geometry","zip","phone","content"
  2. "富士山","volcano","<Point><coordinates>138.731567,35.362873,0.000000</coordinates></Point>","123-4567","0120-xxxx-xxxx","頭を雲の上に出し<br />四方の山を見下ろして<br />雷様を下に聞く<br />富士は日本一の山"
  3. "厳島神社","picnic","<Point><coordinates>132.319870,34.295929,0.000000</coordinates></Point>","","",""
  4. "ラベンダーの森","tree","<Point><coordinates>142.340302,43.366375,0.000000</coordinates></Point>","","",""

 
タグが入っている場合
属性値を囲む (ダブルクォーテーション)は
Fusion Tables 読み込み用に二重に書き換えられる。
 

アップロード

Google Fusion Tabels にアクセスして
左ペインの [New tables]-[Import table]

 
ブラウザによってちょっと表示が変わるが
(左図は Google Chrome)
ファイル選択ボタンから

 
先ほど作成した
ファイル名_manual.csv
を選択する。

 
今回作成した CSV ファイルは
カンマ区切り
UTF-8
なので、変更の必要なし。

「Next」

 
「Next」

 
「Next」

 
インポート成功!

 

マップ表示

マップを見るには
[Visualize]-[Map]

 
[Configure styles]

 
① Column タブをクリック

② Use icon specified in a column をチェック

③ ドロップダウンから icon を選択

④ save をクリック

 
元通りのアイコンでマイマップが表示された♪

Excel VBA,Fution Tabels | 2011-07-17 (日) 22:35:23 |

Fusion Tables -> マイマップからの移行 KML 編

Posted by muchag | Fution Tabels | 2011-07-17 (日) 19:58:25
マイマップ

とっても便利な マイマップ

Google のサービスで
ただでさえ便利な Google マップ を自分専用にカスタマイズできる
っていうので、初めて触ったときには大いに感動したなぁ。
 

サービス内容の変更

でも、Google はこのサービスの提示手法を変更しようとしているようで
現在は「マイマップ」は「マイプレイス」に組み込まれた。
 

マイマップの難点

ところで、システム好きの私が
マイマップで唯一困っていたのが
書く度に書式がバラバラになること。

ポイントの説明がテキストエリアだったのが原因。
 

Fusion Tables への移行

この問題が Fusion Tables と連携させることで解消できることがわかったのと
Android からマイマップを利用するには
どうやら Fusion Tables を介さないとだめらしいので
Fusion Tables に移行してみることにした。
 

KML

移行手法は色々とあるみたいだけど
今回は KML 編。

KML というのは、地図上の情報を
XML 形式で文字列に表したもの。
Google Code:KML リファレンス
 

具体的な移行作業
KML ファイルの取得

Google マップ にアクセスして
「マイプレイス」をクリック。

 
一覧から当該マップをクリック。

 
当該マップが開いたら「KML」をクリック。

 
そうすると当該マップの KML ファイル(今回は test.kml )を DL できる。

 

Fusion Tables へインポート

Google Fusion Tabels にアクセスして
左ペインの [New tables]-[Import table]

 
ブラウザによってちょっと表示が変わるが
(左図は Google Chrome)
ファイル選択ボタンから

 
当該ファイルを選択する。

今回の例では test.kml 。

 
元の画面に戻るので
当該ファイルが選択されたことを確認して
「Next」

 
基本的には何せずに「Next」

 
はい!
無事に Fusion Tables にテーブルが読み込まれ完了。

 

マップ表示

マップを見るには
[Visualize]-[Map]

 
マップ表示当初は
Data may still be loading.
Drag or refresh the page to find out.
となっているので、何かする・・・。

 
試しにホイールで1段階引き画面にした結果が左図。

マイマップでポイントしていた3箇所にマーカーがちゃんと付いているのがわかる。

 

問題点

細かいことは抜きにしてポイントマーカーがデフォルトの赤丸に統一されている。
あんなに色々とマーカーしてたのにぃぃぃぃ。

現在の Fusion Tables は Beta 版なので仕方ないのかも。
本サービスでは、上手く移行できることに期待。

なんて、ノンビリしたことはやめて
他の手法を試してみる。
Fusion Tables -> マイマップからの移行 CSV 編
 

中身

ちなみに KML ファイルの中身は・・・。
 
例えば左図のようなマイマップがあるとする。

 
上例マイマップの KML ファイルは以下のようになる。

test.kml
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <kml xmlns="http://earth.google.com/kml/2.2">
  3. <Document>
  4.   <name>test</name>
  5.   <description><![CDATA[]]></description>
  6.   <Style id="style1">
  7.     <IconStyle>
  8.       <Icon>
  9.         <href>http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/volcano.png</href>
  10.       </Icon>
  11.     </IconStyle>
  12.   </Style>
  13.   <Style id="style3">
  14.     <IconStyle>
  15.       <Icon>
  16.         <href>http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/picnic.png</href>
  17.       </Icon>
  18.     </IconStyle>
  19.   </Style>
  20.   <Style id="style2">
  21.     <IconStyle>
  22.       <Icon>
  23.         <href>http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/tree.png</href>
  24.       </Icon>
  25.     </IconStyle>
  26.   </Style>
  27.   <Placemark>
  28.     <name>富士山</name>
  29.     <description><![CDATA[<div dir="ltr">123-4567<br>0120-xxxx-xxxx<br>頭を雲の上に出し<br>四方の山を見下ろして<br>雷様を下に聞く<br>富士は日本一の山</div>]]></description>
  30.     <styleUrl>#style1</styleUrl>
  31.     <Point>
  32.       <coordinates>138.731567,35.362873,0.000000</coordinates>
  33.     </Point>
  34.   </Placemark>
  35.   <Placemark>
  36.     <name>厳島神社</name>
  37.     <description><![CDATA[]]></description>
  38.     <styleUrl>#style3</styleUrl>
  39.     <Point>
  40.       <coordinates>132.319870,34.295929,0.000000</coordinates>
  41.     </Point>
  42.   </Placemark>
  43.   <Placemark>
  44.     <name>ラベンダーの森</name>
  45.     <description><![CDATA[]]></description>
  46.     <styleUrl>#style2</styleUrl>
  47.     <Point>
  48.       <coordinates>142.340302,43.366375,0.000000</coordinates>
  49.     </Point>
  50.   </Placemark>
  51. </Document>
  52. </kml>
Fution Tabels | 2011-07-17 (日) 19:58:25 |

Fusion Tables

Posted by muchag | Fution Tabels | 2011-07-17 (日) 19:00:26

Google が提供しているサービスの1つ。

無料のデータベースだと思えばいいのかしら。

まだほとんど使っていないので詳細は不明だけど
データテーブルを作っておけば
そこからチャートにできたりなんだりするみたい。

Google Fusion Tabels
2011-07-17 現在、Beta 版。

当然ながらアカウント依存。
 

Top
All items

当該アカウントに登録されている全てのテーブル。

 

Owned by me
Shared with me

共に字面から想像はつくけど、試してないのでまた今度。
 

Trash

これもまんま。
ゴミ箱。

Windows と同じで、テーブルを普通に削除した場合は
この「Trash」に移される。

よって、完全の削除するためには
Trash 画面で再度削除すること。
 

Public tables

公開設定されいる他人のテーブル一覧。

この前の大震災のとき「避難所一覧」とか「計画停電」とか
あちこちで情報が出ていて、どこから情報を引っ張っているのかと思っていたけど
なるほど、こういうところから引っ張った人もいるのね~。

 

マップ連携

Fusion Tables -> マイマップからの移行 KML 編
Fusion Tables -> マイマップからの移行 CSV 編

Fution Tabels | 2011-07-17 (日) 19:00:26 |

Welcart

Posted by muchag | Library & PlugIn & AddIn,WordPress | 2011-07-16 (土) 13:48:44

DL &インストール
DL

Welcart 公式 のヘッダバナー
あるいは ダウンロード より DL 。

2011-07-16 現在、ヴァージョン 1.0.4
usc-e-shop.1.0.4.zip

Library & PlugIn & AddIn,WordPress | 2011-07-16 (土) 13:48:44 |

Web サイトを表示する

Posted by muchag | Android | 2011-07-15 (金) 0:40:19

Android アプリの中で Web サイトを表示する手法。

【環境】
[Android SDK Tools] revision 12
[API Level] 4
[デバッグ実機] Xperia arc
AndroidManifest.xml
AndroidManifest.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     package="com.sample"
  5.     android:versionCode="1"
  6.     android:versionName="1.0">
  7.  
  8.     <uses-sdk android:minSdkVersion="4" />
  9.  
  10.     <application android:icon="@drawable/icon" android:label="@string/app_name">
  11.         <activity android:name=".WebTestActivity"
  12.                   android:label="@string/app_name">
  13.             <intent-filter>
  14.                 <action android:name="android.intent.action.MAIN" />
  15.                 <category android:name="android.intent.category.LAUNCHER" />
  16.             </intent-filter>
  17.         </activity>
  18.  
  19.     </application>
  20.  
  21. +   <uses-permission android:name="android.permission.INTERNET"></uses-permission>
  22. </manifest>

 

XML ファイルを利用する場合
WebTest.java
  1. package com.sample;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.webkit.WebView;
  6. import android.webkit.WebViewClient;
  7.  
  8. public class WebTestActivity extends Activity {
  9.     /** Called when the activity is first created. */
  10.     @Override
  11.     public void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.         setContentView(R.layout.main);
  14.  
  15. +       WebView webview = (WebView)findViewById(R.id.myWebView);
  16. +       webview.loadUrl("http://www.example.com/test.php");
  17.     }
  18. }
main.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent"
  6.     >
  7.  
  8. +   <WebView android:id="@+id/myWebView"
  9. +       android:layout_width="fill_parent"
  10. +       android:layout_height="fill_parent"
  11. +       />
  12. </LinearLayout>

 

XML ファイルを利用しない場合
  1. package com.sample;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.webkit.WebView;
  6. import android.webkit.WebViewClient;
  7.  
  8. public class WebTestActivity extends Activity {
  9.     /** Called when the activity is first created. */
  10.     @Override
  11.     public void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.  
  14. +       WebView webview = new WebView(this);
  15. +       webview.loadUrl("http://www.yahoo.co.jp");
  16. +       setContentView(webview);
  17.     }
  18. }

 

WebViewClient

Android Developers:WebViewClient

何も勉強してないので、正しい用途はわからないけど
名前からして「ブラウザ」のような役割をするのかしら。

まぁ、事実実験結果もそんな感じだった。
 

WebViewClient なし

前述のサンプルコードは WebViewClient なし。
 
先ずアクティビティが起動して
(←マッチロだけど画像あり)

 
それからブラウザが起動するような動き。

左の画面では最初のうち読み込みプログレスバーも出る。

「戻る」ボタンで、元の真っ白なアクティビティに戻る。

 

WebViewClient あり
  1. package com.sample;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.webkit.WebView;
  6. import android.webkit.WebViewClient;
  7.  
  8. public class WebTestActivity extends Activity {
  9.     /** Called when the activity is first created. */
  10.     @Override
  11.     public void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.  
  14.         WebView webview = new WebView(this);
  15. +       webview.setWebViewClient(new WebViewClient());
  16.         webview.loadUrl("http://www.yahoo.co.jp");
  17.         setContentView(webview);
  18.     }
  19. }

 
起動と同時に Web サイトが表示される。

 

差異

2段階 or 1段階以外にも、JavaScript の有効無効の差も出ている。

タイトルバー

「WebViewClient なし」では、Yahoo の表示画面にタイトルバーがないことを見ても
Web サイトを表示している画面では、既にアプリの手を離れているようだ。
 

JavaScript

私の実機「Xperia arc」の「ブラウザ」は
「JavaScript を有効」にしているので
「WebViewClient なし」では JavaScript に関するコメントは出ていない。

JavaScript を有効にするには

  1. webview.getSettings().setJavaScriptEnabled(true);

参考元サイト:Webブラウザビューチュートリアル

Android | 2011-07-15 (金) 0:40:19 |

Web サイト表示エラー

Posted by muchag | Android | 2011-07-14 (木) 10:23:54

Android で Web ページを表示しようとした際に起きたエラー。

サッパリ意味不明・・・。

【環境】
[Android SDK Tools] revision 12
[API Level] 4
[デバッグ実機] Xperia arc
症状
test.html
  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>test</title>
  6. </head>
  7.  
  8. <body>
  9. test
  10. </body>
  11. </html>

このコードのファイルを表示しようとしただけなのだが
 

This page contains the following erros:
error on line 1 at column 2: StartTag: invalid element name
Below is a rendering of the page up to the first error.

というエラーメッセージが実機上に表示された。
 

模索
解読

内容だけ読むと
「1行目2文字目がおかしいよ」
「そんな名前のタグは知らないねぇ」
だと思うのだが。

1行目の2文字目って ! ・・・。
 

グーグル先生

グーグル先生に聞いても、ASP.net の話題が多く
さすがの先生も歯切れが悪い。

それでもせっかくの情報なので ASP.net の解決法などを読みながら
あれこれ試してみたけど、サッパリ。
 

解決?
正常ページとの比較

それでも、既存のちゃんと表示されているページと見比べてみて
あれこれ試すこと1時間。

ん?
え?
まさか?

前述のコードのファイル名は「test.html」
既存のちゃんと表示されるページのファイル名は「index.php」
・・・。
 

解決?

藁にもすがる思いで
ファイル名を「test.php」にしてみると
何とちゃんと表示された。

なんじゃこりゃ~!!!

これが本当に解決なのかどうかは不明だけど
一応メモ。

Android | 2011-07-14 (木) 10:23:54 |

リンク集

Posted by muchag | Android | 2011-07-13 (水) 13:46:27

Android 開発に関するリンク集のメモ。

もとまか日記Z:私が参考にしたAndroidアプリ開発情報をまとめてみました

Android | 2011-07-13 (水) 13:46:27 |

インストール

Posted by muchag | EC-CUBE,XAMPP | 2011-07-11 (月) 17:55:19

今回はお試しなので
ひとまず XAMPP にインストールして使ってみることにした。

【環境】
[XAMPP] 1.7.3
[EC-CUBE] 2.11.1
XAMPP 関連

XAMPP 関連は こちら

 

DB
選択

EC-CUBE では、DB は、PostgreSQLMySQL か選択できる。

ただ、開発自体は PostgreSQL で行われているそうで
PostgreSQL を利用する方がエラーが少ないそうだ。

それを聞いて私も PostgreSQL に挑戦してみたが
残念ながら上手くいかなかったので、今回は MySQL にて利用することにした。
 

MySQL

EC-CUBE 用のデータベースを1つ作成する。
名称は任意。
 
照合順序を utf8_general_ci にすることを忘れずに。
 

DL

EC-CUBE の公式サイト EC-CUBE ダウンロード より
正式版 .zip ファイルを DL 。

2011-07-11 現在、ヴァージョンは 2.11.1 。
eccube-2.11.1.zip
 

インストール

解凍して出てきたフォルダ「eccube-2.11.1」を
htdocs 直下に eccube とリネームして配置。

http://localhost/eccube/html/install/
にアクセス。
 

 

 

 

 
ここで「DB の種類」にて MySQL を選択。

MySQL の場合、ポートは空欄でOK。

「DB 名」は先ほど設定した名称。

「DB ユーザ」と「DB パスワード」は
新しく設定するのではなく、いつも接続に利用しているもの。

 

 

 

 

 

問題が発生したため、Apache HTTP Server を終了します。
ご不便をおかけして申し訳ありません。

エラー署名
szAppName : httpd.exe szAppVer : 2.2.14.0 szModName : php5ts.dll
szModVer : 5.3.1.0 offset : 00082bba

 
ここまで進めて、次へ行こうとしたら
左のようなエラーメッセージが出た。

それでもこの先進めるのだが
ページ移動をする度にこのエラーメッセージが出る。

直し方不明・・・。

 

EC-CUBE,XAMPP | 2011-07-11 (月) 17:55:19 |
次ページへ »