koheisgがどうやってプログラミングを身につけたか? - CGI編 -

前回 に続いてどうやってプログラミング覚えたか?シリーズです。 こうしてHTML/CSSをなんとなく覚えた私ですが、次は動的なサイトを作りたくなっていきます。

geocitiesからxreaの移行

geocitiesではhtml/css/javascriptは満足に動きますが、サイトを訪れた人が掲示板などサーバー上で動作するプログラムを置くことはできませんでした。

当時、ホームページを個人で運営している人は二つのいずれかの方法で、掲示板を運営していました。

前者は会員登録をすれば誰でも簡単に自分のサイト専用の掲示板を持てます。 後者はCGIの知識が多少必要とされますが、CGIスクリプトは配布されているものを使用すれば、動かすだけであれば、プログラミング自体の知識は必要ではありませんでした。

今でいうと、blogを始めるときにライブドアブログやアメブロを使うのか?wordpressやmovabletypeを使うのか?みたいな違いです。 wordpressを使えば様々なデザインや動きもカスタマイズできますが、ライブドアブログやアメブロではそこまでできません。

自分はカスタマイズも想定して、CGIが動くxreaと言うレンタルサーバーに自分のサイトを移管しました。

無料スクリプトをアップする

xreaにサイトを移管してから、配布されてるCGIスクリプトをサーバーで動かしました。 配布されているCGIスクリプトは、それぞれ微妙に設定の仕方が異なっており、動いたり動かなかったり悪戦苦闘をしました。

CGIスクリプトの提供者側で用意してくれている設定に慣れてくると、自分でも動作をカスタマイズしたくなってきました。 wordpressでいうとプラグインの改造くらいの難易度だと思えば良いと思います。

改造がしやすいCGIスクリプト

色々なCGIスクリプトを改造するようになってきたところで、改造することを前提として配布されているCGIスクリプトを見つけました。 HTML部分とperlで書かれたロジック部分が完全に分離しているスクリプトです。

これを使うと当時の自分のようにHTMLしか理解していない人でも掲示板の見た目をカスタムできます。

ブラウザから日記を投稿できるサイトにした

僕はテーブルレイアウトを卒業し、 <div class='diary'>ここに日記の文章を書く</div> みたいな感じで自分のホームページを更新していました。

この頃、はてなダイアリーが流行り初めていて、はてなダイアリーで日記を更新する人たちが増えてきました。その他にも日記専用のサービスみたいなものが乱立していました。

自分の掲示板を改造する力を利用して、自分だけの日記サイトを動的に作ることができるのでは? と思い始めました。

そして公開されているperlスクリプトを改変して、自分でゼロからデザインした日記サイトを作ることに成功しました。 とても長くの時間かかってやりましたが、更新が楽になって最高に嬉しかったのを覚えています。

この頃の自分のスキルレベル

perlの文法はほとんど理解していなかったと記憶しています。 変数の代入やifやforは理解していないと改造できなかったのですが、基本的に感覚で「ここを動かしたらどうなる?」ってのを繰り返していました。 (このレベルから、現在プロのプログラマとして、プログラムを書く力に変換していくにはかなりの時間がかかったように思います。この頃perlの入門書を一つぐらい読んでいれば変わったかもしれません。)

プログラムを書くことよりも動かすことに興味があったので、ローカルでperlを動かしたり、Windowsを自家サーバとして公開しようとしました(公開しなくて良かった)ので、この頃にサーバーとはなんたるかの超初歩は理解してた気もします。

koheisgがどうやってプログラミングを身につけたか? - HTML/CSS編 -

どのようにしてHTML/CSSを身につけたか

きっかけはバンドを組んでないのにホームーページを作ろうとしたこと

中学校二年生の頃、バンドを組んでないのにバンドのホームページを作りたいと思っていました。 ある日、ある友達がホームページを持っていることを知り、彼にfront homepage express入門本を借り、早速サイトの制作に取り掛かりました。

その本を読み終え、geocitiesに簡単なテキストサイトを公開したように思います。

front homepage expressだけではいい感じのサイトにならず、どうしてもかっこ悪いデザインになってしまう。そこで本の巻末にあったメモ帳でhtmlファイルを編集する方法でサイトの更新を行うようになりました。

この時友達に質問したことを今でも覚えています。

sg「画像の横に文字書くのにはどうすんの?」

友達「罫線のない表を組めばいい」

爆誕tableレイアウトコーダー

tableレイアウトを覚えるとどんなデザインでも実現できるようになりました。 僕は様々なレイアウトのページをhtmlで作っていました。 htmlだけを作るのが楽しくなって、絵を描くようにいくつもサイトを作っていました。 サイトのメニューをいい感じに作れるようにframeタグもうまくつかっていました。 この頃にはエディタもterapadというお気に入りのエディタがありました。

「違う。。何かが違う。。俺のサイトはyahooとは全然違うぞ!!」

そう思った僕はありとあらゆるサイトを 右クリック→ソースを表示 を繰り返し、cssを学んでいきます。 ググりまくる中で、プロはレイアウトをdivで組むしいということを知り、floatレイアウトを覚えました。

cssは僕にとって最初aタグのhoverを作るためだけだったものでしたが、htmlは構造を書き、cssで見た目の装飾するという基本に気づいたのはこの頃でした。

インターネット上に公開されてるhtmlのソースを見て、見よう見まねでhtmlを覚えました。 この時に論理だった話はあまり勉強しなかったように思います。とほほさんのサイトにはお世話になった気がしますが、htmlは直感で乗り越えた気がします。

この頃高校生くらいになっていたかと思いますが、簡単なWebページであれば趣味レベルで作ることができるようになっていました。

これからHTML/CSSを勉強する人に

この二つが大事に思います。僕が中学生の時代よりはdeveloper toolsなども発達し、上記二つの作業のPDCAも回しやすくなってきたと思います。developer toolsの使い方はここでは触れませんので、検索するなどして見てください。

2016年のF1を見るかどうか悩み続けていたら開幕した話

毎年F1放送にがっかりしているF1ファンの皆さまこんにちは。koheisgです。

今年はついにBSフジでの録画放送も廃止

BSフジ、2016年のF1放送はなし 【 F1-Gate.com 】

今年はついにBSフジでの録画放送も廃止となり、日本国内でF1を見るためには有料放送の契約が必須となりました。 これを契機にCSを契約されたF1ファンも多いのではないでしょうか。

地上波での録画放送は数年前に廃止になっているので、 すでにF1を見ている人は限られた存在になっているかもしれません。

僕は現在CS契約をするかしないか非常に悩ましい決断を迫られているところです。 だって、CSの契約とか金持ちがやることでしょ。

お金持ちの条件とは

僕は子供の頃、友達の家を下記で金持ち判定していました。

ぶっちゃけ家にいる時間なんて対してないわけですよ。 F1という番組を見るだけのために、CS契約して月数千円ってバカみたいな話です。

それでもF1という娯楽は自分は大好きなので、CS契約するか否かを迫られているわけです。

今年のF1が面白いかで決める

そもそも、去年F1を決勝レースは録画したりあの手この手を振り絞って見ました。 でも、結果はメルセデスの圧勝。ハミルトンは早すぎだし、大したことないロズベルグにだって勝てそうにありませんでした。

その中で、フェラーリ勢がなんとか一矢報いるかどうかを見守るF1。 そんなF1なら正直、今年は見なくていいんじゃないかという気もしてきました。

今年のF1っておもしろいのだろうか。

今年はフェラーリのエンジンがかなり改善されたという噂でしたが、 ライコネンはエンジントラブルでリタイア、ベッテルはあと一歩のところで3位でした。

全くもって、メルセデスのミス待ちという感じで、今年もミスの少ないベッテルとハミルトンを早い車に乗せろ!とマッチがきっと言うはずです。 みんなが興味津々のホンダジャパンパワーも衰えの見えつつあるワールドチャンピオンの2人で、表彰台を狙えるか?というかつての日本人ドライバーがいい車に乗っていた時代を思わせる体たらくです。

今年のF1はみない

というか、フジテレビNEXTは契約しないで、いいんじゃないかなぁ。 僕は今日実況はF1officialで、youtubeの野良ライブで映像は見ていました。

これ実は最強だったりして、日本語の実況よりも英語の実況の方が何が起こっているかよくわかるし。

そうそうアロンソが怪我しなくて本当によかった

あの映像みたときは、ついに伝説が伝説になってしまうのかと思ってしまった。。

【動画】 フェルナンド・アロンソが大クラッシュ / F1オーストラリアGP 【 F1-Gate.com 】

ワーキングメモリで開発

ワーキングメモリとは

ワーキングメモリとは自分の脳内のメモのことです。 例えば、買い物に行ったときにメモがなくても、あれとこれとそれが必要と思って、 買い物を順番にすることができます。これがワーキングメモリです。

認知症予防で注目されている分野でもあります。

今自分が考えていること

GTDやチケット駆動開発をしていると、自分で覚えておくべきことは、 全て何らかの形でメモをとることになります。

チームで仕事を行うときのエビデンスにもなるし、自分の記憶に依存することなく物事を進めていくことができるため、非常に大事なことです。

しかし、あまりにも自分が何も覚えておらずチケットやTODOリストを見ないと何もできないくらいに馬鹿になっているような気がするのです。 顕著な例がプログラムを書く時で、あの標準メソッドってどんな引数の順番だったっけ?とgoogleを頼ることがあまりにも多いこと。 もっと、フロー状態に自分を持っていくためにはもっと “ググらないこと” を実現していかなければならないと思ったのです。

ググらない x メモらない で実現できること

例えばターミナルを開いている時は、開発や作業に集中できます。 ドキュメントを作っている時に仕様が全て頭に入っていれば、ドキュメントを書くことに集中できます。

自分の脳の容量を上げていけば、自分の開発スピードをあげることができるんじゃないかなぁ? と今実践しようと思っているところです。

GTDとは少し考え方が違うのですが、inboxくらいは頭の中に入っていてもいいんじゃないかなぁと思う今日この頃なのでした。

参考リンク

ワーキングメモリ - Wikipedia ワーキングメモリ(作業記憶)トレーニング

php-nabeでext-installする場合

php-nabeのバージョン管理に僕はphp-nabeを愛用しています。 phpenvやphpbrewなど数ある中でこれを使っています。 phpを使わないでphpを管理したいという思想に惚れた訳です。

で、たまに php-nabe ext-install extname でphpの拡張がインストールできるのですが、 下記のようなエラーがよくでます。

$ php-nabe ext-install openssl
Cannot find config.m4.
Make sure that you run '/Users/kohei-sugi/.php-nabe/php-nabe/build/php-5.3.3/bin/phpize' in the top level source directory of the module

/Users/kohei-sugi/.php-nabe/php-nabe/bin/php-nabe: line 416: ./configure: No such file or directory

そんなときは、srcのファイルの中を覗きに行って、

mv config0.m4 config.m4

をしてあげて、もう一度実行するとOKです。

自分でコンパイルしたい欲求を程よく満たしてくれるので良いですよね。。 ただ、普通にyumでphp入れたとき見たいなお手軽感がないので、recipe的な機能を作って、 コンパイルオプションとかをデフォルトで選んだりできれば良さそうやなぁなんて思ってる今日このごろ。

historyを見たところ下記のようなextを良く入れているっぽい。

php-nabe ext-install php_pdo
php-nabe ext-install php_mysql
php-nabe ext-install php-fpm
php-nabe ext-install fpm
php-nabe ext-install php-mysql
php-nabe ext-install zbil
php-nabe ext-install intl
php-nabe ext-install apc
php-nabe ext-install pdo
php-nabe ext-install mysql
php-nabe ext-install pdo_mysql
php-nabe ext-install ext-pcntl
php-nabe ext-install pcntl
php-nabe ext-install mcrypt
php-nabe ext-install newrelic
php-nabe ext-install ext-newrelic
php-nabe ext-install ext-newrelic
php-nabe ext-install zlib
php-nabe ext-install zip
php-nabe ext-install mysqli
php-nabe ext-install curl
php-nabe ext-install php-cli
php-nabe ext-install cli
php-nabe ext-install cli
php-nabe ext-install php
php-nabe ext-install ext-curl
php-nabe ext-install curl
php-nabe ext-install openssl
php-nabe ext-install xdebug
php-nabe ext-install xdebug-2.2.7
php-nabe ext-install mbstring

version毎には一応、これらはちゃんとmacの中に入っているはずなのだけど、 その辺りをrecipe的に管理したい欲求なんですよねー。

recipe管理ができれば、仮想マシンの中でphp-nabeを使ってphpをインストールするときに、 同じようなextensionを何度もbuildしないで済むし、

phpのバージョンを新しくインストールした時なんかも、recipeのextensionを全部インストールしてねー みたいなことできるんじゃないかぁーなんて思っているわけです。

こういう風な仕組みになると、vagrantにもphp-nabeでprovisionをする方法が流行るんじゃないかなぁとか。 (聴いたところ手元でコンパイルするのはあまり好まれないらしい)

なんかいい方法あるかなー。