Because We Love Happy Coding

フリーライターがPHPとかJavaとか勉強してます

prj_LvUp: ココマデの開発経緯、およびロゴ出来た

2017年3月に訓練校を出た後、そこでできた友人に誘われたQPro(休日プログラミング部)で、prj_LvUpというwebアプリケーションを作っている。

数年前から「あったらいいな」と思っていたもので、アイデア勝負みたいなもんだけど、類するサービスは見たことがないし、プログラミングの勉強にちょうどいいかな、と思っている。

ここはその開発日誌も書いていきたい。

イデア勝負なので、組み上がるまで詳細は書かないことにする。ってサービスインしても大手が出て来たらあっという間に負けそうだけどナァ。勉強勉強。

仕様

基本は素のPHPで、でも一応MVCっぽい色気を出してみた。当初Laravalを予定していたけれど学習が面倒になり素PHPに仕様を変更。そしたら職場でLumen by Laravelをやることになったので、Lumen採用してもいいかなー、と一瞬思ったけどやっぱやめとく。

CSSは職場でFLOCCSというのを教わる予定なので、それを入れようと思っている。それの勉強をしてたらSASSもついでに勉強をしようかと思い始め、DreamweaverにSASSの機能があることに気づいて導入してみた。Compassを導入しようとすると常に必ずDreamweaverが強制終了するのでクサっているところ。とりあえずアップデートしてみたら、強制終了しなくなったみたいなので、しばらくはこれで怖々使ってみることにする。

www.tam-tam.co.jp

こちらのサイトで最高に参考になったのが、「最初はSCSSファイルにCSS直書きでもいいんですよ」という情報。ああそうか。なんとなくSCSSの呪文を覚えるまでは一行も書けないと思い込んでいた。だいぶ気が楽になった。

スケジュール

5月の部会に要件定義書を提出して、WorkBreakdownStructureみたいなものを書いてスケジュールを切った。あまりスケジュールをガチガチに追いかけるつもりもないけれど、切っておかないとズルズル遅れるので。既にもうだいぶ遅れている。

部会は隔月で、7月の例会でユースケース図を出した。9月の例会も既に終了し、そこでシーケンス図を出している。
やっぱりこういう部活動みたいなものがあってよかった。一応「何かは作って出さなくちゃ」という気になる。フルタイムで働いているメンバーはなかなか提出物がないけど、そりゃそうだ。週3しか会社に行ってない私でさえ、けっこうギリギリにガーっと時間を作ったりしているくらいだ。

シーケンス図からクラス図みたいなものも起こした。クラス図とシーケンス図の順番が逆じゃねーかという気もちらっとしたのだがキニシナイことにする。クラス図っていうかメンバー変数とメソッドの一覧程度のもので多重量化とか全然書いてないけどキニシナイことにする。

ロゴ

画面遷移図はシーケンス図みたらなんとかなりそうな気がしたので、次はカンプだな、と思ったけどカンプ描くにはロゴが要るな、と気づいてロゴを作った。

f:id:mogami74:20170912104024p:plain

矩形のロゴも。

f:id:mogami74:20170912104028p:plain

もうちょっとなんかかっこよくファミコンっぽくできないかと思ったけど、なんともならんかった(苦笑)

まぁいい。とりあえずこれで進めよう。またいいロゴを思いついたら変えればいいさ。

formのリセットボタン(input type = reset )と同じ挙動をjQueryで起動する方法

jquery でイベント登録フォームを作った

パパゴトというサイトを作っていて、そのトップページには「赤羽から行けるイベントのリスト」というのをつけている。これはPHPとデータベースで実現している。

ここにイベントを誰でも登録できるようにしようと思ってあれこれいじっていた。

jQuery.noConflict()

digwp.com

この記事のおかげでWordpressのcustom_head内にjQueryを書いて動かすことができるようになった。おおーし。

js.studio-kingdom.com

フォームの内容をserialize()して、post()メソッドでPHPへ送信。 成功したらフォームの上に「登録できました」メッセージを載せてわかるようにした。

jQuery によるformのリセット

submit ボタンを使わない状況では送信後にフォームの中身が消えてくれないので、フォームの中身を消す方法を探す。

「formの初期値に戻すのではなく削除したい」というニーズに沿った難しげなjQueryやそれを丸ごとパクっている恥知らずな記事を横目に、いや、ここまでややこしくしなくてもあるだろう……と思って探す。求める正解「formのリセットボタン(input type = reset )と同じ挙動をjQueryで起動する方法」を見つけるまでに苦労した。

alphasis.info

正解は、jQueryじゃなくてraw JavaScriptでした。

blog.dododori.com

これが正解。

$(‘#form’)[0].reset();

で、きちんと動く

iPhoneでHTMLとかPHPとか書きたくなってきた時に見る記事。2017年9月版

はてなブログの記事はマークダウン記法が直接使えるので愛用のマークダウンエディタBywordで下書きしているのだけれど、Wordpressの記事はマークダウン記法が直接使えるわけではないし、HTMLを直接書いてclass指定したかったりすることもある。それに加えて最近はPHPも移動中に書きたくなってきたので、iPhoneで使えるいいエディタが欲しいな……と思って探してみた。

Editorial

tyablog.net

iTunesStoreでは評価が15個あって4.5と高い。時価600円。ただしマークダウン記法がメインっぽい。

ちなみに私が今愛用しているマークダウン記法のエディタbywordの評価はいくつだっけ、と思って見たら評価3.5だった。

公式サイトにあるアプリのスクリーンショットを見て行くと、思った以上にパワフル、高機能でこれはたしかにすごい。Pythonで自動化できんのか……。

Editorial

Editorial

  • omz:software
  • 仕事効率化
  • ¥600

DraftCode PHP IDE

www.webprofessional.jp

PHP関連のエディタで評価がまともなエディタを探すのは難しい。これはレビュー7件と少なめだが、4.5ある。時価1,300円。

レビューによれば「iPhoneで書いて動作確認してからDropbox経由で母艦に移して」って天国かよ。ゴクリ。

WordPressPhpMyAdminが動くって……すげえな。

しかしPHPのバージョンが固定されちゃうと思うけどその辺はどうなんだろうな。PHP7とか書きたくなったら逆に困らないか。

DraftCode PHP IDE

DraftCode PHP IDE

  • Solesignal Limited
  • 仕事効率化
  • ¥1,300

Textastic

時価1,200円。評価14件で4.0。PHPにも対応。悪くない。ただし「ATOK for iOSと相性が悪い」と書いているレビューがあって気になる。

Emmet対応だって。そりゃすごい。

Textastic Code Editor 6

Textastic Code Editor 6

  • Alexander Blach
  • 仕事効率化
  • ¥1,200

Coda

www.webessentials.biz

ブログなんかの評価を見る限り定番アプリだと思っているけれど、3,000円と高価な割に、レビューは不具合の報告が多い。評価は3.5。

https://panic.com/jp/coda-ios/panic.com

Coda

Coda

  • Panic, Inc.
  • 仕事効率化
  • ¥3,000

GoCoEdit

matagotch.hatenablog.com

ここのブログではけっこう誉めてるな。マークダウンの文字化けだけ気にしなければけっこういいということか。Bywordと併用するならアリかも? 時価840円で少々お安い。

GoCoEdit - Code & Text Editor for DROPBOX FTP SFTP

GoCoEdit - Code & Text Editor for DROPBOX FTP SFTP

  • Christoph Gogolin
  • 仕事効率化
  • ¥840

以下選外

レビューなどを見る限り品質に不安があるもの。今後バージョンアップとかで安定したら価値が上がるかも?

Buffer editor

Buffer Editor - Code Editor

Buffer Editor - Code Editor

  • Jesse Kuronen
  • 仕事効率化
  • ¥600

Source

これはGitクライアント内蔵らしい。レビューは1件しかないので判断は保留。しかしGitを使うならいいかも。他にもGitクライアントらしきものはいくつかあるので、別ジャンルとして調査しないとなんとも言えないかな。

Source - git client and code editor

Source - git client and code editor

  • Ian McDowell
  • 仕事効率化
  • 無料

Code Master

Code Master - Source Code Editor

Code Master - Source Code Editor

  • Justin Bush
  • 仕事効率化
  • 無料

まとめ

今回の趣旨から言えばTextasticかなぁ。スクリーンショットCSSなどいろんなコーディングができる感じがして好感。

Textastic Code Editor 6

Textastic Code Editor 6

  • Alexander Blach
  • 仕事効率化
  • ¥1,200

Editorialはたしかにすごいんだけど、マークダウン記法は今回求めていない。というかBywordで割と満足していて、それ以上の機能を使いこなせる気がしない。

DraftCodeも興味あるけど、バージョン固定になっちゃうのがなぁ。JavaScriptとか書きたくなるかもしんないし……。

参考URL

iPadでアプリが作れる!?iPadを利用した開発環境まとめ | Tech2GO

blog.codecamp.jp

iPhone / iPad 上の開発環境 2016年度版 - NAVER まとめ

matome.naver.jp

iPadを「Web開発マシン」に変貌させる、おすすめ神アプリを集めてみた! | シェアしたくなる最新のWebサービス・ITニュース情報をチェック! APPGIGA!!(アプギガ)

plus.appgiga.jp

シーケンス図で悩むお年頃。

個人プロジェクトのシーケンス図を描いている。自分の仕組みを図に表すのは楽しいけれど、悩ましい。

ブラウザと、表示しているPHPとをどう表記するのが適切か、また、その後ろの動きをMVCモデルに合わせた方がいいのかどうか……など悩みは尽きない。

経験値を積むとこれがわかるようになるのかなー。

f:id:mogami74:20170829021008j:plain

Wordpress記事タイトルにタグを入れたら、twitterシェアボタンのツイート欄にタグが出ちゃった話

wp_strip_all_tags()

職場のブログでタイトルを3行に分け書きしたいと思い、spanタグを入れてみたところ、意外と簡単に分け書きすることができた。見栄えも整えた。

blog.aibri.co.jp

ところがふとした拍子に気づいたのだけれど、twitterのシェアボタンの挙動に影響が出た。リンクurlに"text=タイトル"という形で属性を持たせてツイート欄に表示させているため、タイトルにタグが入るとツイート欄にタグがそのまま出力されてしまい、ちょっとみっともない。

タグを削除できるか、やってみた。シェアボタンの記述を探したところ、テーマファイルの一つに記述をみつけた。

使われているPHP

echo $title_encode

となっている。タグ除去の方法としてはwebで調べてみるとwp_strip_all_tags()メソッドが使えるらしい。

echo wp_strip_all_tags($title_encode)

ところがこれはうまくいかなかった。たぶんencodeの絡みかなー、と思ったらやっぱりそうだった。$title_encodeの出所を探ると、こんな感じだった。

$title_encode = urlencode(get_the_title());

urlencode()の処理内容を確認すると「-_. を除くすべての非英数文字が % 記号 (%)に続く二桁の数字で置き換えられ」とある。

-_. を除くすべての非英数文字が % 記号 (%)に続く二桁の数字で置き換えられ --via PHP: urlencode - Manual PHP: urlencode - Manual

記号を置き換えたものがタグと認識されないので、wp_strip_all_tags()でやってみても、あるいはPHPのstrip_tags()でやってみてもダメなわけだ。

要するに、「urlencode→タグ除去」ではタグがタグと判定できない。「タグ除去→urlencode」に順番を変えればいいわけだ。$title_encodeを直接書き換えてもいいが、他に影響が出ると困るので変数を増やすことにした。

$title_encode2 = urlencode(wp_strip_all_tags(get_the_title()));

get_the_title()でタグ付きのタイトルを取り出したら、wp_strip_all_tags()でタグを除去し、それからurlencode()にかける。

これでうまくタグを除去してtwitterに渡すことができるようになった。

ああよかった。

WordPressをDreamweaverで編集できるようにしたい から始まるMySQLクリーンインストール

前にWordpressDreamweaverで編集できるようにしようと思って、途中で挫折したんだったような気がする。今ならだいぶ成長したしひとりでできるもん。でもwebは参考にするけど。

環境はMac OS X Yosemite 10.10。

どこまでやったんだったか調べてみたら、どうもローカルのPHP起動とMySQL起動まではやってあったっぽい。じゃああと一息じゃん?(と思ったのは勘違いだった(汗))

参考にした記事。

blogs.adobe.com

なんかこの「サイト設定」の「リモートサーバー」「ローカルサーバー」の選択が、webの記事だとチェックボックスになっていて「リモート」「ローカル」両方選択できるのに、うちの環境だとラジオボタンになっていて、どっちかしか選べないんだよなぁ。これどっか設定あるのかな。気になる。リモートサーバーの定義すれば自動的にチェックボックスになるのかな。

ひととおり終わって、「localhost/phpinfo.php」は無事動いた。ところがDreamweaverのリアルタイムプレビューから起動すると、「localhostに接続を拒否されました」と出る。あれ? どこがおかしいんだ……?

確認してみたら、サイト設定のサーバーの「web URL」をlocalhost:8888にしていた。webの記事通りにしたんだけれど、ここはlocalhostが正しいみたい。これで無事リアルタイムプレビューも起動。おっ。PHPの編集できるDreamweaverっぽくなってきた。

MySQLが不調

次はこっち見てWordpressの編集に進もう。

blogs.adobe.com

WordPressを新規にダウンロードして解凍。設定ファイルを書き換え。

ところがどうもうまくいかない。

PhpMyAdminのユーザー追加

私が使っているバージョンでは、「特権(privilege)」のリンク見つからない。最初、rootユーザーではない権限で入っちゃってたみたいで、入り直してやっと見つけた。User accountsタブに置き換わっている模様。

f:id:mogami74:20170801142026j:plain

ところが、ユーザーを設定してWordPressの設定をしようとしてもうまくいかない。

  • パスを通す
  • ルートユーザーにパスワード設定
  • ブログ用のユーザー作成

などしてみたのだけれど、でもWordPressに認識されず。なぜ認識されないかよくわからない。

OS Xの不可視のライブラリー見るとMySQLフォルダと「MySQL-ver」バージョン付きの「mysql-5.6.35-macos10.12-x86_64」フォルダとあるんだけどこのせい?

MySQLの再インストール(とHomebrew導入)

もういっそ全部インストールしなおそう。

qiita.com ↑こっちの記事の方がアンインストールの細部まで書いてある。

yukiyuriweb.com ↑こっちの記事は再インストールまで書かれている。

私の環境では /usr/local/mysql/ と /usr/local/mysql-5.6.35-macos10.12-x86_64/ のふたつのディレクトリにファイルが存在していたので、両方とも sudo rm して削除。この混在がなぜ生じたかわからんけど、原因だったんじゃないかという気がしているんだけどなー。

ついでにHomebrewをインストール。 qiita.com

これまでHomebrew使ってなかったのでいろいろ不便していたけれど、これでまたラクになっちゃうかも。

MySQL地獄

ここからが地獄。いくらやってもエラーが消えない。根本的な知識なしに対処療法でやってるのがいかんのだろうけれど。

いくつかの状態から抜け出せない。

TIMESTAMP with implicit DEFAULT value

「TIMESTAMP with implicit DEFAULT value is deprecated. Please use –explicit_defaults_for_timestamp server option」

これに対処するのは↓でいいみたい。 qiita.com

Can’t connect to local MySQL server through socket ‘/tmp/mysql.sock’

touchしてみる

Can’t connect to local MySQL server through socket ‘/tmp/mysql.sock’(2)

の場合。

sudo touch /tmp/mysql.sock

ファイルが作成されてないのが問題というパターンもあるらしく、touchコマンドでファイルを作ってみる。(38)に移行する……。

ファイル所有権の問題(らしい)

Can’t connect to local MySQL server through socket ‘/tmp/mysql.sock’(38)

ls -l /usr/local/var/mysql/

でファイルの所有権を確認しながら変更していく。ただ、何が適正状態なのかがわからん(汗)

「The server quit without updating PID file」

いろいろ調べて問題のキモはどうやらここ。

mysqlの起動ユーザーと設定ファイル(/usr/local/var/mysql/*)のユーザーを同じにしなくてはいけません。
--via mysqlが起動しない問題 - Qiita

mysqlの起動ユーザーと設定ファイル(/usr/local/var/mysql/*)のユーザーを同じにしなくてはいけません。」 そうだよなぁ、そうだよなぁ。んで起動ユーザーはmy.cnfで調べないといけない。この置き場所は環境によって違うらしいけど、私の場合はusr/local/etc/my.cnfにあった。

www.findxfine.com

私のmy.cnfにはユーザーの記述がなかったので、user=mysqlを追加。でも改善せず(最終的には削除した)。

エラーログを読むことも大切ということがだんだんわかってきた(当たり前といえばそうなんだが)。

/usr/local/var/mysql/*.err: Permission denied

が出る場合は、エラーファイル(*.err)が更新されてないので、それをなんとかする。具体的には sudo chown -R使って権限を書き換えてみる。自分のユーザー名にするか、_mysqlにするかなど。

エラーファイル(*.err)が更新されていたら、テキストエディタで開いて中を読む。[ERROR]になってる場所を探す。

[ERROR] InnoDB: The innodb_system data file ‘ibdata1’ must be writable

ほほう。そのibdata1はどこにあるかというと、/usr/local/var/mysqlの中にある。これの権限がおかしいってことね。

sudo chmod -R g+rwx /usr/local/var/mysql
--via mysqlを5.5 -> 5.6にバージョンアップしたら、Can't find file: './mysql/plugin.frm' (errno: 13 - Permission denied)で起動こける - Qiita

このchmodというやつが使えそうな気がするぞ。

これ以後 .errファイルを開き、[ERROR]になっている箇所を確認し、そのファイルの管理者権限を書き換えながら進む。

私の場合は、chmod -R username:_mysql にすると解消する場合が多かったみたい。

なんとかmysql.server startで起動するようになった。よかった……いやまた急に起動しなくなるかもしれんのだが。

mysqlのパスワード設定でハマる

rootのパスワードを設定してexit、再度ログインしようとすると蹴られる現象に遭遇する。えー。文字コード設定か何か変なのかな。

qiita.com とりあえずここを見ながら、パスワードを回避。

んで、mysqlデータベースのuserテーブルを見ながらあれこれいじってみた。

結果的にはPASSWORD()のつけ忘れだったようで、以下で動いたことは動いたけれど、warningのおまけがついたのが気になる。

mysql> update mysql.user set authentication_string=PASSWORD(‘パスワード’) where user = ‘root’;

この後 select authentication_string from user where user=‘root’; とやって様子を見ると、暗号化されたテキストが格納されたことがわかる。

Show Warning で見ると「'PASSWORD' is deprecated and will be removed in a future release. 」てあるんだけど、まぁとりあえず今はいいや……よくわからん。

MySQLが動くまで長かった……

PhpMyAdminに戻る

ここまで来るとphpMyAdminは問題なく稼働。

blogs.adobe.com

Wordpressに戻る

これがうまくいかない。

http://localhost/tec/wp-admin/setup-config.php

でデータベースに接続できない。ユーザー名もパスワードも間違ってないはずだけど……。

f:id:mogami74:20170801141115j:plain

弱り果てて、自分でPHP書いて同じ階層に置き、DBにアクセスしてみた。

Error:SQLSTATE[HY000] [2002] No such file or directory

ふうむ? やはりSQLとの接続がうまくいってないみたい。で、また「Error:SQLSTATE[HY000] [2002] No such file or directory」でググる

とはいえ最近は、skip-networking を指定しない代わりに bind-address = 127.0.0.1 をデフォルトとしてローカルからのみTCP接続を受け付ける設定にするのが主流なようなので、そういった環境では 127.0.0.1 でも特に問題なく動くと思います。 --via PHPでデータベースに接続するときのまとめ - Qiita PHPでデータベースに接続するときのまとめ - Qiita

うん? このbind-addressって文字列は見覚えがあるな。 usr/local/etc/my.cnf で見たやつだ。ということは、localhostで指定しない方がいいのかな?

127.0.0.1に指定すると「ファイル wp-config.php に書き込めませんでした。」とは言われたものの「手動で wp-config.php を作成し、中に次のテキストを貼り付けることができます。」ということで先に通してもらえた。「インストール実行」をクリック!

f:id:mogami74:20170801141157j:plain

やったー。localhostWordPress入ったぞ。

順調

ふたたびAdobeの記事に戻ってDreamweaverの設定を続ける。

blogs.adobe.com

サイトの設定、サイト固有のコードヒントの設定、順調。

ライブビューの表示までなんとかなったので、とりあえず終了。

『Laravelエキスパート養成読本』に始まるLaravel勉強の遍歴

Laravelエキスパート養成読本 [モダンな開発を実現するPHPフレームワーク!]

Laravelエキスパート養成読本 [モダンな開発を実現するPHPフレームワーク!]

わからない単語だらけ(苦笑)

後で調べよう……

私はそもそもPHPのオブジェクト志向がわかってない

そもそもPHPのオブジェクト志向がわかってないっぽいということがわかってきた(汗)

スコープ定義演算子::

static なものを呼ぶ時に使うってことでいいのね?

これでやっとLaravelのReute::get()の意味がわかった。JavaサーブレットでいうdoGet()てことね。

スキーマビルダー

JDBC みたいなもんかな?

www.messiahworks.com

公式の説明の方が書籍よりわかりやすい

書籍を買ったんだけれど、公式のクイックスタートの方がわかりやすかった。

Eloquent ORM

そもそものORMから調べないとわからない。

オブジェクト関係マッピング - Wikipedia

オブジェクト関係マッピング(英: Object-relational mapping、O/RM、ORM)とは、データベースとオブジェクト指向プログラミング言語の間の非互換なデータを変換するプログラミング技法である。オブジェクト関連マッピングとも呼ぶ。実際には、オブジェクト指向言語から使える「仮想」オブジェクトデータベースを構築する手法である。

なるほど。データベースを擬似的にオブジェクト扱いする技法ってことかな。

オブジェクト関係マッピング - Qiita

オブジェクト指向は「現実世界の物事に即したデータモデル」である一方で、
関係データベースは「検索やCRUDなどの処理に最適化されたデータモデル」となっている。

このような設計思想の違いを、インピーダンス・ミスマッチという。

成ル程。

Eloquentは「雄弁な」という意味らしいけれど。

Eloquent:利用の開始 5.1 Laravel

Eloquent ORMはLaravelに含まれている、美しくシンプルなアクティブレコードによるデーター操作の実装です。それぞれのデータベーステーブルは関連する「モデル」と結びついています。モデルによりテーブル中のデータをクエリーできますし、さらに新しいレコードを追加することもできます。

Laravelクイックスタート 4.2 Laravel

Eloquentには様々な規約があり、そのうちの一つは「データベース名は、モデル名の複数形を使用する」というものです。便利でしょう!

この規約チェックしとかないといかんな。テーブル名も気をつけておかないと。(記述を追加すれば違うテーブル名でも対応できるみたいだけど)