AngularJS

クライアントプログラム続き



jQueryなるものを見つけたが、さらに何かないか探してみた。
そしたらこんな記事を発見。
人気上昇中のJavaScriptライブラリを調べてみた【2016年版】

で最近伸び悩んでいるが、AngularJSなるものがあると。

なんか簡単そうなのでとりあえず使ってみる。

デフォでJSON形式でデータやり取りするみたいだし。

基本的に超簡単なのだが、いくつかはまっているのでメモしておく。（解決し次第追記）

WebpayのAPIが動作しない

ngRouteでテンプレートで使うhtmlではjavascriptをjavascriptとして読んでくれないっぽい。

→Webpay登録のときだけ別ページに遷移することにして解決

→同じ理由でjavascript使いそうな場面は全て新しいページに遷移させる

Getでの値の渡し方

Getでのリクエストで思い通りの返しがなかったのではまった。

→オブジェクト作ってparams:でまとめて送るらしい。

グローバル変数的な

普通にスクリプト内に変数設定してコントローラーで外側にある変数もらおうとすると、エラる。これはWebプログラミング特有なのか？
→これだった。AngularJSのControllerとScopeの基礎を学ぼう。Controllerは入れ子構造にできて、親Controllerに値を入れればグローバル的に使えると。
いや、普通に使えた。あんまり推奨されないみたいだけどとりあえず。

画面遷移後の初期処理

リスポンシブルな処理の書き方は簡単なんだけど、ngRouteで画面遷移した後の初期設定見たいのはどうればいいんだろう。
→$routeProviderの設定でcontrollerを設定すればいいのね。だいぶ基本でした。

Controllerの継承
Contoller間で共通する操作を継承できるか。
→augular.extendを使う

バックグラウンドでの処理はどうすんの
Pushどうするか
そのままです。なにせ初体験なもんで

CSSのお勉強

Webアプリから作ることにしたので、CSSのお勉強（実は触ったことなかった）。
http://scene-live.com/page.php?page=38
http://techacademy.jp/magazine/4872
で基本は抑えた。

でもLine風UIを作っていたやつには、idとかclassとか付いてたな。
なるなる、.や#を使えばいいのか。
一応使い分けもあると。ふむふむ。
http://allabout.co.jp/gm/gc/23897/2/

こんなもんでいいかな、簡単！（まだ触ってないけど）

以上！

MIT APP Inventor 2

久々の投稿です。

サーバープログラムは大体組めそうになったので、今度はアプリにもてを出し始めます。
何からやろうか悩んだけど、とりあえずAndroidから。
Webアプリからとかでもよかったけど、ちょっと使ってみたいものがありまして。

MIT APP Inventor 2
ヴィジュアルプログラミングでAppが作れるらしい。
日本語Wikiもありました。

どこまでできるか、ちょっと挑戦。てか楽になるのかな。
基本的な使い方としては、DesinerでUIをデザインして、Bolcksでアルゴリズムを構築します。

「User Interface」の「Web browser」だとWebページ閲覧できるし、「Connect」の「Web」を使えばバックで連携することがか可能。
XmlやJSONのdecodeもできるのか、よいよい。
あとは、Base64のdecodeもできればいいのだが、どうだろうか。

使い心地としては、そんなに楽になった印象はないかな。
パソコンが小さいせいもあるけど、マウスで（特にBlocks内）上下するのが面倒。
でも面白いので、もうちょっと遊んでみます。

3/28追記
やっぱりやや物足りないので一旦撤退。
・ロードに時間がかかるので、画面を遷移する度にちょっとイライラする
・ライブラリとか読めなさそうなので、自由度がちょっと低い
Webアプリから作ります。

クライアントサイドプログラム

次はクライアント側のプログラム。
ホームページ(ブラウザ)、iPhone、Androidとか考えられるけど、とりあえずホームページ(PHP)JavaScript)かな。

Ajax, jQueryなるものがあるのですね、名前は知ってたけどどんなものかは知らなかった。google mapのイメージですか。XML使って非同期処理ですか。ぴったりじゃないすか！簡単に使えそうだし。
保存はhtmlでもphpでもいいっぽいな。

基本 の使い方はこれでいいな。
参考: http://www.finefinefine.jp/jquery/kiji2203/
xmlの処理(パーサー)もできる。
$(xmlファイル)の中をfindで探して、text()で出力。
例: $(xml).find("item").text()

処理待ちはwhen, doneでいいかな。
http://www.tam-tam.co.jp/tipsnote/javascript/post5807.html
Deferredていうらしいけど、じっくり調べる気はまだしない。

あとはUIだけど、これは今のところ最低限でいいや。
これもなんかいけそうな気しかしないが（笑）
http://webkcampus.com/201411/829/


2016/2/17追記
JSONなるものがあるんですね。XMLじゃなくてこっちの方がいいかな。

サーバーサイドプログラム(PHP)

データベースの次はサーバーサイドのプログラムを書いていきます。
PHPはあまり慣れていません。
ただhttpプロトコルでやりとりするこの仕様、うまくいく気しかしません（ドヤァ）
基本設計はgetかpostで受け取って(基本getか?)、xmlを返す。
参考：https://thinkit.co.jp/article/1210/1

画像を扱うのでやはりこの辺りが参考になる。
http://hijiriworld.com/web/mysql-img-binary/
xmlでバイナリデータを扱うにはBase64が使えると。
http://astel-labs.net/blog/diary/2010/07/100721-1.html
ここまでおさらい。


PHPでのget (post)の扱いは、
http://konayuki1026.blogspot.jp/2012/01/phpget.html
$適当な変数名 = $_GET['送られた変数名']
でいいらしい。POSTは$_GETが$_POSTになるだけ。簡単。

ただ、このサイト
http://hijiriworld.com/web/mysql-img-binary/
だとimageファイルを送る際に$_POST['image']ではなく、
$_FILES['image']となっていたので調べたら
http://9fd.blog92.fc2.com/blog-entry-236.html
どうやらファイルのアップロードには$_FILESを使うらしい。

xmlの扱いは、
http://nanoappli.com/blog/archives/5448
simpleXMLというの（標準ライブラリ?）を使えばいいと。
でバイナリはBase64で変換と
http://astel-labs.net/blog/diary/2010/07/100721-1.html
PHPでのBase64の扱いはこれらしい
http://phpspot.net/php/pgbase64%E3%81%AB%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89,%E3%83%87%E3%82%B3%E3%83%BC%E3%83%89.html
simpleXMLはそのままだと可読性が悪いので、インデントをつける。
http://nanoappli.com/blog/archives/5448
でも、メモリの問題なのかDOMDocumentを作るところでSever Errorが出る。（未解決だがまあいいか）

MySQLの操作は、
http://www.phpbook.jp/tutorial/mysql/
ちょっと分量ありそうだけど、まあ大丈夫だろう

SQLからのデータの取り出し
http://www.phpbook.jp/tutorial/mysql/index6.html
SQLは普通に書くのね。

->：「アロー演算子」というらしい。値の取り出し(=>は挿入)のときに使う
http://911.ddtea.com/?eid=1286712

必要知識はこんなもんか。

webpayの使い方(PHP)

webpayの使い方メモ。
pythonではいじってみたけど、PHPはやってないのでやってみた。

まずformからカード情報を登録。CheckoutHelperが楽。
<form action="/hoge.php" method="post"> <script src="https://checkout.webpay.jp/v3/" class="webpay-button" data-key="public_key" data-lang="ja"></script> </form>
これでhoge.phpにpostでwebpay-tokenの変数名で送信される。
最初、jQueryから出力するようにしたけど、なぜかポップアップ(?)が出てこなかった。Javascriptの外に置いたら出てきたのでまあそうやって使うようにしましょう。


必要なものを揃えます。
ライブラリより
"Composer環境下でcomposer.jsonに以下の通りに記述して利用"
???Composerて?
ふむふむ。ライブラリ管理だと。
使い方は？

curl -sS https://getcomposer.org/installer | php
( sudo -s mv composer.phar /usr/local/bin/composer ) //path通った場所に移す or もしくは使う場所に移す
composer.json の作成 @ PHPファイルと同じdirectory(?)
./composer.phar install

かな。これでvendorフォルダが作成されたのでOKぽい。
とりあえずライブラリは入った。
参考：Composer導入をまじめに考える


続いて顧客登録。自分はこの処理にformから飛ばします。
<? php
require "vendor/autoload.php";
use WebPay\WebPay; $webpay = new WebPay('private_key'); $response = $webpay->customer->create(array("card"=>"tok_SampleCardToken"));
?>
返り値はこの場合、$responseに格納。例えばidは$response->idで取り出す。
馴染みのない言語だと、値の取り出し一つでも一苦労 (~_~)
ちなみに->は「アロー演算子」というらしいです。
参考：【PHP】アロー演算子 ->　と　ダブルアロー =>


最後に支払い（顧客idから）
<? php
require "vendor/autoload.php"; use WebPay\WebPay; $webpay = new WebPay('private_key'); $response = $webpay->charge->create(array( "amount"=>400, "currency"=>"jpy", "customer"=>"customer_id" ));
?>
登録・支払いの参考：APIドキュメント

これでOKかな。
jQuery-Ajaxとの併用方法を探さないかんけど。

PHP・Javascriptのデバッグ

PHPとJavascriptのデバッグで戸惑ったのでメモ。

PHP：最初エラーが何も出なくて戸惑った。全部echoとかなの？って焦ったが、そんなはずはなく。よかった。設定をいじるとエラーがブラウザで表示されるらしい。
設定ファイルをいじることもできるようだが、ファイルごとに設定する方向で対応。
このへんを参考に。
// エラー出力しない場合
ini_set( 'display_errors', 0 );
// エラー出力する場合
ini_set( 'display_errors', 1 );

http://www.24w.jp/study_contents.php?bid=php&iid=php&sid=setting&cid=001
http://qiita.com/yukke0310/items/600ba1b33f0073c97a51


Javascript: こっちも最初エラーが出ずで焦る。こっちはブラウザから見るらしい。Google Chromeなら表示→開発/管理→JavaScript コンソールで見れる。よかった。他ブラウザは申し訳ないのですがわかりません。