高速起動なお天気ソフトが欲しいなぁ
iPod touchで、天気の確認を行う時、今まで高速起動だった「そら案内」を使っていました。
が、for iOSになって、妙に起動が遅くなったような感じ。
ちょっくら、他の お天気ソフトを入れて、ストップウオッチで測ってみました。
(確認は、iPod touch の2ndです。上位の世代なら、もっと速くなるだろうし、明日には速くなっているかも知れませんので参考値として考えてください)
アプリ名 | 起動時間 |
---|---|
そら案内 for iOS | 15秒程度 |
ピンポイント天気 | 5秒程度 |
ウェザーニュース タッチ | 6秒程度 |
tenki.jp | 3秒程度 |
デフォルトの天気予報 | 3秒程度 |
ちなみに私の気持ちは、高機能は、どうでも良いねん。朝の忙しい時に見るんだから、今日明日の天気が「今スグ」知りたい。です。
(高機能だが遅いアプリは、端っこの片隅に突っ込んで、必要な時に呼び出すぐらい。たぶん、箪笥の肥やし程度ですが)
2011/06/16 追記
現時点の決定版というか、tenki.jpが一番良いです。
起動が早いし、設定内容を覚えてくれるし、表示される内容は必要十分だし、iPodのようなネットが切れた環境でもデータをキャッシュしてくれるし。
他の天気アプリは、全部消してしまいました。
パソコン購入
空気読めてないですが、嬉しかったので。すみません。
やったよ。
YouTubeで動画を見るつど、CPUが100%に貼りついたままの生活から、ようやく脱しました!
何年越しだろう?Pentium4 2.6GHzという、今だったら無料でも引き取ってくれないようなマシンですからね。
今月頭に、D○LLのWeb siteを眺めていたら、「週末特価!」とか書いてあったので、サポセンのお姉さんにTELして、「このマシン、BugFix版のSandy Bridgeですか?」と聞いたら、「はい、そうです。」→そのまま衝動買いに入ってしまいました。
K付きとかが良いなぁ。とか思ったりもしましたが、10万ちょっとで、今までと比べ物にならない高性能なマシンが手に入るのだから良し。
買い物をガイドしてくれたお姉さんの話だと、「月末になるかも」とか言ってたけど、さすがDE○L、2週かからずに来ましたよ。
おかげさまで、この休みは、現行マシンからの環境移動&構築ばかりしてました。
ちょっと「むっ」としたのは、宅配業者の「佐○急便」かな。
荷物2箱あるのを、家族に1個渡してそのまま帰ってやんの。
夜遅く 家帰って、伝票見つつ「他に受け取って無かった?」と言ったら、「1個だけ」というし、おかしいな?と思いつつサポセンに掛けたら、暫くして「すみません。明日で良いですか?」との事。
次の日、持ってきてもらったからOKなんですが、「すみません」だけで何の説明も無かった模様(仕事行ってたので詳細は知らない)。
自分には直接関係無かったけど、前に 宅配の運ちゃんが 荷物を路上に投げ捨てて帰った事例を直に見ているので、冷や冷やしましたよ。
閑話休題
のろけ話ばかりしていても、意味が無いので、少し技術的な話を。
今回、チップセットの修正版がB3なんですが、ちゃんと直っているか?の確認ですが、多分、CPU-Zの「Motherboard」タブの値で確認できると思います。
試しにチェックしてみた例。
最初、CPUの情報。ちゃんとCorei7です。
1 posted by (C)wacky
次、Motherboardの情報。Southbridgeのrev.値がB3なので、これで合っていると思います。
とりあえず、一安心かな。
2 posted by (C)wacky
cpuidで読み取り可能なブランド文字列は、「 Intel(R) Core(TM) i7-2600 CPU @ 3.40GHz」。
Performance Monitor Ver.3で、rsmsr 0x1ADで読み取り可能なTurbo Boost最大周波数は、コア1:3800MHz, コア2:3700MHz, コア3:3600MHz, コア4:3500MHzといった具合です。
ちなみに、最大周波数は参考値っぽくて、オレオレチェッカー(ひよひよさんのWinRing0を活用)だと、適当に負荷を掛けた時、以下の周波数が取れています。
CPU0 freq=3699.96193055988MHz CPU1 freq=3589.50359913995MHz CPU2 freq=3621.29170663902MHz CPU3 freq=3570.62542089371MHz CPU4 freq=3751.557912622MHz CPU5 freq=3639.277327238MHz CPU6 freq=3715.15504868304MHz CPU7 freq=3594.52350453596MHz
ちなみに、負荷を掛ける前の周波数値は、↓こんな感じ。
CPU0 freq=1974.48633721141MHz CPU1 freq=1804.84905499017MHz CPU2 freq=2075.29659562845MHz CPU3 freq=1833.25453943208MHz CPU4 freq=2197.65433757048MHz CPU5 freq=1914.3955000627MHz CPU6 freq=2166.73057197718MHz CPU7 freq=1821.80037579001MHz
そうそう、Windows7に最初に引っ付いてくるガジェットの「CPUメーター」は、TurboBoostの計測値じゃなくて、OSの負荷なので、お間違えなきよう。
(IntelのWeb siteに、Turbo Boostのゲージガジェットがあったような…)
移行中の感想
今回新マシンを購入して、現行マシン(XP)から移行する際の感想をば。
(感動が薄れる前に、メモメモ)
- Google Chromeの個人設定の同期は便利。というか、ネット上にデータ置くのなら、利便性を上げてもらわないと、使う気が起きない。
(ただし、プラグインは、同期されない。まぁ、仕方無いか) - Google Chromeの例を見ると、常用としている Sleipnirも、設定がネットになると便利かなぁ。と思ってしまう。
Win7になったせいか、同じデザインに設定しているのに、アドレスバーの拡張メニューの出し方が変わっていて、半日も費やしてしまった。
ぶぅぶぅ文句を言いつつも、これを使い続けるのは、セキュリティ切り替えがしやすいから なんですけどね。 - Windows7で、やけにバカでかいアイコンだよなぁ。と思っていたが、ディスプレイが高解像になっているので、これで丁度良いのだと気づいた。
XP時代が1280x1024で、Win7が1920x1080かつデュアルですしね。(といいつつ、幾つかはアイコンを小さくして画面を広くしようとしている私) - 購入した際のキーボードが、やけに使いにくかったので、家電で別のキーボードを買ってきてしまった。
なんつーか、クリックが浅すぎなのと(PV-7かよ!?)、傾斜が無さすぎ。さらにHome, Endあたりのボタン配列が3x2じゃなくて、2x3なのが気に食わない。
ちなみに、家電屋で物色したのですが、千円くらいの安物の方が、相対的に良かった。orz - 作動音は確実に小さくなっている。
現行のは、夜中布団を被らないと、ちと五月蝿かったが、これなら大丈夫かな。<蛍光灯の「ジー」音の方が五月蝿いくらい。 - 64bit Windowsという事で、どれだけのアプリが動かなくなるかドキドキしているが、今の所大丈夫かな〜。
- TortoiseSVN 64bit版も万事順調。現行マシンから持ってきたリポジトリへの「Relocate」すれば普通に使える。
といいつつ、アプリケーションのバックアップをとろうとして、「Program Files」下のフォルダに対して CheckIn / CheckOutしようとして、少し引っかかりましたけどね。<これは、64bitでなく、Windows7のUACの話。 - 同梱アプリとして、McAfee Security Centerが入っていたけど、除外指定が出来ないので、使い物にならない。(ついでに、フォーカスするポップアップ五月蝿い)。すぐに、Nortonさんに切り替えてしまいました。
↑試供版とはいえ、期限付きなんだからフル実装のを付ければよいのに。と思ってしまいます。大抵の人は期限が切れたら延長しようとするのだから、機能制限なんぞ付けるより、使い勝手の良いものを提供した方が、続けて使ってくれる確立が高いと思う。 - Win7になって、動画デコーダを別途入れなくても、主要な動画を再生してくれる感動にひたっております。しかも、DXVA効いているし。(だよな。OS負荷全然上がってないし)
以上。
オレオレ専用のはてぶWebアプリを作る
前回、ローカルアプリケーションキャッシュ機能を使って、Xmarksに替わる、オレ専用のブックマークWebアプリを作る - ふにゃるんを作った訳ですね。
それから更に調子に乗って、オレオレ専用のはてぶWebアプリを作ってみました。
何で作ろうと思ったか
iPodというかiPhoneには、元々はてぶアプリがあるんですが、出来るのはブックマークかWebブラウジングのみ。
iPodのはてぶアプリで、ブックマークしようとすると、以下の問題に突き当たります。
- 無線LANといえど、パソコンでWebブラウズする方が視認性が良いし速い。
(現在の所、iPodのWebブラウズは補助的に使っている状態。未だにメインはパソコンなんですね) - ブックマークする際、タグをiPodで打ち込むのは、恐ろしい苦行なり。
(ブラインドタッチに慣れているので、思考と入力が一致しないのは、恐ろしく不便) - パソコンでは、オレ専用のブックマークアプリを使って楽しているから、そっちで使いたい。
(P4Dで、はてレジ(はてなブックマークを登録するツール)を作ってみました - ふにゃるんのことです) - iPhoneなら常時ネット接続だが、iPodなので、常時ネット接続じゃないので、オフライン重視じゃないと困る。
(オフラインサポートしていないニュース系アプリは即行削除行きだったり。:-P)
以上の理由と、手にした技術で遊んでみたいという強い欲求から、オレオレ専用な はてぶWebアプリを作ってみた次第です。
参考にしたWebサイト
今回参考にしたWebサイトは、以下の通りです。
- jQuery 日本語リファレンス
http://semooh.jp/jquery/ - jQuery Mobile | jQuery Mobile
http://jquerymobile.com/ - [jQuery Mobile] - すにぺっと
http://d.hatena.ne.jp/sy-2010/searchdiary?word=%2A%5BjQuery%20Mobile%5D - Web Storage の残容量を調べてみた - latest log
http://d.hatena.ne.jp/uupaa/20100106/1262781846 - localStorageの挙動と簡単なラッパー - but hopeful
http://d.hatena.ne.jp/Jxck/20100821/1282412125 - JavaScript: 外部RSS読み込み by “Google Ajax Feeds API” | t.p.fields - web+tech info
http://tpfields.xrea.jp/javascript/load-external-rss-by-javascript-google-ajax-feeds-api.html - JavaScriptでmailtoを起動する場合 « for WEB屋
http://www.4web8.com/224.html - (v)sprintf | jQuery Plugins
http://plugins.jquery.com/project/printf
使っている技術
参考にしたWebサイトでもわかる通り、今回使用した技術は、大体こんな感じです。
- jQuery Mobile
- 前回は jQtouchでしたが、今回はjQuery Mobileです。
採用に特に意味は無く、一応本命と言われているので 試してみたくなっただけです。 - Google Ajax Feeds API
- 今回、外部ドメインのRSSデータを取得する必要がありまして、普通はCGIか何か置いて、CGIから外部ドメインのRSSデータを取得したりするのがセオリーっぽかったんですが。
まぁ、これでも良いかな。と。 - HTML5のローカルストレージ
- ローカルに永続的にデータを格納できる技術として、ローカルストレージ技術とSQLを用いた技術があるようなんですが、今回は楽っぽい(キーバリューでOKなんですもん)ローカルストレージにしました。
ソースコード
てけとーではありますが、ソースコードを晒します。
<!DOCTYPE html> <html manifest="test_hatebu.manifest"> <meta charset="UTF-8" /> <title>はてぶホットエントリをチェキ</title> <link rel="stylesheet" href="lib/jquery.mobile-1.0a3.min.css" /> <script src="lib/jquery-1.5.min.js"></script> <script src="lib/js_sprintf.js"></script> <script src="https://www.google.com/jsapi?key=$ここに取得したキーを入れて" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> function make_entry(feed){ console.log("make_entry=%d", feed.entries.length); var ary = jQuery.map(feed.entries, function(n, i){ var s = $.sprintf( "<div class='ui-bar ui-bar-b'> \ %(no)d: %(title)s \ </div> \ <div> \ <div data-role='controlgroup' data-inline='true' align='right' data-type='horizontal'> \ <input type='checkbox' name='chk' id='chk-%(no)d' value='%(url)s'/> \ <label for='chk-%(no)d' data-icon='start'>後で</label> \ <span> </span> \ <a href='%(url)s' data-role='button' data-icon='arrow-r' target='_blank'>URL</a> \ </div> \ <p>%(content)s</p> \ </div>", { no: i+1, url: n.link, title: n.title, content: n.contentSnippet, detail: n.content }); return s; }); $("#rss").append(ary.join()); } function load_entry() { console.log("load_entry"); var feed_url = "http://b.hatena.ne.jp/hotentry.rss"; var feed_content = null; try{ console.log("no local storage[%s]", feed_url); var feed = new google.feeds.Feed(feed_url); feed.setNumEntries(100) feed.load(function(result) { feed_content = JSON.stringify(result.feed); localStorage[feed_url] = feed_content; }); console.log("set local storage!!"); }catch(e){ console.log("sorry fail fetch:" + feed_url); } if(feed_content == null){ feed_content = localStorage[feed_url]; } var feed = JSON.parse(feed_content); make_entry(feed); } try{ google.load("feeds", "1"); }catch(e){ console.log("fail google.load"); } //google.setOnLoadCallback(load_entry); </script> <script type="text/javascript" charset="utf-8"> console.log("custom script code!!"); // 設定の為の初期化 $(document).bind("mobileinit", function(){ console.log("mobileinit"); }); // 普通の初期化 $(function(){ console.log("function!!"); var clickTrigger = ($.support.touch)? "tap": "click"; $("#call-mail").bind(clickTrigger, function(){ //$("[name='select']:checked").each(function(){ var chks = $(":checked").map(function(){ return this.value; }).get(); //alert("checkbox:" + chks.join(",")); if(chks.length > 0){ s = "subject=" + "after_check!!" + "&body=" + chks.join("\n"); location.href = "mailto:$メアドを入れて?" + encodeURI(s); } return false; }); }); $('#main').live('pagebeforecreate',function(event){ console.log("pagebeforecreate"); // ページを作成する前に、はてぶエントリーを生成する // でないと、スマートフォンな外観にならないから load_entry(); }); $('#main').live('pagecreate',function(event){ console.log("pagecreate"); }); console.log("end of script tag"); </script> <script src="lib/jquery.mobile-1.0a3.min.js"></script> </head> <body> <!-- Start of first page --> <div data-role="page" id="main"> <div data-role="header" data-theme='d'> <h1>はてぶホットエントリ</h1> <a id="call-mail" href="#" class='ui-btn-right'>to メール</a> </div> <div data-role="content"> <div id="rss"></div> </div> <div data-role="footer" data-theme='a' align='center'> <span>end of document </span> <a id="call-mail" href="#">to メール</a> </div> </div> </body> </html>
あと、ローカルWeb化する為に、test_hatebu.manifest ファイルを同じフォルダに突っ込んでおきましょう。
CACHE MANIFEST # rev1 CACHE: lib/jquery.mobile-1.0a3.min.css lib/jquery.mobile-1.0a3.min.js lib/jquery-1.5.min.js lib/js_sprintf.js lib/images/ajax-loader.png lib/images/form-check-off.png lib/images/form-check-on.png lib/images/form-radio-off.png lib/images/form-radio-on.png lib/images/icon-search-black.png lib/images/icons-18-black.png lib/images/icons-18-white.png lib/images/icons-36-black.png lib/images/icons-36-white.png
なお、lib/js_sprintf.js ファイルは、jQuery pluginの http://plugins.jquery.com/project/printf からゲットしたコードを置いています。
動かしてみる
WWWサーバーに適当に放り込んだファイルを、iPodのSafariから参照すると、以下の画面が出て来ます。
(機内モードで、ちゃんと動いているのが判りますか?)
基本的に、「後で」にチェックを付けまくって、ヘッダもしくはフッタにある、「to メール」ボタンを押すと、チェックを付けたURLがメールの本文に適用される。
といった流れです。
一応オマケとして、「URL」ボタンを押すと、はてぶエントリのWebページに飛んでいきます。
例えば、2つほど、エントリに対して「後で」をチェックします。
ここで、「to メール」ボタンを押すと、メーラーが起動して、チェックしたURLが本文に適用されます。
後は、メールするだけです。
簡単ですね。
ちなみに、1回目の読み込みで、エントリのWeb作成に反映せず、2回目以降で成功したりするバグを抱えています。
が、とりあえず動いたので晒すという暴虐。
最後に
全体的に文字がバカでか過ぎるので、もちっとコンパクトにしたいなぁ。と思っています。特に、「後で」「URL」ボタンのデカさと言ったら…。ふぅ。
しかし、今回で2つですが、テキトーでも、それらしくアプリケーションのように振舞うWebソフトが出来るなんて、HTML5って便利な技術ですね。
ここまで便利に動くとなると、いわゆるガラケーと呼ばれる既存の携帯も、HTML5をサポートすれば良いのに。と、思ってしまいますね。
Flash Liteがあるので、もっと高度な遊びが出来るのは判りますが、HTML5は更に技術の敷居が低いので、開発者の裾野が広がると思うんですがねぇ。
(ハードをスマートフォン化するより、手っ取り早いと思うんだけどなぁ)
Xmarksに替わる、オレ専用のブックマークWebアプリを作る
要するに何をやりたかったかと言うと、↓こういう事です。
- パソコンで溜めたブックマークを、iPod touch(iPhoneじゃない所に哀愁を感じて!)でカウチポテトしながら見たい。
- ブックマーク同期として Xmarks を使ってみたが、一々ログインしなければならないし、階層を降りるのに時間が掛かるし、オフラインの時にリストも見られない(iPod touchの悲しさ)、後 ブックマークが昇順になっていないのも気に喰わない。
- 幾つかの非標準Web browserは、Webの保存機能を持っているようだから、自分でブックマークリストなHTMLを作って、それを保存して使いこなせば良いんじゃね?
- 更に調べていたら、HTML5のオフラインアプリケーション機能(mobile Safariに実装済み)を使えば、HTMLをキャッシュしておいてオフラインでも使えるらしい。
- 早速、PythonでブックマークをHTML化して、オフラインでもリストが見られるように、ローカルWebアプリ化してみたよ。<今ココ
資料
今回、色々回り道を繰り返していましたが、参考にしたURLです。
- HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた − Publickey
http://www.publickey1.jp/blog/11/html5ipodiphone.html
@ITのこの記事で、「ローカルWebアプリ」が紹介されていたのですが、上の記事を読むまで 自分のやろうとしている事に転用できると、全然気づきませんでした。
(だって、その後のページで、ネイティブアプリの作成の話に行ってるんだもん)
次、ローカルWebアプリ化に際して、iPhone/iPod touchのユーザーインタフェースをWebで再現する為のライブラリ検討として、以下を参考にしました。
- iPhone用サイト制作の為のフレームワークを分類してみた » TECH Matari
http://tech.ironhearts.com/blog/archives/464
幾つかライブラリをダウンロードして、添付されていたデモを iPod touchで見て、今回は jQTouch にしました。
採用理由は、以下のものです。
- 特にライブラリ本体を弄らなくても、iPhone/iPod touchのユーザーインタフェースになる。
- 今回は階層を掘っていくイメージの為、1ファイルを複数ページに見せかける jQTouch が 動作が軽くなりそうだし、簡易だと思った。
- サンプルコードが、結構判り易かった。
ソースコード
試行錯誤したままですが、ソースです。
整理もしていないので、かなり汚いです。すんません。
(しかも、デモコードから切り貼りをしていたりします)
#!/bin/env python # -*- encoding: cp932 -*- """ IEの「お気に入り」を、iPhone/iPod touch向けのHTMLに変換する。 HTML化のベースは、jQTouch を使っている。 """ import sys import os import csv import pdb import codecs import ConfigParser import time def html_before(title): return """ <!doctype html> <html manifest="fav.manifest"> <head> <meta charset="UTF-8" /> <title>%s</title> <style type="text/css" media="screen">@import "./jqtouch.min.css";</style> <style type="text/css" media="screen">@import "./theme.min.css";</style> <script src="./jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="./jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> <script src="./jqt.autotitles.js" type="application/x-javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var jQT = new $.jQTouch({ icon: 'jqtouch.png', addGlossToIcon: false, startupScreen: 'jqt_startup.png', statusBar: 'black', preloadImages: [ './img/back_button.png', './img/back_button_clicked.png', './img/button_clicked.png', './img/grayButton.png', './img/whiteButton.png', './img/loading.gif' ] }); </script> </head> <body>""" % title def html_after(): return """ </body> </html>""" def str_normal(s): if s.isalnum() == True: return s.replace(".", "_") else: ss = "" for c in s: ss += "%d" % ord(c) #print ss return ss def get_ini_url(fpath): #print "ini file:%s" % fpath cfg = ConfigParser.ConfigParser() try: cfg.readfp(open(fpath)) return cfg.get('InternetShortcut', 'URL') except: return "#" def make_node(is_top, root, dirs, files): title = os.path.basename(root) back_node = "" if is_top == False: back_node = '<a href="#" class="back">back</a>' node = "" for s in dirs: node += "<li class='arrow'><a href='#%s'>%s</a><small class='counter'>%d</small></li>" % (str_normal(s), s, len(os.listdir(os.path.join(root, s)))) node += "\n" for s in files: node += "<li class='forward'><a href='%s' target='_blank'>%s</a></li>" % (get_ini_url(os.path.join(root, s)), s.replace('.url', '')) html = """ <div id='%s'> <div class='toolbar'> %s <h1>%s</h1> </div> <ul class='rounded'> %s </ul> </div>""" % (str_normal(title), back_node, title, node) return html def make_manifest(dir): print >>f, "CACHE MANIFEST\n# %s\n" % time.asctime() print >>f, "CACHE:" for root, dirs, files in os.walk(dir): for s in files: ext = os.path.splitext(s)[1] if (ext == ".css") or (ext == ".js") or (ext == ".png") or (ext == ".gif"): fpath = os.path.join(root, s) print >>f, fpath.replace(dir, "").strip("\\").replace("\\", "/") def main(f): fav_dir = r"C:\Documents and Settings\あなたの名前\Favorites" is_top = True html_body = "" for root, dirs, files in os.walk(fav_dir): #print root, dirs, files print ">", root html_body += make_node(is_top, root, dirs, files) is_top = False print >>f, html_body if __name__ == "__main__": save_dir = r"C:\配置したいフォルダパスを指定する" # 「お気に入り」から、HTMLページを生成(use jQtouch) save_path = os.path.join(save_dir, "_test.html") f = file(save_path, "w") print >>f, html_before("Favoraites List") main(f) print >>f, html_after() f.close() # fav.manifestを生成 save_man = os.path.join(save_dir, "fav.manifest") f = file(save_man, "w") make_manifest(save_dir) f.close() # cp932からutf-8に変換 save_path2 = os.path.join(save_dir, "index.html") f_i = file(save_path, "r") f_o = file(save_path2, "w") f_o.write(unicode(f_i.read(), "cp932").encode('utf-8')) f_i.close() f_o.close()
コードの流れとしては、大体以下の様です。
- お気に入りフォルダを os.walk で再起探索し、HTMLリスト化しています。
サブフォルダ毎を1ページとして ulタグでくくり、後は .url ファイルの URLキー値を、liタグ内の aタグでジャンプ先になるようにしています。
(jQTouchは、divタグでページを作り出している) - ローカルWeb化する為に、jQTouch提供のライブラリ群を、fav.manifest ファイルで ローカルキャッシュ対象にしています。
fav.manifestファイルは、htmlタグのmanifest属性キーでファイル指定できます。 - 1.でHTML化したファイルは、cp932(shift_jis)なので、utf-8に保存し直しています。
(最初からutf-8でファイルを作ろうと思ったのですが、encodeメソッドを使うのが面倒になったので、後から変えてしまえ。と思った次第)
動かし方
1.パソコン内に、ローカルなWWWサーバーが走っている環境を構築します。
自分の環境は Apache ですが、最近なら WebMatrix でも良いかも知れません。
2.仮に、Apacheを動かしていたら、httpd.confに以下の行を追加します。
AddType text/cache-manifest .manifest
3.次に、ブックマークをHTML化したファイルを保存したいフォルダを決めます。
仮に、「c:\html\test」フォルダに配置すると仮定します。
上のソースの「save_dir」変数の値を、「c:\html\test」に設定してください。
4.jQTouchのライブラリをダウンロード(私のは、jqtouch-1.0-beta-2-r109.zip でした)して展開します。
で、jqtouchフォルダとthemes/jqtフォルダのファイルを、「c:\html\test」フォルダに ぶち込みます。
5.上のソースを Python で実行します。
すると、「c:\html\test」フォルダに、「index.html」ファイルが出来上がります。
(ChromeとかSafariなどのWebKit系ブラウザで、簡単な確認が出来ます)
6.作成したページのURLを、iPod touchから参照します。
例えば、↓こんな感じの画面になります。
fav_test posted by (C)wacky
7.ローカルWeb化しているので、機内モード:ONにしてアクセスしても、「ページを開けません」と出ずに、ページが開きます。やったぁ。
(但し、ブックマークリスト先のURLを開こうとすると、当然ですが「ページが開けません」となります)
最後に
ローカルWebアプリって、結構簡単に作れるもんですね。
(.manifestファイルで、キャッシュ対象を指示すれば良いだけなんですもん)
Mac使いじゃない私には、iPhone/iPod touchなアプリは、永遠に作る事が出来ないのか。と半分諦めモードでしたが、少し元気が出てきました。
これなら、自分のPCのローカルWWWサーバーで、ちまちまWebアプリを作って、それをローカルWebアプリ化すれば良いのですから、かなり敷居が低くなった気がしてきました。
(しかも、ローカルWebアプリ化すれば、Wi-Fiの使えない所でも使えるし)
自作のプロキシサーバーを介して、iPodからのWebアクセス速度を上げてみる
iPod touchを使って、ごろ寝しながらWebサーフィン(死語)していたんですが、携帯に最適化されていないWebページを見ると、結構待たされるんですね。
しかも、3ペイン構造になっているのが多くて、ズームイン・ズームアウトを繰り返すのもアホらしい。
携帯(ガラケー)のWebアクセス機能は、アクセス速度こそ遅いものの、少しでもアクセス速度が上がるよう、携帯のキャリア側のサーバーで本来のHTMLを変換して最適化して表示してくれるので、小さい画面でも見やすいし、我慢ならんほど表示が遅い訳でも無い。
2つの良い所と悪い所が頭の中で、シェイクしている内、ふと思った訳です。
iPod touch(iPhoneでも可)で、携帯向けにHTMLを最適化するHTTPプロキシサーバーを介してWebアクセスすれば、サクサクWebサーフィンできるんじゃね?
情報収集
そのものズバリな「携帯向け最適化用HTTPプロキシサーバー」を提供している所は、ぱっと調べた限り見つかりませんでした。
多分、調べ方が悪いんでしょう。(誰か教えて〜)
代わりに、プロキシの代替になるような、ページを変換してくれるWebサービスを提供してくれている所が見つかりました。
- iPhoneのSafariをサクサクにする現実的な3つの方法―その1 - builder by ZDNet Japan
http://builder.japan.zdnet.com/sp/iphone-3g-2008/story/0,3800087831,20383504,00.htm - Google Wireless Transcoder 【グーグルの携帯電話用ページ変換】
http://lhsp.s206.xrea.com/misc/google-gwt.html
まぁ、これだけでもOKかな?と、一瞬思ったのですが、一々見たいページのURLを入力するのも面倒なんですよ。
(ブックマークレットも紹介されているけど、結局ブックマークを開く操作が入るしね)
で、思いついたのが、
「適当な自作プロキシサーバーを作り、iPod touchは、このプロキシサーバーにアクセスさせる。プロキシサーバーは、送られてきたURLを、上記の「Google Mobile Proxy」に転送して、携帯向けWebページに変換させてしまう」
というものです。
自作プロキシを作ってみる
Pythonなら諸先輩方が、何かサンプルコードを作っているだろうと思って検索したら、結構引っかかりました。
日本語系だと、BaseHTTPServerクラスを使うものとTwistedを使うものに、大体2分するようです。
- 口調変換プロキシ - yattの日記
http://d.hatena.ne.jp/yatt/20080804/1217850128 - Twistedで超簡単なHTTPプロキシサーバを書くのサ - HDEラボ
http://lab.hde.co.jp/2009/05/twistedhttp.html - Tiny HTTP Proxy in Python
http://www.oki-osk.jp/esc/python/proxy/ - WSGIで作る簡単ローカルHTTP Proxyサーバ - ヒビノキロク
http://d.hatena.ne.jp/nozom/20080320/1206034869 - ローカルプロキシスクリプト - veryberry_cafeの日記
http://d.hatena.ne.jp/veryberry_cafe/20061024/1161721619 - A database of open-source HTTP proxies written in python.
http://proxies.xhaus.com/python/
という訳で、今回はid:yattさんの口調変換プロキシが、URLの転送の実例に使えそうなので、ちと拝借して改造してみました。
以下に、早速コードを示します。
#! /bin/env python # -*- coding: utf-8 -*- import sys import BaseHTTPServer import urllib import urllib2 import urlparse import re TMPL = """<html> <body> <h1>Proxy Server Error</h1> <div>response error to '%(path)s'</div> <div>ERROR: <b>%(error)s</b></div> </body> </html> """ #urllib.FancyURLopener.version = "Mozilla/4.0" # 素のままだとgoogleやwikipediaに弾かれる #urllib.FancyURLopener.version = "transApp" # 素のままだとgoogleやwikipediaに弾かれる class ProxyHandler(BaseHTTPServer.BaseHTTPRequestHandler): def error(self, e): return TMPL % dict([("path",self.path), ("error",e)]) def do_GET(self): KEY_URL = "http://www.google.co.jp/gwt/" print "request:",self.path try: url = self.path if url.find("/gwt/") > 0: url = KEY_URL + url[url.find("/gwt/") + 5:] print " change url:", url elif url.find(KEY_URL) < 0: url = KEY_URL + "n?u=" + url print " make url:", url pipe = urllib.urlopen(url) content = pipe.read() except Exception, e: content = self.error(e) self.wfile.write(content) def do_POST(self): BaseHTTPRequestHandler.do_POST() if __name__ == '__main__': serv_addr = ("", 8080) print "server address:", serv_addr httpd = BaseHTTPServer.HTTPServer(serv_addr, ProxyHandler) try: httpd.serve_forever() except KeyboardInterrupt: pass
早速試してみましょう。
作業の流れは、以下のようなものです。
- スクリプトを動かすWindows PC(ここでは、普通にWebが見られる環境にあります)の、IPアドレスを調べておきます。
「ipconfig
」をコマンドラインで打ち込めばIPアドレスはわかります。 - 上記のコードスクリプトを、PC上で動かします。
例えば、「python proxy.py
」という風に。 - iPod touchの設定で、プロキシのIPアドレスとポート欄に、PCの(1.で調べた)IPアドレスと8080番ポートに設定します。
- iPod touchのMobile Safariを起動し、http://www.yahoo.co.jp にアクセスします。
すると、以下の画面が出てきました。
2 posted by (C)wacky
ちなみに、iPod touchで、プロキシの設定をするには、以下のWeb siteの説明が参考になるでしょう。
(実は切り替えが面倒なので、Pixyというソフトを突っ込んでみたんだが、うまく動かなかったです。何ででしょうね。誰か教えて!)
- プロキシが設定できた: 健全なiPhoneブログ
http://iphone3gblog.seesaa.net/article/111802224.html
余談:urllib.FancyURLopener.versionの設定による挙動の差
動き出した後、普通にWebブラウザから表示する場合と、画面の表示の仕方が違う事に気づきました。
↓PCのWebブラウザから表示。
1 posted by (C)wacky
↓iPod touchから自作プロキシを介して表示。
2 posted by (C)wacky
一番上に表示されるメッセージが英語だったり、画像が出てこなかったりですね。
何でだろうなぁ?と思って、元のコードを見ていたら、「urllib.FancyURLopener.version
」の設定値の所で、「素のままだとgoogleやwikipediaに弾かれる」とあったのですね。
この、urllib.FancyURLopener.version って何の設定かいな?と思って調べたら、「User-Agent」の設定値らしい。
んじゃぁ、という訳で、試しにIEなどで使われる「Mozilla/4.0」を設定してみました。
transAppを指定 | Mozilla/4.0を指定 |
---|---|
おぉ、表示される内容に変化が現れました。
ただ、Yahooのページに関して言えば、urllib.FancyURLopener.version の設定値は、「Mozilla/4.0」にしない方が良いです。
「スポーツ」などのページにジャンプしようとすると、転送ページに飛ばされて、結局ジャンプできませんでした。
プロキシのスクリプトコードの改善が必要という事でしょう。
参考:速度比較
何ちゃってですが、自作プロキシを介する事により、どれぐらい早くなるのか、幾つか試してみました。
Webページ | 直接 | 自作プロキシ |
---|---|---|
Yahoo! | 7秒 | 3秒 |
6秒 | 2秒 | |
楽画喜堂 | 35秒 | 3秒 |
まいじゃー推進委員会 | 14秒 | 3秒 |
携帯に最適化していない+画像が一杯のサイトほど、かなりの効果が見込める事が判ります。
まぁ、いわゆるテキストブラウザで閲覧するようなものですからね。(一部画像が付きますが)
余談:プロキシのテスト中に
余談ですが、自作プロキシを導入してテスト中、iPod touchをスタンバイにして暫く放置していたら、以下のメッセージログが。
192.x.x.x - - [03/Jan/2011 22:00:40] code 501, message Unsupported method ('C ONNECT') 192.x.x.x - - [03/Jan/2011 22:00:44] "CONNECT m.google.com:443 HTTP/1.1" 501 - 192.x.x.x - - [03/Jan/2011 22:01:52] code 501, message Unsupported method ('C ONNECT')
Wi-Fiを有効にしているとスタンバイにしても、結構バッテリを消費するので、何でだろう?と思っていたんですが、なるほど、数分おきに動いている訳ですね。
そりゃ、バッテリを消費するわ。
まとめ
という訳で、恒例のまとめ というか感想。
- 携帯用にHTMLデータを加工させる事で、Webサーフィン(死語)は、更にサクサクになります。
- 何ちゃって自作プロキシサーバーでも、その効果は得られます。
というか、iPod touchのアプリで、携帯向けにHTMLデータを加工するローカル鯖アプリを提供してくれないですかね。
Safariのプロキシ設定をlocalhostに設定して、アプリがプロキシ処理をするの。
現状だと、Jailbreakしないと出来そうもないですなぁ。
(Webサービスでなく、本当のプロキシサーバーでも良いんですけど。一部広告が入るぐらいなら我慢するんだけど…)
2011/1/4追記:
後で気付いたんですが、Opera Mini Web Browserの、携帯向け表示モードって、今回のプロキシ的な動作を行っているんじゃないかな。
- Opera Mini & Opera Mobile ブラウザ
http://www.opera.com/mobile/specs/
技術仕様のページで、Opera's compression serversを経由してインターネットにアクセスって、図が書いてあるし。
出た当時、アクセス速度が3倍速とか評判になってたけど、今回のプロキシ的な処理を施す事で実現しているって事なんでしょうね。
…だとすると、もうちょっと他でもサービス実現してくれるといいのに。ぶちぶち。
PukiWikiの添付ファイル使用時、ローカルファイルをドラッグ&ドロップしたい(少し挽回版)
先日の、
- PukiWikiの添付ファイル使用時、ローカルファイルをドラッグ&ドロップしたい(残念賞版)
http://d.hatena.ne.jp/Wacky/20100905/1283681820
の、少し挽回版です。
ある一定のバージョン(確認した限りIE6。IE7もいけそう)なら、ローカルファイルをドラッグ&ドロップできるメドが付きました。
ドラッグ&ドロップできる条件
調べていて判ったのですが、ローカルファイルをドラッグ&ドロップできるか否かは、ファイル入力欄にクリップボードからの文字列貼り付けが出来るか否かに拠ります。
試しに、文字列を適当にコピーした後、ファイル入力欄で右クリックしてみて下さい。
3 posted by (C)wacky
↑
このように、「貼り付け」とか「削除」項目が表示されていれば、ドラッグ&ドロップが出来るのでは無いか?と思います。
コードと動作
早速ですが、patchコードを示します。
--- attach.inc.php 2006-04-15 08:51:12.000000000 +0900 +++ attach.inc.php.new 2010-09-08 23:00:59.250000000 +0900 @@ -408,6 +408,44 @@ $title = $_attach_messages[PLUGIN_ATTACH_UPLOAD_ADMIN_ONLY ? 'msg_adminpass' : 'msg_password']; $pass = '<br />' . $title . ': <input type="password" name="pass" size="8" />'; } + + $file_box = ''; + if( ereg( "MSIE", getenv("HTTP_USER_AGENT") ) ){ + $file_box = <<<EOD +<!-- IE only --> +<object id="DnD_Box" classid="clsid:8E3867A3-8586-11D1-B16A-00C0F0283628" width="350" height="100"> + <param name="OleDropMode" value="1"> + <param name="Style" value="1"> + <param name="SimpleText" value="In this area, please do Drag & Drop of a file."> + <param name="allowScriptAccess" value="always"> +</object> +<script type="text/JScript"> +function Sleep(ms){ + var st_tm = new Date().getTime(); + while((new Date().getTime()) < (st_tm + ms)); +} +function DnD_Box::OLEDragDrop(Data){ + if(Data.GetFormat(15)){ + var O = ""; + var e = new Enumerator(Data.Files); + O = e.item(); + //alert(O); + DnD_Box.SimpleText = O; + clipboardData.setData("Text", O); // ファイルパスをクリップボードへ + var e = document.getElementById("_p_attach_file"); + e.select(); + e.focus(); + var w = new ActiveXObject("WScript.Shell"); + w.SendKeys("%{TAB}"); + Sleep(500); + w.SendKeys("^v"); + //document.getElementById("_p_attach_file").click(); // ファイルダイアログを開くだけ + } +} +</script> +EOD; + } + return <<<EOD <form enctype="multipart/form-data" action="$script" method="post"> <div> @@ -419,11 +457,12 @@ <span class="small"> $msg_maxsize </span><br /> - <label for="_p_attach_file">{$_attach_messages['msg_file']}:</label> <input type="file" name="attach_file" id="_p_attach_file" /> + <label for="_p_attach_file">{$_attach_messages['msg_file']}:</label> <input type="file" name="attach_file" id="_p_attach_file"/> $pass <input type="submit" value="{$_attach_messages['btn_upload']}" /> </div> </form> +$file_box EOD; }
これを適用すると、下図のようにローカルファイルをドロップ領域にドラッグ&ドロップすると、
1 posted by (C)wacky
ご覧の通り、ファイル入力欄にローカルファイルのパスが、自動的に入力されます。
2 posted by (C)wacky
後は、「アップロード」ボタンを押すだけ。楽になりました。
最後に
私のメイン環境はIE8でして、その環境だと右クリックメニューの「貼り付け」と「削除」が出来ないんですね。
う〜ん、最後の一押しが…。
PukiWikiの添付ファイル使用時、ローカルファイルをドラッグ&ドロップしたい(残念賞版)
突然ですが、WikiWikiって便利ですよね。
自分は、個人的なメモは PukiWikiにメモっています。今だったら、Google DocumentとかにEvernoteにメモるというのもアリなんでしょうけど、貧弱なマシンには ちとリッチ過ぎるし、アクセス管理も自分で管理できるので、よく使っています。
で、よく使うPukiWikiなんですが、時折「うぎゃ〜」と叫ぶ事があります。
それは、添付ファイルのパス指定の時なんです。
…何で、アップロードするファイルを、ファイル入力欄にドラッグ&ドロップさせてくれないの?
1 posted by (C)wacky
セキュリティとか言われたら、まぁ納得するしか無いんですが、Googleのウェブアルバムでは、ドロップエリアにファイルをドラッグ&ドロップして、アップロード出来るんですね。
2 posted by (C)wacky
そうだよ。これがやりたいんだよ!
一々ファイルダイアログを開いて、アップロードするファイルをヘコヘコ選択していくなんて、前時代的な真似は やりたくないんだよ。
ついでに言うと、今使っているブラウザで、それがやりたいんだよ。
HTML5なら〜とか、足切りは勘弁してちょーだい。
という訳で、どうやれば出来るか、奮闘してみました。
情報収集
余談ですが、このファイル入力欄へのドラッグ&ドロップですが、Chromeだとデフォルトで出来ちゃいます。
なので、今回のネタはIEオンリーです。(FireFoxも、最新版だと出来るみたいだし〜)
まずは、Googleのウェブアルバムですが、ソースを眺めてみると、どうやらドロップエリアは、ActiveXコントロールっぽいです。
他に方法が無いのか?と言うと、↓このWeb siteでの検証では、ActiveXとFTP、クリップボードぐらいしか無い模様。
- ブラウザUIにおける効率のよいファイルアップロード|blog|たたみラボ
http://www.tatamilab.jp/rnd/archives/000127.html
FTPの代わりに、WebDAVを使う自作プラグインが、PukiWikiのオフィシャルサイトにあります。
- 自作プラグイン/dav.php - PukiWiki-official
http://pukiwiki.sourceforge.jp/?%E8%87%AA%E4%BD%9C%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%2Fdav.php
他には、オフィシャルサイトに、複数ファイルをアーカイブしたファイルをアップロードする事で、サーバー先で展開して格納してくれる。という自作プラグインもあるようです。これは、考え方の勝利という奴ですね。
方針決定
先のオフィシャルサイトの自作プラグインを検討したのですが、やっぱり「ドラッグ&ドロップしたい」んじゃぁ。という事で、ActiveXを貼り付けて、そこからパスをゲットする方法を検討します。
暫くググると、そのものズバリなものが見つかりました。
- Tip: Drag & Drop Files into I.E. (JScript/OLE) - CodingForums.com
http://codingforums.com/showthread.php?t=36896
コードのキモは、objectタグでActiveXコントロールを貼り付ける際、OleDropMode プロパティを有効に設定する事と、OLEDragDropイベントでキャッチしたら、パス情報を取得する所みたいです。
<object id="IAnimation" classid="clsid:B09DE715-87C1-11D1-8BE3-0000F8754DA1"> <param name="OleDropMode" value="1"> </object> <script type="text/JScript"> function IAnimation::OLEDragDrop(Data){ if(Data.GetFormat(15)){ var O = ""; var e = new Enumerator(Data.Files); while(!e.atEnd()){ O += e.item() + "\n"; e.moveNext(); } output.value = O; BackColor=0x80000003;} }
↑上で使っているActiveXはAnimationコントロールのようです。が、調べていくと、最近のWindowsのパッチで、このコントロールがWeb上で使えないよう Kill Bit指定されているようです。
他に、OleDropModeできるようなActiveXが無いものか?と調べていくと、某掲示板でグッドな情報が記載されています。うまうま。
833 :デフォルトの名無しさん:2008/05/29(木) 23:01:44 ああスマン Clipboard.HTAってウィンドウにD&Dしたファイルをクリップボードにコピーするスクリプトなんだけど その「D&Dしたファイルを拾う方法」以外に無いの? って事 Clipboard.HTAから最低限必要な部分だけを切り取ると <object id="dd_1c" classid="CLSID:8E3867A3-8586-11D1-B16A-00C0F0283628" > <PARAM NAME="OLEDropMode" VALUE="1"><PARAM NAME="Style" VALUE="1"><PARAM NAME="Simpletext" VALUE="ここにD&D"> </object> function dd_1c::OLEDragDrop(Data,e){ //Data.Files.;DDしたファイルの数 //Data.Files.Item(n);n=1〜でDDしたファイルのフルパス if(e==7){ //こっちはファイルです }else{ //こっちはファイル以外の何か } } で、objectにファイルをD&DするとData.Files.Item(n)にD&Dしたファイルのパスが取得出来るんだけど この方法、「オブジェクトにD&Dしたファイルを拾う」事しか出来ないから、 「このテキストボックスにファイルをD&Dしたら…」って事は出来ないんだよ だから他の方法無いかなって
上の情報を組み合わせてみると、ローカルファイルを、IEにドラッグ&ドロップしてファイルパスを得られる事が判りました。
越えられない壁
ファイルパスを得られたら、INPUTタグのファイル入力欄に、スクリプトで書き込めば完了だ。と思ったのですよ。
が、そうは問屋が卸さないようで、TYPE='FILE'指定のかかったものは、スクリプトで設定出来ない模様。
確かに、直接ファイル入力欄にキー入力しようとしても、入力すらさせてくれない…。
調べていくと、昔はクリップボード経由でINPUTタグに入れる事も出来たようですが、現在は それも適わない模様。
セキュリティ厳しいなぁ。…まぁ、当然か。
TYPE='TEXT'指定に変えて、逃げる手も考えたのですが、他に弄らないといけないコードが多い事に気付いて、もう八方塞りに陥りました。orz
(PHPの言語仕様知らないし〜)
挫折
という訳で、
までは、実現する事にし、その後は
- 人間の手で貼り付け&閉じる&アップロードを行ってもらう。
という中途半端な対応となりました。
以下に、plugin/attach.inc.php プラグインに対する、パッチコードを示します。(1.4.7で確認済み)
--- F:\Wacky\Test\pukiwiki\attach.inc.php 2010-09-05 17:07:25.281250000 +0900 +++ F:\Wacky\Test\pukiwiki\attach.inc.php.new 2010-09-05 17:07:33.578125000 +0900 @@ -419,11 +419,32 @@ <span class="small"> $msg_maxsize </span><br /> - <label for="_p_attach_file">{$_attach_messages['msg_file']}:</label> <input type="file" name="attach_file" id="_p_attach_file" /> + <label for="_p_attach_file">{$_attach_messages['msg_file']}:</label> <input type="file" name="attach_file" id="_p_attach_file"/> $pass <input type="submit" value="{$_attach_messages['btn_upload']}" /> </div> </form> +<!-- IE only --> +<object id="DnD_Box" classid="clsid:8E3867A3-8586-11D1-B16A-00C0F0283628" width="350" height="100"> + <param name="OleDropMode" value="1"> + <param name="Style" value="1"> + <param name="SimpleText" value="In this area, please do Drag & Drop of a file."> + <param name="allowScriptAccess" value="always"> +</object> +<script type="text/JScript"> +function DnD_Box::OLEDragDrop(Data){ + if(Data.GetFormat(15)){ + var O = ""; + var e = new Enumerator(Data.Files); + O = e.item(); + //alert(O); + DnD_Box.SimpleText = O; + clipboardData.setData("Text", O); // ファイルパスをクリップボードへ + //document.getElementById("_p_attach_file").value = clipboardData.getData("Text"); + document.getElementById("_p_attach_file").click(); // ファイルダイアログを開くだけ + } +} +</script> EOD; }
最後に
という訳で、今回は途中挫折という結果に陥りました。
もし、HTMLに詳しい方が居られましたら、完全版を作って頂けないかな?と思う次第であります。まる。