HTMLを分割（jQueryを利用）

「う〜ん、このHTMLって、こっちのページと同じだよねぇ。。。」ということありますよね。
（あれ、あんまりないかな。。。自分だけ？）

修正が必要になったら全部のページを直さないといけない。
たとえば、こういうメニュー部分。

おぼろげに、Ajaxで、Pythonにファイル名でリクエストを投げて、Pyhton側でファイル全部をAjaxに戻す、、、というのがあったと思うのだけれど、どうも思い出せない。。。探したけれどピタっとハマるものが見つからない。

じゃあ、ということで、いずれやらなければとは思っていたjQueryを調べました。
方法がありました。

（１）jQueryライブラリの取込みとload命令の記述を以下のようにします。


（２）各ページで共通なメニュー部分は、common_menu.html に抜き出しておきます。



（３）メニューはID化して、単純化してしまいます。


うん、うまくいった。すばらしい♪。

.

Eclipse からでもデプロイできる（Google App Engine）

いままで、この投稿のとおり、GoogleAppLauncherを使用してサーバーに上げていたのだけれど「ちょっと面倒。。」と思っていて探したらありました、Eclipse から直接する方法。

「アップロード」を選ぶと、

管理画面が出てきて、メールアドレスとパスワードを入力。

でFinishと。

毎回アドレス／パスワードを入れる必要がありそうなのがちょっとあれだけど、まぁ余分なアプリを１つ上げなくて良いのは、よかったかな。

あいかわらずSSLワーニングがでているけれど。。。

今回アップロードしたのは、これから制作しようとしているホームページ。
（アプリケーション企画制作コミュニティのようなものを構想中）

Google App Engine の環境でホームページを公開しようかなと。
使い方的には本流ではないような気がするけれど、うまくPythonを織りまぜられればいいでしょう。

まずはきょうはこれから、HTMLとCSSと格闘です。

自分のドメインから動かしたい（Google App Engine）

動くようにはなりましたが、「http://sugisugi-tinywebapp-2.appspot.com/」のままだとなんだかappspotに縛られているようでちょっと不満。なので、自分のドメイン名のところで動くようにするにはどうしたら良いのか、試したので以下にまとまておきます。

選んだのは GoogleApps を使う方法。これが一番簡単そうだったので。

※以下、すでに Google Apps 登録済みが前提。
※結局、Google呪縛から離れられていないけれど、まぁそれはそれとして。。。

まず自分のAppsダッシュボードに入って「サービスを追加」を選びます。

App-IDを入力するところがあるので、そこで自分のアプリのIDを入力。
（”sugisugi-tinywebapp-2”）

ここで新たなアドレスを決めることができる。入力します。
（”http://tinywebapp-2.vanilla-soft.com”)

確認画面がでたので、登録OKのもよう。

で、iPhoneシミュレータから 「http://tinywebapp-2.vanilla-soft.com」を入力してみると、

登録後、すぐやってみたけど、瞬時にOKでした。
ちょっとアドレスには改良の余地はあるけれど、一応めでたしめでたし♪。


.

日本語はエラー？（Python & Google App Engine）

「せっかく出来上がったので、サーバーにアップしてみよう」

ということでまぁ普通に、いくつかつまずいたので備忘録として以下にメモ。

ローカル環境（Mac）での開発はEclipseで行っており、アプリ開発〜テスト実行までEclipseを出ることはなかったのですが、サーバーにアップするためには、ターミナルからコマンドをたたくか、Google App Engine Launcher で「Deploy」ボタンを押す必要がありそうです。

ものぐさなのでボタンひと押しですませたい。

なので、既にできているEclipseプロジェクトをLauncherにまず登録。

Fileメニューから選ぶのは、「New Application...」ではなく、「Add Existing Application...」でした。

※ここでちょっとハマる。

「Deploy」ボタンを押すとサーバーに転送が始まります。コンソールが立ち上がって転送状況が表示されますがこの時、
「WARNING appengine_rpc.py:428 ssl module not found.Without the ssl module, the identity of the remote host cannot be verified, andconnections may NOT be secure」
と表示されます。

ちょっと気持ち悪いなぁと思い、いろいろ調べましたが、Launcherからの場合の設定変更方法がわからない。もしかすると、GoogleAppengineLauncher.app/Contents/Info.plist　にPYTHONPATHを /System/Library/Frameworks/Python.framework/Versions/2.5/Extras/lib/python/twisted/internet　と書くのかなぁ。。。と思ってはいるけど、まだやってません。

※この後やるかもしれない。いや面倒なので放置するかもしれない。。。

 でめでたくサーバー上にアップ♪。

で、ブラウザ（Mac上のiPhoneシミュレータ）で実行してみます。

う〜ん、なんで？。

「MyApplication」画面で実行時のログが見られそうです。

どうも、
: Non-ASCII character '\xe3' in file /base/data/home/apps/s~sugisugi-tinywebapp-2/1.350480277660344025/TinySample2.py
というのは、Pythonソースに日本語があることが問題みたい。
けどねぇ、ここは日本だし、おいらは日本人だしねぇ。。。

ということでネットを徘徊すると、こういう経験をした方はほかにもたくさんいらっしゃるようです。（というかこれは通過儀礼みたいなものか？、もしかして）

結果としては、

TinySample2.pyの最初の行に
「# -*- coding: utf-8 -*-」を挿入します。

日本語の出力時の指定は、
「self.response.out.write("もうちょっとぱっとしたこと、ありまへんの？" )」
ではなく、
「self.response.out.write(u"もうちょっとぱっとしたこと、ありまへんの？" )」
とします。

※どっちがかけてもダメ。

であらためて表示。

うん、めでたしめでたし♪。

My Tiny Web Application (1)

４月の下旬から、

「Google App Engineをつかってみよう」
「HTML&JavaScriptで、Google App Engine上のPythonにリクエストを投げて返ってきた値を表示する、というものを作ってみよう」

と思って環境構築から諸々やっておりましたが、なんやかんやで５月中旬、とりあえず完成。

こんな感じ。

もともとは、「PythonとGoogle App Engine の使い方／書き方をいろいろ理解しないと、なんだよねぇ？」と想像し身構え、関連本をたくさん買い、ネットも徘徊して情報収集していたわけですが、実際に作りが進むと労力の７割強は、HTMLとJavaScript(Ajax）という感じでした。

※知らないのにわざわざiPhone風Webを選んだために、よけいにそっち方面に時間を割くはめに。

※まぁしょうがない、やりたかったので。

※当方のスキルは、「一応Javaはできますが、ここ数年はプログラミングからは遠ざかっていました」「HTMLとかJavaScriptとか、面倒そうなので避けてきました」です。

で、ざっと理解したことは、

・HTMLの書きづらさ、CSSの見にくさ、JavaScriptの曖昧さ、やっぱりなかなか手強い。
　（避けてきただけのことはあるなぁ。。。）
・Ajaxは想像より簡単。けれどFirefoxは挙動がちょっと違う（ハマった）。
・昔しはAlert出しまくるしか無かったと思うが、今はデバッグツールが豊富だね。
・Pythonの（Google App Engineの）の深いところに全然いかなかった。良くない。

わりと楽しかったので、今後も継続していろいろ作りながら学んでいこうと思います。
せっかくなので、記念にソースを貼っておくことに。それっぽく見えるし♪。













参考にさせていただいたいろんなサイト、ありがとうございました。

This Year's orchid (L.Santa Barbara Sunset)

Blogger投稿のFacebookでの認識確認のため、テスト投稿。

L.Santa Barbara Sunset といいます。

Nikon D7000, AF-S VR Micro-Nikkor 105mm f/2.8G IF-ED
1/100s f/3.5 ISO200 105mm, +0.3EV Auto1 Standard*

正しくはもっと冬に咲いて終わっている花なのだけれど、今年は室外越冬したので、ただいま開花中。

MacのEclipse用に RictyFont を導入

「なんだかわからないけど、エラーになる」
「問題ないはずなのに、この行が動かない」

う〜ん、わからん。。。

なんて経験、誰しもあって、そういう時の理由の初歩的な１つって、「スペースが全角スペースだった。。。」なんてこと、ありますよね。（ん？、ないかな。おいらだけか？）

Windows上のEclipseだと、なんとか認識できたり、プラグインがあったりするんだけれど、Mac向けはどうも適当なものがないのかな？、ということで、Mac上のEclipseで、全角スペースを認識するための良い方法を探していたのですが、当初はどうもピタっと当てはまるのがなさそうな雰囲気。

 けれどこの手のエラーは「忘れた頃にやってくる」。できれば回避するなり認識しやすいようにしておきたいと思って、続けて調べて見つけました。”全角スペースが見られるフォント”。

RictyFontはこちら。

※「配布やめるかも」と書かれてますね。必要そうな方はお急ぎがよろしいかと。

手順としては、同サイトからフォントをダウンロードして、Mac上で解凍＆ダブルクリックすると”インストールどうする？”画面がでてきますので、それでインストール。

※２つあるので、両方入れます。

その後、Eclipseの環境設定で、フォントを変更します。

そうするとどうなるか、、、

う〜ん、ちょっと見づらいかな。こうですね。

上の行が、全角スペースを４つ入れた状態。
うん、控え目ではあるけれど、わかる、すばらしい。ありがとうRicty♪。


。

ソースコードの表示

参考にさせていただいたサイトはこちら。

「BloggerのLayoutテンプレート。。。。」がどこのことなのか、少々迷いましたが、
ここですね。

で、こういうのが、、
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewpoint"
      content="width=device-width,user-scalable=yes,
      initial-scale=1,0,maximun-scale=3.0" />
    <title>こんにちは</title>
    <style type="text/css">
      p{font-size: 12px; }
    </style>
  </head>
  <body>
    <p>ありがとう♪</p>
  </body>
</html>


こうなると。


うん、すばらしい♪。

Django インストールが必要？

現在、Pythonは 2.5.5になりました。

Eclipse上の設定も済んでいて、一応動く状態。

ここからは、地道に本やWebをいろいろ調べながら、PythonとGAEを学習していけばいいわけだけれど、ちょっとサンプルを見た（たとえばこの本とか）感じ、Python のコードの中にずいぶんとHTMLを書いているような印象。

これはたぶん違うよねぇ。。。

というわけで、実際のアプリではおそらく、HTML部分と内部ロジック部分をうまく分離する必要があるはずで、ぱっと見（サンプルを見たところそんな風だった）そんなことができそうな、Django を調べることに。

GoogleAppEngineLauncherのバージョンは、1.4.3。
これは、Django1.2 に対応していて、Django0.96は入っている模様。
最新は 1.3のようだけれど、これはGAE的には不要。

つまり、どっかから 1.2を探してきて、入れればいいのか？。
う〜ん、、、、

で結局、「sudo port install py25-django」をしてみた。

いや、、、これは必要なかったのかも。まぁいいか。。。

実は最初に入っていたようで、以下のリンクをるだけでよさそうです。

cd /Applications/GoogleAppEngineLauncher.app/Contents/Resources/GoogleAppEngine-default.bundle/Contents/Resources/google_appengine/lib

ln -s django_1_2 django
 

あとは、プログラム側で、利用を明示すればいいのかな？。
from google.appengine.dist import use_library
use_library('django', '1.2')


さて、では、ちょっとやってみます♪。

MacPortsの設定が効いてない？

Djangoのインストールをしようかと思って、ターミナル操作を始めたのだが、どうもpathが違うような気がする。。。

python_select とかも動かないし、、、

調べたところ、「export PS1="[\W]$"」と１行だけ .bash_profileに追加して、プロンプトがシンプルになって喜んでいたのだが、そのため、MacPortsが　.profileに追加した設定が効かなくなってしまった模様。

ということで、.bash_profile、以下のように.profile を取り込むよう、１行追加しました。

う〜ん、なかなか微妙に手強い。。。

MacでEclipse

ダウンロードした、Mac版Eclipseは、こちら。

ただ、これは日本語化プラグイン「Pleiades」が入っていないんだそうで。
どうしようかなぁ、英語版のままでもまぁいいかとも思ったのだけれど、ちょっとした設定を変えたい時に迷うのは面倒だよね、ということで、いろいろ調べたところ、「Windows版からもってくる」、という情報が。これが一番よさそうです。よくわからんが、とにかくもってこよう。

Mac版のアプリを普通にインストールした後に、Windows版を解凍して、その中のdropins ディレクトリをMac版の同じところに置き換えますよ、と。

さらに、Eclipse.iniの末行に、
-javaagent:../../../dropins/MergeDoc/eclipse/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
を追加。

※場所は、Applications/eclipse/Eclipse.app/Contents/MacOSの下。
パッケージ表示しないと見つかりません。ちょっと悩んだ。。。

で、できあがったのがこちら。

 

Mac側でEclipseを使うことになるとは思ってませんでしたが、きっとこれで便利に開発ができることになるでしょう。よかったです。

GoogleAppEngineLauncher の導入

こんな画面のアプリがインストールされます。

 

 プリファレンスで、Pythonディレクトリを指定します。

 

※最初は「2.5系のPythonをインストールするんだよねぇ。。」と思っていましたが、結局Macでは必要ないようです。

そのかわり、MacPortsを入れて、2.5と2.6を切り替えられるようにする必要があります。

後々のため、シンボリックリンクもしておきます。

/usr/localに、google_appengine　というリンクができて、それがアプリのパッケージ内のリソースを指している、、という感じ。

なるほどねぇ。。。

Mac ターミナルのプロンプト表示

ターミナルのプロンプト表示がダラダラと長いので変更。

最初は「さて、、、どうするんだったっけなぁ〜（多少は心得があるんだけど、あまりにも過去のことで消却済み。。。）と悩みましたが結局、

（１）ログイン直後のカレントディレクトリに、.bash_profileを作成。
（２）ごくシンプルに表示するように、export PS1="[\W]$"だけを記述。
（３）source ~/.bash_profile　で即反映。

ということで、すっきり♪。