モブログの最近のブログ記事

きっかけはTwitterでのこのあたりのやりとりと、今お手伝いしているコンクール絡みのイベントがあるっていうことなんですが、Twitterに声で投稿できるかというテーマがあって、ちょっとやってみた。らくらくホンでTwitter(モバツイッター(以下モバツイ))を使って気づくあたりの話も含めて少し紹介したい。

Twitter / aok mto: .@fshin2000 伝言です。らくらくホンの音声「入力」にも対応してほしい。私自身は未経験なため、何も差し挟む余地はありませんです。土曜日に弱視の人の集まりで、聞きました。

Twitter / Junnama Noda: おそらく音声メールなのでユーザー毎にメール経由のポスト可能ならいけるのでは? http://bit.ly/9Eco70 RT @fshin2000: @pinpain そんな機能があるんですか。なんかブラウザベースだと難しそうな気もしなくもないけど...

Twitter / えふしん: @junnama @pinpain じゃぁ「メール投稿」でできますね。

イベントはこちら。2月24日開催です。

機種はF884i(らくらくホンプレミアム)。僕の記憶ではこの機能(音声メール)はオプションで月々210円。興味あったので申し込んでおいたのです。使ったのは今回が初めて。有料である理由は、変換を行うのをiアプリからASP経由で行うため。つまり、流石にこの携帯の中にそれだけの処理が出来るものが埋め込まれているわけれはなく、音声認識からテキスト化は外部のサーバーを使っているのです。

このあたりについては少し前の記事ですが下記のページに紹介記事があります。

音声入力中の画面

尚、当然ながらただ音声で入力するだけでなく、ウェブの読み上げから投稿操作までは音声ガイダンスを通じて出来ます。まったく画面を見ることなく僕にも投稿が行えました。

手順は下記の通り。

  • モバツイへアクセス
  • メール投稿
  • メール作成(題名入力状態)
  • 本文欄へ移動
  • [カメラボタン]でiアプリ起動
  • 決定ボタン
  • バイブが振動(または音声ガイダンス)
  • 声で入力(30秒以内)
  • iアプリがサーバーに通信してテキスト変換
  • 確認>確定
  • 続きがあれば再度[カメラボタン]でiアプリ起動
  • 内容確定後、送信

一連の動き? を音声ファイルにしましたのでアップします。

さて、感想等

「Twitter+モバツイ+らくらくホンが拓く新しい世界」なんていうタイトルを書いたわけですが、これやっぱり新しいコミュニケーションの世界なんだと思います。不思議な感じ。

実際僕が視力を失ってスクリーンリーダーのお世話になることを考えたらそれなりにかなり必死で取り組まなきゃならないと思うんですが、Twitterを使うだけなら実際自分で画面見ないでいけましたから。入力、確認といった煩わしさもなく、まさにTwitter的な世界観とでもいうのでしょうか。

昨日からの帰り道に練習がてらポストしてみたんですが、何ていうか電話で会話している感じ。タイムラインを読み上げて、アクセスキー[3]でメール投稿画面へ飛び(欲を言えばアクセスキー[3]でダイレクトにメールが立ち上がって欲しい。そうすればもっとシームレスに読み上げ>投稿へ移行できる)、そこから上記の手順でポストします。ひとこと程度のつぶやきなら30秒でいけるし、少し長いものは複数に分けて入れます。ただ、このあたりはいずれ技術が解決してくれると思う。

日常的に使うのであれば変換サーバーとのやりとりの待ち時間とかiアプリ起動の待ち時間とか気にならないわけじゃないですが、新しい可能性を十分に感じさせてくれます。

モバツイのアクセシビリティ

モバツイの[元]省エネモード、らくらくホンをも意識されたようなシンプルな表示モード、これで音声読み上げモードでは格段に使いやすくなります。理解もしやすいようにリンクのラベルも工夫されています。このあたりは仕方ないんだろうけど、慣れてくると少しラベルが冗長に感じられるようにはなりますが。慣れてしまうと「このつぶやきにリプライ@」→「リプライ」のほうがシンプルだし、上級者モードとかを作るのがいいのかもしれないですね。あるいは「ガイダンスモード」っていうのがあって、ガイダンスモードでは「このつぶやきにリプライ@」、通常モードでは「リプライ」とか。開発側の負担は間違いなく増えますが、こうなればもっと使い勝手が良くなると思います。

アクセシビリティ=アクセス出来ること、であれば冗長なラベルであってもクリアできてるわけですが、携帯電話、音声読み上げに最適化となれば、ラベルの長いのは少し気になります。

ただ、これはUA側で例えばa要素のtitleを読み上げるかどうか、とかいった実装が出来るようになれば解決する問題でもあります。アクセシビリティって結局最後はそういった話になるんだと僕は思います。

もう一点は既に書きましたがアクセスキー[3]でダイレクトにメールが立ち上がって欲しい。これはえふしんさんもそう感じてもらえたみたいだから、別に音声読み上げに限ったことじゃないですよね。

Twitterそのものが抱える(日本語環境での)アクセシビリティ

これはモバツイに関することじゃないんですが、一番読み上げていて気になるのは実は「ユーザー名」なんです。例えば「fshin2000さん」は、「えふえすえっちあい、にせんさん」です。「junnama」じゃ「じゅんなま」なんですが。英語圏なら名前が単語として登録されているケースが多いでしょうから読めると思うのですが、たとえば「にせんさん」てのは「2003」ともとれてしまうし(fshin2000さんすいません、特に取り上げた理由はないんですw)ユーザー名は本当にわかりにくいです。

ログイン名が表示されるのはTwitterの仕様だから、ここは「設定」画面の「名前」のほうを表示することで解決出来そうな気もします。但しTwitterは@ユーザー名っていうルールがあるので、つぶやきの本文の中にもユーザー名が頻繁に出てきます。とはいえ実際の読み上げ環境で利用しておられる方はさほど気にしておられないのかもしれませんが。とはいえ、絶対名前が日本語で扱えた方がわかりやすいと思う。これは絶対にそうだと思います。

それでもこれは新しい体験、新しい世界

例えばiモードブラウザのインプット要素やテキストエリアが同じく音声入力に対応してサーバーへの接続時間等の問題が解消されたら(またサイト制作者側がこういった用途を意識して構築を行えば)、あたらしい可能性が広がるんじゃないかって。そう思います。正直新鮮な体験でした。ケータイサイトやケータイWebサービスを構築している人には是非とも考えて欲しいテーマです。

それでは、次回はイベントでお会いしましょう。

関連エントリー

連続モノになってきた...

写真付きメール投稿に対応

画像の表示

やっぱり携帯からメールで写真とか送れなきゃやだ(ってかつまんないよな)ということで、メール投稿できるようにしました。メール投稿については以前に書いたものの焼き直しですが、設定が難しいとか動かん、とか色々指摘いただいていることもあって設定をより簡単にしました(~を含むファイル名問題にも対処済み)。

設定が簡単とはいえMIME::Parserが必要です。Perlモジュールのインストールさえできれば設定はより簡単になりました。


プラグイン設定

設定はブログ毎に行います。投稿専用のメールアドレスを1つ用意して「ブログ→プラグイン→MovaMotionの設定」で以下の情報を登録します(括弧内はデフォルト値)。

  • 投稿先メールアドレス
  • メールサーバー
  • アカウント
  • パスワード
  • プロトコル(pop3)
  • 添付ファイル保存先(<サイトパス>/files)
  • サムネイル幅(480)
  • 画像のマークアップ(<p class="image">,</p> - カンマで区切る)

ユーザー設定

続いて、ユーザーの設定画面で以下の情報を登録します。

  • 携帯メール(メール投稿のFromになるアドレス)
  • 秘密のフレーズ*

* ユーザーを識別するもので、何でも構いません(覚える必要もありません)。例えば送信先がfoobar@example.comだった場合、foobar+phrase@example.comがユーザーの投稿アドレスになります。Fromとこのフレーズによってユーザーを識別しますので、他人にバラさなければOK(あんまり長いと携帯によっては送信できないことがあります)。


メール投稿

メール投稿は「写真」クリックしてこの画面から行えます。mova-motion.cgiを設置しなくてもメール投稿は行えますが、メール送信後この画面の「すぐに反映」をクリックすることで送信したメール付きエントリーを即時に反映することができます(明示的にここから反映しなかった場合、run-periodic-tasks実行時に反映されます)。

投稿されたメールのタイトルがエントリーの「タイトル(entry_title)」、本文は「本文(entry_text)」、添付ファイルは指定したサイズのサムネイル(オリジナルへのリンク付きサムネイル)」のタグが(プラグイン設定で指定した「画像のマークアップ」を適用した上で)「追記(entry_text_more)」に登録されます。


設置方法:

plugins/MovaMotionを設置、mtディレクトリ直下にmova-motion.cgi設置して実行パーミッション与えてmova-motion.cgiにアクセスします。

ライセンス:

  • GPL v2

ダウンロード:

関連エントリー(続き)があります。

「携帯電話から使うMTベースのTwitter風マイクロブログ」の続きです。色々と拡張したので、少しカスタマイズ方法など紹介したいと思います。

携帯での表示

まず、PCとモバイルの両アクセスに対応するためにPCからのアクセスではCookieを使い、モバイルの場合はセッションIDを引っ張る仕様に変更しました。

その他少しテンプレートを修正した他(UserPicを表示させたりした)、UserAgent別の表示に対応するためにいくつかテンプレートタグを追加しました。

ということで、携帯(キャリア)/PC/iPhone等でテンプレートを切り替えることができます! (やってないけど)

また、裏? 機能として、ポストする際に(input name=またはtextarea name=)text,text_more,excerpt,keywordsを一緒に渡すとエントリーの本文,追記,概要,キーワードに保存されるようにしています。

テンプレート:

plugins/MovaMotion/tmpl/login.tmpl
ログイン画面のテンプレート。PCからのアクセスの場合はMTのログイン画面テンプレートが使われます。
plugins/MovaMotion/tmpl/redirect.tmpl
リダイレクタ(他のサイトへ移動するときのクッションページ)のテンプレート。
plugins/MovaMotion/tmpl/view.tmpl
その他の画面すべてで使われるテンプレート。基本的にMTEntryブロックタグのループなので、MTタグでカスタマイズできます。

ブロックタグ:

<MTMovaMotionBlogCtx>
blog_idパラメタで渡されたIDのブログのコンテクストをセットします。
<MTIfUserAgentIsiPhone>
iPhone/iPod touchからのアクセス時に真を返します。
<MTIfUserAgentIsDoCoMo>
DoCoMoからのアクセス時に真を返します。
<MTIfUserAgentIsSoftBank>
SoftBankからのアクセス時に真を返します。
<MTIfUserAgentIsAU>
AUからのアクセス時に真を返します。
<MTIfUserAgentIsMobile>
上記いずれからのアクセス時に真を返します。つまり、この中でのMTElseがPCからのアクセスということになります。

ファンクションタグ:

<$MTUserAgent$>
$app->get_header( 'User-Agent' )をそのまま返します(表示させる時にはescapeしてください)。
<$MTAccesskeyChar$>
num=n(0から9の数字)属性を付けると四角付き数字(絵文字)を出力します。

タグ属性:

url2link
URLをリンクにします。携帯端末の場合、リンクテキストをURLの先頭(35文字)にして、リダイレクタへのリンクに変換します。
reply2author
@から始まるユーザー名をユーザー別アーカイブへのリンクに変換します。

設置方法:

plugins/MovaMotionを設置、mtディレクトリ直下にmova-motion.cgi設置して実行パーミッション与えてmova-motion.cgiにアクセスします。

ライセンス:

  • GPL v2

ダウンロード:

5月23日追記:さらに改良しました。続編はこちら。

さらに続きがあります。

WebSig24/7 MT分科会(MovaMotion?)。 の時に2時間くらいでつくったものですが、何となく昨日今日と少しずつ触って何となく形にしました。結局MotionとかActionStreamとは直接関係のないものになりましたが名前はそのまま(MovaMotion)です。

制作期間5-6時間くらい。MTベースの(携帯)アプリの簡単なベースになるのではないかな?

これは何?

要するに「携帯電話から使うMTベースのTwitter風マイクロブログ」です。携帯でログインでき、複数ユーザーでのチャットのようなことが出来ます。

発言はmt_entryのタイトルとしてひたすら保存されます(保存時にエントリーとインデックスの再構築も行います)。「リプライ」の実体はMTの「タグ」です。ユーザーJunnamaへリプライすると(@ユーザー名とすると)そのエントリーに「junnama(小文字)」というタグを付けて保存します。

非常にシンプルな仕組みで、テンプレートは2つだけ(plugins/MovaMotion/tmpl直下の login.tmplとview.tmplだけ)。基本的にすべてMTタグで書かれているのでカスタマイズも簡単かと思います(誰か格好の良いテンプレートとCSS作ってください!)。

フォローやブロックの仕組みがないのとShift_JISへの変換とかは行っていないので(絵文字にも対応していませんし)あくまでも簡易なものですが、小規模なグループでの情報共有とかには使えるんじゃないかと思います(僕のように外出がちだったりすると重宝するかも)。

制限事項:ユーザー名は半角英数字のみに対応しています(リプライのところ)。

残りタスク

一応メモ。短縮URLを貼れるようにしようかと思います。そのままリンクだとセッション流出するのでリダイレクタかましてのリンクになると思いますが。

5月20日追記 : 短縮URLではないですが、URLを貼付けるとリンクにするようにしました。

スクリーンショット

以下、ブラウザでの見え方になりますが一応画面のキャプチャを貼っておきます。

ログイン画面

ログイン画面。機種IDを登録している場合「クイックログイン」でログイン可能。プルダウン(select)メニューではブログが選択できます。


ログイン後(トップ)

ログイン後のトップページ。「Motion」はブログの名前で、クリックでトップへ(accesskey=0)。

  • 「設定」=クイックログインの設定画面へ
  • 「ログアウト」=ログアウト(セッションの有効期限はMTのUserSessionTimeoutに従う)
  • ログアウトの右の「@junnama」となっているのは、自分へのリプライの一覧を表示
  • 文中の「@junnama」はその人のユーザーアーカイブを表示
  • [Re]でその発言へのリプライ

リプライ画面

[Re]をクリックしたときの画面(ユーザーが全部junnamaだからややこしいけど)。Twitterと同じく@+ユーザー名でその人へのリプライとなる。複数ユーザーへのリプライも可能。


設定画面

[設定]をクリックした時の画面。[機器IDの登録]で、携帯IDを登録します。


追記

自動リンク

URLを貼付けたところ。


リダイレクタ

URLをクリック。そのまま移動またはGoogle Mobile Gatewayを経由して移動ができます。


設置方法:

plugins/MovaMotionを設置、mtディレクトリ直下にmova-motion.cgi設置して実行パーミッション与えてmova-motion.cgiにアクセスします。

ライセンス:

  • GPL v2

ダウンロード:

ハッカソン。

| コメント(0) | トラックバック(0)

はくばん

SixApartさんにおじゃましてます。

ウェブ制作 - アルファサード(アクセシビリティ, MovableType ,モバイル)

WebSigには絶対間に合わせようと思っていた自社サイトのリニューアル。概ね評判は良いようで。というより、「らしくない!」「意外!」「絶句!」というか、僕のことを知っている人ほど「ありえねー」な感想をもらしておられた。ザマーミロ(笑)。「ありえねー」のが狙いだったのです。

まだ一部は作りかけだけど...モバイル版を作りました。MTのBootstrapアプリとプラグイン、Cron実行用のスクリプトのセット。かなり大規模なもの。MT4が出たおかげで対応の時間がかかったけれども、まぁ基本セットアップは丸一日あれば大丈夫な感じ。ただMT4から「ページ」と「エントリー」があるので、モブログも「ブログ」から「サイト」へ移行する使い方をしなければならない。やはりパッケージ化は難しいかもしれない。MT4の場合特に使い方が多様化されるから。

QRコード
http://alfasado.net/mobile/

Movable Type で高機能モブログを

ということで、パッケージ提供は当分無理かもしれませんが、モバイル版作成サービスを始めます。構築・運用のコンサルティングからデザイン・実装まで。

Movable Typeベースで作られているウェブサイトのモバイル版作成サービスを承ります。

当社のサイトではMovable Type (MT) 向けに開発した当社オリジナルのモバイルサイト拡張プログラムを利用しています(このブログでももう一つのブログでも使っています)。このプログラムをベースにお客さま向けに導入とカスタマイズを行います。

  • 携帯用に別途ページやエントリーを作成しなくても同一データから携帯版を作成。
  • 長いページのページ分割や画像の外部リンク化、画像のサムネイル自動生成が可能。
  • 携帯電話から画像付きのエントリーの投稿、エントリーの修正、再構築、コメント / トラックバックの承認・返信が可能。
  • 携帯電話からの投稿に外部サービスを利用する必要はありません。
  • コメント機能、トラックバック機能、検索に対応。
  • 別途PC用サイト構築やホスティングも対応します。
  • MT3 / MT4の両バージョンに対応しています。

画像付きエントリーの投稿も外部サービスを介さずに

携帯電話からの画像付き投稿を行う際、従来は外部サービスを使うのが一般的でした。このブログのシステムは、投稿専用のメールアドレスに投稿されたメールデータをこのサーバーからPOPで取得しに行くため、外部サービスを介する必要がありません。

また投稿可能な携帯電話のアドレスの事前登録とともに、メールに一定時間有効なパスワードを含めるしくみとか、携帯電話から投稿したデータは「下書き」状態になる等 (公開はMTの管理画面若しくは携帯用のオリジナル管理画面から行う) セキュリティ対策も考慮しています。

動作環境

本システムの動作にはUnix系のサーバーが必要です。またいくつかのPerlモジュールを必要とするため、サーバーにモジュールをインストールする権限が必要です。詳細はお問合わせください。

台風一過。

| コメント(0) | トラックバック(0)

青空

祭りの風景

晴れてら。

1日遅れの祭りの準備も着々と。

最終電車はN700系。

| コメント(0) | トラックバック(0)

フロントフェイス

グリーン車の車内

ひじ掛けにコンセント

喫煙ルームの灰皿

21時20分東京発。ダイヤ改正で2分遅くなった。
わざわざ先頭まで行って写真撮るおっさん多数(俺のことね)。

エクスプレスカードのポイント使ってグリーン車に。

喫煙車がなくなって、喫煙ルームに。これが狭い。

テーブルは広い。コンセントはちょっと分かりにくかったがひじ掛けのところに。

仕事するには申し分ないが、今日は仕事しません。

では、「ほんのり屋」のおにぎりをたべながらビールをプシッとね。お先に!?

赤坂「かおたん」。

| コメント(0) | トラックバック(0)

かおたんの塩ラーメン。

担々麺が美味いが、今日は塩。
ピンぼけしてるな。スーパーウルトラ手ぶれ補正付きやのに〜。

世界遺産「姫路城」。

| コメント(0) | トラックバック(0)

天守閣

扇の勾配

鯱

このアーカイブについて

このページには、過去に書かれたブログ記事のうちモブログカテゴリに属しているものが含まれています。

前のカテゴリはプログラミングです。

次のカテゴリは書評などです。

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