iPhoneとPCでメモを共有できるWebアプリ作成

iPhoneとPCのデータ同期を手軽に行えるMobileMeですが、残念ながらメモに対応していません。AppStoreも毎日眺めてますが、なかなか満足のいく同期機能付きメモソフトが出てきません。

そこで、当座しのぎとして簡単なASP型メモシステムを作ってみました。単なるPHP + RDBMSを使ったテキスト保存ページなので、iPhoneが圏外の時はアクセスできませんが…

iPhone専用っぽいUI部品やCSSを使って、外観をネイティブアプリっぽく仕上げたのがポイントです。

 

トップページ

トップページ。リストで見えてるのはカテゴリ一覧です。

右上が新規作成ボタン、左上が検索ボタンです。


メモ一覧 

カテゴリを選んで、メモ一覧に遷移したところ。

この画面から新規作成を押した場合、デフォルトで当該カテゴリが選ばれてる、とかいう細かいとこまで作り込みました(^^;)。


閲覧画面

閲覧画面。

PalmやiPhoneの内蔵メモなんかだと、いきなり編集状態になるのが普通なんですが、textareaに入れてしまうとスクロールが大変、というiPhone特有の問題を考慮して、とりあえずフォームにせず全文を表示する閲覧モードを設けることにしました。

写真には映ってないですが、下の方に編集と削除ボタンがあります。実は編集ボタンを押さずとも、textarea自体を触っても編集モードに移行できます。

電話番号、URLは自動的にリンクになります。


編集画面

編集画面。

こっちがtexeareaを使ったフォームです。

閲覧画面と間違えにくいよう、背景色を微妙に変えています。

widthを微妙に調整して、閲覧画面と折り返し位置が同じになるようしてみましたが、完璧にはなりませんでした(画面だと、一番下の行は折り返し位置がズレてます)。

下の方にカテゴリ選択メニューと保存、取り消し(保存しないで戻る)ボタンがあります。

編集中にページを閉じたりSafariを終了しようとした場合にも保存を促すようにしたいなと思っています。

検索画面

検索ページ。

全文検索ができます。


PCで見たところ

PC用のページをOpera9.5で表示させたところ。


Windows Home Server Power Pack1、ようやく登場

待望のPower Pack 1が登場しました。>Windows Home Server

日本語リソースは含まれなかったっぽいですが、お目当ての64bit版クライアントはバッチリ入ってました。第1四半期に登場予定だったので、春に仕事用マシンを64bit、しかもRAID-0で組んでしまってたのが、ようやくバックアップできます。いやぁ、今まで何事もなくて良かった(^^;)。

他にもパフォーマンスや省電力面の改善やリモートアクセスの向上なども含まれている様子。目に見えにくい改良が多いですが、とにかく嬉しい限りです。

さっそく導入。64bitマシンにも問題なくクライアント入りました。これから初回バックアップかけます。

リモートアクセスはなにが変わったんでしょうね?後で出先からログインしてみます。

組み込み済みハードが売られていない日本ではさっぱり話題になりませんが、個人的には非常に重宝しています。既に何度も助けられました。マシン毎にバックアップ時間帯を決められないのが不便ですが(夜中に寝室マシンが起きるとこっちまで目が覚めてしまう)、もはや手放せないソリューションです。

rep2をiPhone/iPod touch向けに改変

iPhone/iPod touchのSafariでrep2のケータイ用ページを開くと、初期倍率が小さめで文字が極小になってしまいます。

2chのiPhoneスレで、

20 :名称未設定 :2008/07/14(月) 04:18:41 (p)ID:ivqRmU3q0(7)
使う気あるならこれを。
rep2(モバイル表示用ファイル)の修正点。
menu_k.php、/lib/index_print_k.inc.php、/lib/read_header_k.inc.php、/lib/sb_header_k.inc.php
にある<head>の下に
<style type="text/css">
<!–
body { font-size:50px; }
–>
</style>

という書き込みを発見。これだと横向き状態で文字が大きすぎたり、他のCSS対応のデバイスでの表示にも影響しそう。

そこで、<style>~</style>の代わりに、iPhone/iPod touch専用のmetaタグ記述で、初期倍率を指定してみました。

<meta name="viewport" content="initial-scale=1.00">

これならiPhone/iPod touch以外のデバイスでは無視されるだけで影響もないはず。

before after
対策前 対策後

 

P.S.

ちなみに、iPhoneで画面写真を撮るには、電源ボタンを押しながらHomeボタン、でいいようです。

iPhoneとAsteriskの留守電転送

Asteriskは録音した留守電メッセージを音声ファイルとして添付してメールで送ることができます。試しにMobileMeアドレスに送信する設定に変更してみたんですが、iPhoneでばっちり再生できました。メールを開くと添付ファイルアイコンが出ており、それをタップすると即座に再生されます。E61だともう少し手間がかかったんですが、随分楽になりました。

ちなみにフォーマットはWAVにしてます。デカそうなイメージですが、レートが低いので、7秒で12.5KB程度です。

Softbankが提供している留守電サービス(ビジュアルボイスメール)同様、オンラインの時に受信しておいてくれるので、例えば地下鉄で移動中にヒマでケータイ開いてみたら不在着信に気付いた、なんて時、圏外でも聞くことができるので便利です。ただし、音声ファイルとしての再生なので、スピーカーから鳴ってしまうのが難点です。音楽用にイヤフォンつけてればいいんですが、そうでなければ周りに聞かれてしまうので困りますね。

TrackMeのWebインターフェイスを日本語化、バグ修正

EMONSTER等のGPS内蔵WindowMobile端末向けにTrackMeというアプリケーションがあります。端末内でGPSログを保存することはもちろん、リアルタイムでサーバーに位置情報を送信することもできます。このサーバー用のPHPスクリプトも上記ページで公開されており、自前のサーバーで運用することもできます。自動リロードで常に端末の現在位置をGoogleMapsで表示するモードなどもあり、サイバーです。バックエンドにMySQLを利用しており、テーブル構成などをのぞけば、色々と応用が広がりそうです。

■日本語ランゲージ定義の追加

で、そのスクリプトによるWeb画面はマルチランゲージ対応されているのですが、残念ながら日本語の設定はありません。中を覗いてみたところ、定義ルーチンが独立していて簡単に追加できそうだったのでサクっと作業してみました。下記の2ファイルを更新すれば使えるようになると思います。

一応、開発者の人に送ってみるつもりですが、自前でパッチ当てしたい人向けに貼っておきます。

index.php (818行目辺りに赤字部分を追加)

$html .= "                        <select name=\"language\">\n";
$html .= "                            <option value=\"english\""; if($language == "english") { $html .= " SELECTED"; } $html .= ">English</option>\n";
$html .= "                            <option value=\"italian\""; if($language == "italian") { $html .= " SELECTED"; } $html .= ">Italian</option>\n"; //trackmeIT
$html .= "                            <option value=\"german\""; if($language == "german") { $html .= " SELECTED"; } $html .= ">German</option>\n";
$html .= "                            <option value=\"spanish\""; if($language == "spanish") { $html .= "SELECTED"; } $html .= ">Spanish</option>\n";
$html .= "                            <option value=\"french\""; if($language == "french") { $html .= "SELECTED"; } $html .= ">French</option>\n";
$html .= "                            <option value=\"dutch\""; if($language == "dutch") { $html .= "SELECTED"; } $html .= ">Dutch</option>\n";
$html .= "                            <option value=\"japanese\""; if($language == "japanese") { $html .= "SELECTED"; } $html .= ">Japanese</option>\n";
$html .= "                        </select>$display_language_text<br>\n";
$html .= "                        <select name=\"units\">\n";
$html .= "                            <option value=\"imperial\""; if($units == "imperial") { $html .= " SELECTED"; } $html .= ">Imperial</option>\n";
$html .= "                            <option value=\"metric\""; if($units == "metric") { $html .= " SELECTED"; } $html .= ">Metric</option>\n";
$html .= "                        </select> $display_units_text<br>\n";

language.php (356行目辺りに赤字部分を追加)

(↑ 他の言語定義が並んでいる部分 Italian Language Data)
       $speed_metric_unit_balloon_text      = "km/h";
       $distance_metric_unit_balloon_text   = "chilometri";
       $height_metric_unit_balloon_text     = "metri"; 
     }
   elseif($language == "japanese")
    {
        $title_text                          = "TrackMe Display";
        $trip_button_text                    = "軌跡表示";
        $location_button_text                = "リアルタイム更新ON";
        $location_button_text_off            = "リアルタイム更新OFF";
        $filter_button_text                  = "更新";
        $filter_none_text                    = "全て表示";
        $filter_photo_comment_text           = "写真、コメント付きポイントのみ";
        $filter_photo_text                   = "写真付きポイントのみ";
        $filter_comment_text                 = "コメント付きポイントのみ";
 
       $filter_last_20                      = "最新20ポイントのみ";
        $filter_daterange                    = "日時範囲指定";
        $footer_text                         = "軌跡データ生成:";
        $incomplete_install_text             = "インストールが正しく終了しませんでした。ファイルinstall.php、database.sqlはまだTrackMeフォルダに存在します。これらを削除するまで地図表示は有効になりません。";
        $no_data_text                        = "DB内の1つ以上のTrackMe テーブルにデータがありませんY。Windows MobileデバイスでTrackMeアプリケーションを実行し、軌跡データを生成する必要があります。";
        $database_fail_text                  = "DBとの接続が切断され、表示が中断されました。";
        $trip_none_text                      = "なし";
        $trip_any_text                       = "全て";
        $display_options_title_text          = "表示オプション";
        $display_header_text                     = "ヘッダーを表示";
        $display_showbearing_text                = "方向矢印を表示";
        $display_crosshair_text              = "中心の十字マークを表示";
        $display_clickcenter_text            = "クリックした位置を中心にする";
        $display_overview_text               = "ミニマップを表示";
        $display_language_text               = "表示言語を選択";
        $display_units_text                  = "表示単位を選択";
        $display_button_text                 = "設定を保存"; 
        $startdate_text                                          = "開始:"; 
        $enddate_text                                            = "終了:"; 
        $trip_title                                                      = "Trip:"; 
        $filter_title                                            = "フィルタ:"; 
        $date_title                                                      = "日付:";
        $tripsummary_title                                       = "Trip 概要";
        $tripstatus_title                                        = "現在位置";
        $summary_time                                            = "トータル時間:";
        $summary_photos                                          = "写真数:";
        $summary_comments                                        = "コメント数:";
        // Public Display Information
        $user_button_text                    = "ユーザ切替";
        $showconfig_button_text                          = "設定";
&#
160;       $showconfig_button_text_off                      = "設定";
        // Private Display Information
        $page_private                                        = "ページの表示にはユーザ名とパスワードのよる認証が必要です。";//trackmeIT
        $trip_data                                                   = "ユーザ名:"; //trackmeIT
        $login_text                          = "ユーザ名";
        $password_text                       = "パスワード";
        $login_button_text                   = "ログイン"; 

        // Balloon Fields Information
        $user_balloon_text                   = "ユーザ";
        $trip_balloon_text                   = "Trip";
        $time_balloon_text                   = "時間";
        $speed_balloon_text                  = "速度";
        $altitude_balloon_text               = "高度";
        $total_time_balloon_text             = "累積時間";
        $avg_speed_balloon_text              = "平均速度";
        $total_distance_balloon_text         = "移動距離";
        $point_balloon_text                  = "ポイント";
        $comment_balloon_text                = "コメント";
        $speed_imperial_unit_balloon_text    = "mph";
        $distance_imperial_unit_balloon_text = "miles";
        $height_imperial_unit_balloon_text   = "feet";
        $speed_metric_unit_balloon_text      = "km/h";
        $distance_metric_unit_balloon_text   = "km";
        $height_metric_unit_balloon_text     = "m";
    }
    else
    {

(↓ 以降、デフォルトの英語表記のデータ Defaults English Data)

 

■ユーザ選択がリセットするバグの修正

リアルタイム表示のON/OFFをすると、ユーザ選択がリセットされてしま現象が出たので、場当たり的対応してみました。

index.php (305行目辺りの赤字部分を追加)

$html .= "                      function livetrack()\n";
$html .= "                      {\n";
$html .= "                              if(document.getElementById(\"last_location\").value == \"$location_button_text\")\n";
$html .= "                              {\n";
$html .= "                                      location=\"index.php?ID=$ID&last_location=yes\";\n";
//$html .= "                                            document.getElementById(\"last_location\").value = \"$location_button_text_off\";\n";
$html .= "                              }\n";
$html .= "                              else\n";
$html .= "                              {\n";
$html .= "                                      location=\"index.php?ID=$ID\";\n";
//$html .= "                                            document.getElementById(\"last_location\").value = \"$location_button_text\";\n";
$html .= "         &
#160;                    }\n";
$html .= "                      }\n";