I’m loser, baby.

So why don't you kill me?

p5.js素晴らしいですね。

JavaScript Webアプリ 音楽

アルバムも無事発売になって、完全放置だった自分のHPも少し手を入れていました。
senjiniban.hatenablog.com

それでようやくp5.js触り始められて、機能確認以上のものではないですが、今日はこんなもの作っていました。音が出るので注意。
f:id:SenjiNiban:20160904184658p:plain
http://onbangdo.net/testone/
ちょっとずつ、色々作ってみる予定。

とりあえず動くという事：追加

  • 担当している業務がようやっとベータ状態になってまだまだ作業は多いのですが一つ印象的なことがあったのでメモ。
    • 画像の扱いの話ではあるのですが、もっと根っこの話でもある。
  • CakePHPでデータベース上に保存し、表示するってかたちで画像を管理しようとしていました。
    • 保存して画面上に表示させるまではいくんですが、画像が画像無しアイコンにしかならなくて、エラい長く詰まることに。
      • 他の作業を順次進めてはいたんだけど、ついにこれだけ残ってしまいました。
  • トラブルの出発点になったところは以下のCakePHPソース
function imgview($id = null) {
    $this->layout = false;
    $this->autoRender = false;
    header('Content-type: image/jpeg');
    $posts = $this->Post->findById($id);
    echo $posts['Post']['image'];
}
  • 細部は違いますが、コントローラーで画像ファイルを読み込み、バイナリにヘッダを付けてあげて、このコントローラーを画像配置してあるURLに見立ててビューから読み込めば表示される。
    • はずなのですが、どうしてもうまく表示されませんでした。
  • 最初、2行目が入ってなくてリーダーに指摘されて入れたんですが、それでも表示されず、調べて3行目も追加してもまだだめ。画像無しアイコンのまま。
    • 4行目を省くと化け化けの文字列が表示されるので、データの格納が上手く行っていない訳ではないようです。
    • phpMyAdminから直接データを落として拡張子をjpegにすればちゃんとjpegファイルは見られました。
    • ヘッダでファイルの種類をtext/htmlにして字化け表示させて、そのページをダウンロードして拡張子をhtmlからjpegにしても正しく画像が表示されました。
  • ビュー側の問題かと思ってリンク先URLに.jpegくっつけてみたりしてもやっぱり駄目。
  • さー困った。
    • これからディレクトリに画像を直接あげる方式にすると、手戻りで時間もかかるし自分の現状のスキルでアップ、表示は良くても他データとの紐づけとか削除とかの管理とかが怪しいものになりそうだし悪手過ぎる。
    • こういう時、我流で上っ面だけ学んでいると何が原因なのか本当に判らない。
      • 自分の何かのミスなのか、バージョンが違うから方法が間違っているのか、CakePHP、MySQL、PHPそれぞれのバージョンの組み合わせで起こる特殊なエラーなのか、それともブラウザの問題なのか、勘所が全く判らない。
      • リーダーも調べておくとは言ってくれたけど、多分忙しくてこれどころじゃない。
  • ネット調べても画像表示の方法は山ほど出るけど、トラブル対処法はこの件に関しては見当たらない。
    • しょうがないのでCakePHP、MySQL、PHP、と一つづつググりながら調べていっても、特に間違ってはいないようで…。
      • いやまて、PHPじゃないけどPHPのところで似た問題見たような…、ってこれかー！
  • 結局問題は、何故かそのスクリプトがUTF-8（BOM有）で保存されていたことで、BOM無しにしたらあっさり画像がブラウザ上で表示されました。
    • 要はBOMが悪さして、MySQLのデータを画像データにする際にデータを壊していたのでした。
  • これなんですよ、無自覚に取りあえず動くものに乗っかっていると何かあった時に打つ手が判らなくなるっていうのが怖いなあ、と思って。
    • でも何でこれBOM有にしてたんだろう？自分がやったのは間違いないんだけれど記憶が無い…。
      • なんか違うエディタで開いて保存したんだっけか？

ちょっと宣伝

音楽
  • 週末は土曜日はぐったりしてて日曜日はプログラムの手直しとかしてました。
  • プログラムの話はちょっと置いといて宣伝です。
  • 8/16にイギリスはエジンバラのレーベルbearsuit recordsよりスピリットアルバムがリリースされることになりました。

bearsuitrecords.webs.com

  • 現在一曲試聴できますよ。

soundcloud.com

  • レビューも書いてもらってます。

senji nibanmarklosingtoday.wordpress.com

乞うご期待！！

とりあえず動くという事：続き

  • CakePHPに関して今日一つ壁が超えられたのでメモ
    • 何かおかしい、何かおかしい、と思いながらも1週間も試行錯誤してしまっていました。
    • 先週は同じところを行ったり来たりで土日潰して勉強したけど、月曜日も全く状況が変わらず流石に焦った。
    • 月曜の夜にリーダーと少し話をして、問題点の指摘と新方針をもらって、今日その方法でやり直したらスルッと進んでしまったのでした。
    • 何がいけなかったのかというと「設定より規則」の概念との付き合い方が悪かったというか。
  • CakePHPは「設定より規則」のルールで設計されているので、データの閲覧、登録、編集、削除だけ出来ればいいというのなら、データベースのテーブルの名前を規則に則って付けてあげると、ほとんどプログラムせずにWEBサイトが出来てしまいます。
    • ここまで簡単にするには１データ、１モデル、１コントローラ、１ビュー、１画面（ちょっと違いますが）になりますが。
    • ですが、それだと通り一遍のものしかできないので、ある程度は原理原則を離れて自分独自のことをする訳です。
  • それで、自分がはまってしまったのは、どこから独自ルールで行くべきか、という見極めを間違えてたからでした。
    • BAKEが大変便利なんで、自分は最初欲しい画面の数だけモデルを作って、コントローラとビューは自動生成してそのあといじる、というスタイルにしてました。
      • そうしたら、それらビューやコントローラからデータを参照しようとしたら参照方法が複雑になってしまって、CakePHP初心者としてはろくにログインログアウトすら作れずお手上げになってしまいました。
        • 挙句の果てに独自ログインログアウト処理を作ってしまい、そうじゃないから、と呆れられた。
    • 昨日指示してもらったのは、モデルまでは１対１で作って、コントローラから欲しい画面の数だけ作る、という方針。
      • コントローラから任意のモデルを参照出来て複数参照も可能、ということはリーダーから聞いていたので、よもや、自分が画面ごとにモデル作っているとはリーダーも思っていなかったらしい。
        • 自分はその話を聞いて、その話の流れで出た、モデルも任意のデータを参照可能、ってところだけ拾い上げていたんですね。
      • こっちは段々焦ってきているので、とにかく動くものをそろえたいと思って、動作が保証されているBAKEで出来る限り自動化してページを作りたいもんだから、独自ルールでモデルを作ってしまった訳です。
        • そうして仕様に合わないページを量産して、仕様に合わせようとしてドツボにハマる、という。
        • 今日は方針を変えたので、いくつか想定されているユーザーグループのうち、一番簡単なページ構成のものを仕様通りに作ることにまず専念しました。
      • 新方針で作業進めたら、ログインログアウトは元より、前に面倒くさくて放置していたところもさくっと出来てしまった。
  • 結論言うと学んだのは「設定より規則」の方針で作られたフレームワークなら、下の層ほど規則に則って作った方が良いって事でした。
    • 仕方なく独自改造するなら、出来るギリギリまで上の層で済ませるべき。
    • かなり下の層で独自にやるなら、そこから上を規則に則るにしてもそのフレームワーク使わない方が良いかも。

とりあえず動くという事

  • この土日はCakePHPとPHPの勉強してました。
    • 勉強は本読んでノートを取るというアナログスタイル。
      • これが結果的に良かったようです。
      • 普通はPCで確かめながらやるんでしょうけど。
    • 自分が直接PHPいじってたのはまだオブジェクト指向が導入されるかされないかってところで、その後はMODx経由しかいじったことなかったけれど、今回改めてPHPのオブジェクト指向を学んだ気がする。
    • 今週苦しんでいたCakePHPですが、CakePHPというよりCakePHPの機能とPHPの機能が切り分けられなくて、コントローラでどう書けばいいか判っていなかったということはきちんと判りました。
      • 今やらせてもらっている業務ではモデルまでは何とか出来た（とはいえ幾度となくテーブルは作り直したけど）そこから明らかにスピードが落ちたのはここが問題だった。
    • これでスラスラCakePHPが書けるとはもちろん言わないけれど、前ほど身動き取れない感は無くなった気がする。
      • いやホント、前に進めないとシャレにならんけど。
        • PHPの理解不足が良く判ったのは成果と言える。
  • BAKEで取りあえず動くものが出来るのは超便利だし、仕事としては助かること山のごとしなんですが、それって勉強するのにはどううなんだろうかと考えた。
    • 取りあえず動く、って話だとキーが刺さったAT車は5歳児でも取りあえず動かせる訳で、でもそれって運転ではないですよね。
    • 見よう見まねでスクリプト書いて、動かないところ判らないところをウェブにランダムアクセスして情報を得るより、いったん他の情報を遮断して、座学っぽくお勉強スタイルで学ぶ方が自分の勉強方法としては合っていた訳です。
      • まあ自分がオールドタイプという事に他ならないでしょうが。おっさんだしね。
  • 何かを学ぶ際に取りあえず成果があげられる事はモチベーションの為にも必要だけれど、いきなり高機能のモノ（でもブラックボックス部分が多い）が作れてしまうと、そのモノが実現する機能について理解しているという誤解をしがちなのかもしれない、と思いました。
    • 自分はモデルとビューをいじってるだけでコントローラをきちんと思ったように書けてなかった、そういえば！
    • BAKEが悪いって言ってる訳ではないので念のため。
    • そういえばCakePHPのクックブックにBAKEの使い方ってあんまり出てなかったかも？
    • データベースのテーブルをきちんと規約に則って正しく作れば、BAKEがほとんど作ってくれちゃうのは本当に凄い。
      • むしろ、BAKEが作ってくれた機能を削る必要があるくらいの勢い。
        • 「設定より規約」って強力なんだなあ。
    • だからBAKEにはあんまり説明いらないのかもしれませんね。
  • BAKEはコンソールアプリだけど、日本語化するだけで更にCakePHPの敷居は低くなるんじゃないかと思いました。
    • モデル（というかデータの構成）とCSSのカスタマイズはCakePHPやPHPの知識要らないですしね。
      • ほとんどCMSいじるぐらいの気楽さ。
    • まあ、機能をカスタマイズするにはCakePHPの知識が必要ではありますけれどね。

ほんとに単なるメモ

Webアプリ JavaScript
  • 入社して3週間目にて一つ目の壁が。
    • 理解と仕事が進まないが、ここが頑張りどころ。
  • notepad++使ってみたらとても良かった。
    • Winでプログラムするなら今のところ使い勝手としては一番自分に合っている気がする。
  • せっかくWebアプリとか作る会社に入ったので、放置していた自分のサイトももう少し手を入れたいと思って準備中。
  • 改めてMODx入れて触ってみたけれど、とてもいいWebアプリというかCMSだと改めて思う。
    • 独自ルールもあってそれに則れば簡単にサイトが作れるけれど、全く勝手にやっても良いという器の大きさが良い。
    • いわゆるコンテンツだけでなくWebアプリを開発する環境にもなる。
  • gibber.jsのことを調べてみたら、思ってたのと違ってた。jsのライブラリというよりJavaScript版fluxusみたいなライブ・コーディングのコラボ環境のようなものだった。
    • でもp5.gibberは作品書くのには良さそう。
      • もちろんプログラムだって書けるのだけれど、それはp5.jsに負うところが大きい。
      • ちなみにp5.jsは従来のprocessing.jsとは別系統のプロジェクトだったのですね。
  • TheWikiWayを読んで以来Wikiのファンなのですが、その精神とは少しズレますが自分用メモとして非公開Wikiを自分のサイトに立ち上げていて仕事でも結構役立ってます。
    • これまではずっと軽くて簡単で便利なwifkyを使っていたんだけれども、今回自分サイトのてこ入れやらPHPの勉強やらでPukiWikiに変えてみた。
    • PHPのWikiということでは以前洛西一周のウェブサイトで配布していたKamiWikiがそのミニマルっぽさで使い勝手としては最高に良かったんだけれど、管理という面では毎回全記事バックアップするため更新頻度が高いサイトに向かないという問題があったのでした。
      • ソースまだあるからPHP読んで自分なりに改造してみたら勉強になりそう。