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 コンソールで見れる。よかった。他ブラウザは申し訳ないのですがわかりません。

vimでPHP開発環境を整える

そういえば、

AWSのOSがLinuxでGPUが使えない(?)のでvimに挑戦！
とりあえずPHP開発環境を整えたいと思います。

とりあえずプラグインの入れ方
http://qiita.com/kamina91/items/4d2f2f12df8512fac889
.vimrcって何？ってところから。
とりあえずホームディレクトリに何か書いて入れとけばいいと。
gitのやり方とかも書いてあってありがたいです。

このへんから適当に選んで入れてみよう。そうしよう。
http://qiita.com/okamos/items/caf5a0b19ce893a75363
http://tti.matrix.jp/blog/2015-05-19/vim%E3%81%A7%E3%81%AEphp%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83/
http://qiita.com/tekkoc/items/8897cdf378305c4e547d
http://qiita.com/shima_529/items/bf647b9764136c1ac7f7

とりあえず構文補完をしてくれるらしいneocomplete.vimというものを入れてみよう。
と思ったけど、Luaを入れてないとダメなのね（で入ったけどvimで使えない）。
Luaの入れ方
http://saihoooooooo.hatenablog.com/entry/2013/11/29/152525

一応入ったが、途中で.vimrc内の記述がおかしいとのエラーが出て使えなかった。が、いじってたら直った（原因不明）。

Luaが有効なvimを入れ直したら、色分けとか自動インデントとかなくなってたので、これらを参考に修正。なるほど、便利かもvim。
http://51flya.com/linux/581.html
http://www.garunimo.com/program/linux/corumn-linux22.xhtml
http://vimblog.hatenablog.com/entry/vimrc_set_tab_indent_options

以上

MySQLのお勉強

まずこの部分から作成。

MySQLについてお勉強。何せ使ったことがないので。
今までは大体csvファイルとかでデータ管理してました。
何が違うのかいいのか（検索とかか？）ということも含めお勉強。

大体の使い方はここでお勉強。
http://se-java-school.com/itstudy/database/intro_db_jdbc/intro.php
なるほど便利そう。



他さらに調べたこと

属性について
書く変数に対していろんな制約が付けられる。
使ったのを並べておきます。

UNSIGNED...符号をつけない（負の値を扱わない）。
ZEROFILL...桁数が足りない場合、上位の桁を0で埋める。
NOT NULL...NULLにしてはいけない（データの中身が空ではいけない）。
AUTO_INCREMENT...自動的に連番を入力する。

NOT NULL以外はid以外で使わないかも。

あとTABLE作成のときは
PRIMARY KEYやFOREIGN KEYにを付ければいいのか？

括弧の意味
なんか データ型によって意味合い違うみたい。
整数型は表示桁数だが、浮動小数型や文字列型は最大データ長を指定しているらしい。
ややこしい。

位置情報の扱いかた
単に緯度経度を数値型で保存しとけばいいのかと思っていたが、GEOMETRY型というのを使うと何かと便利らしい。
使ってみる。ENGINE(後述)はInnoDBでも扱えるが、実際はMyISAMでしか使えないらしい。


DATETIMEとTIMESTAMP
TIMESTAMPは自動更新されるのか？
データはほぼ同じみたいだが、2つ以上置くと扱い面倒かもだし、おとなしくDATETIMEにしといた方がいいのか？

BLOBとTEXT
大きなデータを乗せるときに使うらしい（データ長に制限がない、その代わり処理の負担が大きくなる？）。
画像とかはBLOBらしいが、TEXTにするにはどのくらいからが目安なのだろうか。
それほど、長いのは扱わないということでVARCHARにしときます。

ENGINE
何か色々あってよくわからないが、InnoDBとMyISAMってのが主流らしい、詳細は全然わからんがとりあえずそれで。

認証
どんな情報がいるのかみたら、大体の場合は文字列らしい。
とりあえずVARCHAR(256)くらいで用意しとけばいいのかな。

作戦変更 -自分で作る-

s2Memberの支払いで無料版だとpaypalに登録していないといけないことが判明したので作戦変更。（テストするのが面倒）

やっぱりwordpress経由じゃなくて一から作ってみますか。
そんなに難しそうじゃないし。

データベースはWordPressが使ってたって理由でMySQLで。
MySQLはちゃんと扱ったことなかったのでお勉強。
http://se-java-school.com/itstudy/database/intro_db_jdbc/intro.php
ふむふむ。画像の扱いは?
http://hijiriworld.com/web/mysql-img-binary/
ふむふむ。元dataの他にmineタイプを記録していた方がbetterと。
blobでなく、binaryとかでもいいのかな。

設計はどうするか。
https://thinkit.co.jp/article/1210/1
ふむふむ。http通信でやれば良いと。
get, postでリクエストして、xmlで返す。
(iPhoneでなくてもこの設計で応用できるな)

xmlで画像データ送りたいんだけど。
http://astel-labs.net/blog/diary/2010/07/100721-1.html
ふむふむ。Base64を使ってできると。

というわけで基本設計はこうします。


システムの中心はデータベースですね。
EC2のボリューム内にMySQL作ってしまうか、AWS RDS使うか迷ったけど、
とりあえずお試しだし、サーバープログラムのデータベース接続先いじればいいし、WordPressインストールしたときに既にMySQLインストールしてあるので、RDSは使わない方向で。

なんかできそうな気がスル！
PHPからMySQLにアクセスする方法と、UI(クライアントプログラム)ですかね。
あとwebpayでの支払い処理。
PHPは慣れてない。お勉強はつづく。

2016/3/28追記
このサイトにこんな記述が！

これまでのWebサービスでは、サーバ側で画面(HTML/DOM)を生成していたのに対し、最近のWebサービスでは、サーバ側はDB操作のみを処理し、クライアント－サーバ間をAjaxでJSON交換し、画面(HTML/DOM)はクライアント側で生成する方式が増えてきました。AngularJSは、クライアント側 JavaScript のコントローラでデータモデルを管理し、画面(ビュー)とリアルタイムにデータを交換するのに適したフレームワークです。

自分の設計は間違っていなかった！（笑） 

s2Memberの使い方

WordPressを会員制にする+BuddyPressとの相性がいいプラグインs2Memberの使い方がよくわからなかった（日本語解説がほぼなかった）ので備忘録。
これだけでも十分なのですが、さらに機能（支払いが主？）が充実したPro版もあるです。

最初にやること
Login Welcome PageとMembership Option Page（ブランクの固定ページ）を作って、s2Member > General Optionsで関連付けする。


s2Memberは基本的にLoginの前にPayPalでの支払い設定を求めるらしいのでその設定。

PayPalでの操作
PayPalアカウントの作成、ビジネスアカウントへのアップグレード、API証明書の請求
この辺は他で手順解説サイトがあると思うので割愛。
ビジネスアカウントへのアップグレードは郵送手続きとかも噛むので結構時間かかります。

支払い管理

上記で登録した内容をs2Member → PayPal options → PayPal Account Detailsに記入。

s2Member → PayPal ButtonsでSubscribers Levelを選んでShortcodeを作成。それをMembership Options Pageに設定した固定ページ(テキスト部分)に貼り付け。

誰でも登録できるようにする
Open Registrationを設定するとPaypal支払い設定をしなくても、無料ユーザー(Subscribers Level #0)として登録可能になる。
s2Member > General Options > Open Registrationで設定可能。

便利そうなBuddyPressのプラグイン

便利そうなBuddyPressの色々プラグイン調べました。
とりあえず作っているサイトで採用するかどうかで分類しました。
参考までに。

採用
s2member
WordPressを会員制にするプラグイン。
アクセス管理とか色々機能が付いているようだ。
Paypal使って支払いまで管理できるようなので、ひとまずはこれだけでいいかも。

Buddypress Activity Plus
BuddyPressアクティビティに画像とか動画とかリンクとか貼れるようにするプラグイン(デフォルトではテキストのみ)。
EWWW Image Optimizer
上とセットで。
投稿される画像のサイズを最適化するプラグイン。
とんでもないサイズの画像対策。

BP Profile Search
プロフィール検索の拡張。サイドバーに付けられる。

Invite anyone
招待機能。ユーザーを増やそう。

Events Manager
イベント管理機能を付与するプラグイン。
出欠の管理とかもできるらしい。
入れたらすんなり入ったようなので採用。


未定
SiteGuard WP Plugin
不正アクセス対策で有名らしい。
なぜかonすると出たあとは入れなくなるので(s2membersとの相性?)、今のところ外しています。

Social Login

ソーシャルサイトのアカウントを認証に使うためのログイン。まだ試してない。

Never Let Me Go
大会ページを作成。まだ試してない。

Buddypress Message Attachment
BuddyPressメッセージ機能拡張。Debugのエラーメッセージが出るので取り合えず切っている。

BuddyPress Auto Group Join
新規ユーザーを自動的に特定のグループに加入させるプラグイン。
先々使うかもしれないので。


不採用
simple membership
s2Memberと同様にWordPressを会員制にするプラグインとして有名らしい。
s2membersの方がBuddyPressとの相性がいいみたいなのでそっちを採用。

Welcome Pack
Theme My Login
Member Only
Absolute Privacy
アクセス制限とログイン関連。
s2Memberで代用できそうなのでパス。

Advanced Custom Fields
プロフィール欄の拡張。BuddyPressのデフォルト機能で十分だったのでパス。

RS Buddypress Activity Refresh
アクティビティ自動更新用プラグイン。デバックエラー出てるし、必須ではないのでパス。



大まかにはこれで事足りそう。
しばらくはこれをいじって使えるようにするのが目標。
後は、

1. 課金方法
2. アバター作れない問題
3. プロフィールのタイプごとに分岐

が解決すれば形にはなるかな。

課金はとりあえずs2MemberのPaypal機能を試して見る。
でも月で自動払込とかにしたいんだよな。
プロフィールタイプで課金方法も分けたい。

アバターが表示されない問題が発生していて、さすがにそれは解決しなければ。
BuddyPress Activity Plusは動くし、写真はアップロードは出来ているみたいなんだけど。
jQueryとか書いてあるサイトあるけど今のところ原因不明。

プロフィールタイプ(フィールド値?)ごとに閲覧制限はどうしようか。
1. そんなプラグインを探す。
または作る（どれくらい手間なんだろう?）。
2. bg_register_member_type()を使う。
3. グループに強制参加させてグループごとに閲覧制限。
とか？？
とりあえず全部一緒でいいか。

BuddyPressを動かす

WordPressがうごいたのとりあえずBuddyPressをインストール
これを参考にしました。
http://ryus.co.jp/blog/bpinstall/
http://ryus.co.jp/blog/bpuser/
http://ryus.co.jp/blog/bpgroup/

問題1
そもそもインストールできない。
どうやらapacheにファイルを弄る権限を握らせなければならなかったようだ。
下記のサイトの一つ目の対策で解決した。
chown -R apache:apache (WordPressを設置したディレクトリの名称)
http://www.sandalot.com/wordpress%E6%9B%B4%E6%96%B0%E3%81%A7ftp%E5%85%A5%E5%8A%9B%E7%94%BB%E9%9D%A2%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AE%E5%AF%BE%E5%87%A6%E6%B3%95/

問題2
日本語化はまだ対応してない(?)ようなのでパス。（後日やるはず）
最悪欧米対象で作ります。
俺、英語できるし(高笑)

問題3
早速 新しいユーザーを登録しようとしたら、登録画面がでない！
これはapacheのhttpd.confをいじったら直った。
最下行に追加（パスは適宜変更）↓

<Directory "C:/pg/Apache/Apache2.2/htdocs/wordpress">
    AllowOverride All
</Directory>

http://www.adminweb.jp/wordpress/permalink/index2.html
http://qiita.com/s2maeda/items/21d9458e44f86597d1ae
あと大事なのはapacheを再起動しないといけない。

.htaccessファイルがおかしいのかもと疑ったが違った。でもまあ備忘録
http://itstudio.co/2014/10/21/3146/
http://www.cherrypieweb.com/weblog/technical/20131017121752.php

問題4
Activity, Member, Groupはまだでない。
パーマリンクになぜかindex.phpが入るようになっていたのでそれを消したら直った。
http://liginc.co.jp/web/wp/customize/148458

あー疲れた。でも楽しい。
これで一通り動くことを確認。

これでなんとかSNSっぽいのが作れた！