とりあえず落ち着け

サブカル系webエンジニア見習いの備忘録

技術書の積み本

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

2周目

アジャイルサムライ−達人開発者への道−

アジャイルサムライ−達人開発者への道−

これも2周目

レガシーコード改善ガイド (Object Oriented SELECTION)

レガシーコード改善ガイド (Object Oriented SELECTION)

  • 作者: マイケル・C・フェザーズ,ウルシステムズ株式会社,平澤章,越智典子,稲葉信之,田村友彦,小堀真義
  • 出版社/メーカー: 翔泳社
  • 発売日: 2009/07/14
  • メディア: 大型本
  • 購入: 45人 クリック: 673回
  • この商品を含むブログ (140件) を見る

社内勉強会で読んでる

達人プログラマー―システム開発の職人から名匠への道

達人プログラマー―システム開発の職人から名匠への道

  • 作者: アンドリューハント,デビッドトーマス,Andrew Hunt,David Thomas,村上雅章
  • 出版社/メーカー: ピアソンエデュケーション
  • 発売日: 2000/11
  • メディア: 単行本
  • 購入: 42人 クリック: 1,099回
  • この商品を含むブログ (341件) を見る

リーダブルコード理解しきってから読む予定

体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践

体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践

セキュリティ系

Redmineによるタスクマネジメント実践技法

Redmineによるタスクマネジメント実践技法

サークルでTiDDするため

SublimeText2を入れてみた

会社で先輩たちがSublimeText2がPHP書くのにイイよ!と言われたので試しに使ってみました。

すげぇ扱いやすい!

これまでPHPを書くにはEclipse系IDEを使ってましたが乗り換え決定。

ということで、導入とカスタマイズについて記事を書いておこうと思います。

今回のプラットフォームはwinですが、macにもlinuxにも対応してます。

ちなみにお試し期間無限という仕様なので無料でずっと使うこともできます。

 

インストール

まずは公式サイトに行きます。

f:id:frozentuna1203:20130114171124p:plain

トップにわかりやすくWindows用のダウンロードボタンがあるので落としてインストールしましょう。

これでインストールはおしまいです。

ですが、このままだとただのテキストエディタなのでカスタマイズしましょう。

 

カスタマイズ

まず、今回このエディタで何をするかを列挙してみましょう。私の場合は以下のとおりでした。

  • PHPのコーディング
  • HTML/CSSのコーディング
  • JavaScriptのコーディング
主な用途がこの3つだったので、この目的を満たせるようにカスタマイズします。
 
  1. パッケージ管理システムの導入
    まずはプラグインを入れるためにパッケージ管理システムを導入します。
    ここにアクセスして、画像の赤枠部分のコマンドをコピーします。

    f:id:frozentuna1203:20130114173158p:plain
     次にSublimeText2を起動し、【view】タブ→【Show Console】を選択し、コンソールを表示させます。

    そこにコマンドをペーストしてEnter

    英文で再起動を促すメッセージが出ると思うのでエディタを再起動すればOKです。

    今後プラグインを導入する際のお約束は

    「Ctrl」+「Shift」+「p」のコマンド実行から「install Package」を入力してEnter

    です。 

  2.  PHP周りのプラグイン導入
    ・SublimeCodeIntel
     シンタックスハイライトや自動入力補完、関数定義先へのジャンプなどをできるようにするプラグインです。
    導入方法はお約束から「SublimeCodeIntel」を入力してEnterするだけです。

    ・ SublimeLinter
    文法ミスの時などに囲って表示してくれるやつです。
    PHPの場合はSublimeText2を使うマシンにPHPをインストールしないといけません。
    まずは、「win」+「r」で名前を指定して実行ウィンドウを出し、「cmd」でコマンドプロンプトを呼び出しましょう。
    そして「php -v」と入力してPHPが入ってるか確認しましょう。
    入ってなかったらここからNonThreadSafe版のZIPを落として解凍し、適当なディレクトリに設置しましょう。 
    ちなみにこの記事を書いたときの最新が5.4.10でした。
    設置したらシステム環境変数に設置したフルパスを追加します。
    「win」+「e」でマイコンピュータを呼び出し、右クリック→プロパティを開き、  サイドバーの「システム詳細設定」から開いて設定します。(win7の場合)
    ここまで終わったらもう1度コマンドプロンプトphp -vしてちゃんとインストールされているか確認します。
    ここまでできたらあとはSublimeText2を起動してお約束コマンドから「SublimeLinter」を入力してEnterで導入完了です。 

    ・CTags
    関数へのタグジャンプをするプラグインです。
    これもctagsからインストールしないといけません。
    まずはここからwin32のバイナリをダウンロードして解凍します。 
    上記同様に環境変数に解凍して設置したフルパスを追加します。
     最後に同様にコマンドプロンプトから「ctags --version」を叩いてバージョン情報が出ればOKです。
    その後、SublimeText2からお約束コマンド→「CTags」→SublimeText2を再起動で完了です。

    ・PHPDoc
    PHPDoc形式のコメントを補完してくれます。
    お約束コマンドから「PhpDoc」をインストールしておしまい。
     
  3.  HTML/CSS周りのプラグイン導入
    全てお約束コマンドからの入力でインストールします。
    HTML5
    HTMLの自動補完
     
    CSS Snippets
    CSSの自動補完

    Bracket Highlighter
    タグの開始タグと閉じタグをハイライト表示
     
  4.  JavaScript周りの導入
    これもお約束コマンドからです。
    JQuery
    JQueryの入力補完をしてくれます 

  5. その他
    もちろんお約束コマンドからです。
    IME Support
    日本語表示をインライン化します。 
以上が現在私の環境に入れているプラグインです。
最後に、今回この記事を書くにあたって参考にさせて頂いたサイトとか使い勝手向上のtipsとかを紹介しておきます。

【サーバ構築】Smartyの導入

コレまでの設定でhttpもPHPSQLも準備できました。

さぁ何かwebアプリを作ろう!とした時にこんなことが起こると思います。

index.php

f:id:frozentuna1203:20120807120601p:plain

 

PHPとHTMLが混同する!

特に14行目の「HTMLの中でいきなりPHPが始まって関数を実行する」なんてところが増えたら解り難くて仕方がないでしょう。

そこで今回はテンプレートエンジン「Smarty」を利用しようと思います。

Smarty公式サイト

1. 特長

  •  PHPとHTMLを分離できます
  • 分離することでプログラマとデザイナーの責任範囲を明確にできます
  • HTML内でSmarty関数によるループ処理等ができます

2. 導入

現在利用しているのがver2.6なので、説明はver2.6準拠

3.x系は2.x系と異なる部分が多いので、この記事を参考に3.x系を設定すると正常に動かないと思います。

  • ダウンロード

 こちらのDOWNLOAD項目の1番下にver2.6.26があるのでダウンロードします。

  • 設置
ダウンロードしたものを解凍するとフォルダの中にLibsというフォルダがあるので、サーバのドキュメントルートと同階層にアップロードします。
次にlibsと同階層に「template」フォルダと「template_c」というフォルダを作ります。
templateフォルダは表示するHTMLテンプレートを置くためのフォルダ、template_cはコンパイルキャッシュファイルを置くためのフォルダです。
template_cは外部からファイルの追加を行えるようにパーミッションを777にしておきます。
これで設置は終了です。
  • 設定
使い勝手を良くするために設定を変更します。
SmartyPHPからSmartyClassのインスタンスを生成し利用することで動作します。
つまり、SmartyClassの内容を変えることが設定の変更となります。
MySmarty.class.phpというファイルを作り、SmartyClassを継承したMySmartyClassを作成しましょう。
MySmarty.class.php
//基本ディレクトリの定数定義
define("ROOT_DIR","/var/www");

//継承元のクラスを読み込む
require_once(ROOT_DIR."/libs/Smarty.class.php");

//継承してクラス生成
class MySmarty extends Smarty
{
      function __construct()
      {
           $this->template_dir = ROOT_DIR."/templates";
            $this->compile_dir = ROOT_DIR."/templates_c";
            $this->left_delimiter = "{{";
            $this->right_delimiter = "}}";
            $this->plugins_dir = array("plugins","myplugins");
           parent::__construct();
      }
}
 コレで実行準備完了

3. 実行

 では、最初の日付を表示するプログラムをsmarty対応させてみます。
index.php
<?php
       require_once("../lib/MySmarty.class.php");
       $smarty = new MySmarty();
       $date = date("y/m/d");
       $smarty->assign("date",$date);
       $smarty->display("testcode.html");
index.html
<!DOCTYPE html>
     <html>
          <head>
                <meta charset = 'UTF-8'>
                <title>日付表示</title>
          </head>
          <body>
                <h1>テストページ</h1>
                <p>今日の日付</p>
                <p>{{$date|escape}}</p>
           </body>
     </html>
 コレで分離できました。
 

 

【web知識】HTTPレスポンスとはなんぞや?

1. HTTPレスポンスとは

受け取ったHTTPリクエストに対しての返答であり、大きく分けてステータスライン・レスポンスヘッダー・レスポンスボディの3つにパーツでできている。

2. ステータスライン

HTTP/1.1 200 OK

 このように表記され、3つに分解することができる。

・HTTP/1.1

この部分はHTTPのバージョンを表す。

・200

この部分はステータスコードといい、リクエストに対しての応答パターンを3桁の数字で表す。

参考:ステータスコード一覧

 ・OK

この部分はレスポンスフレーズといい、ステータスコードがどのような意味なのかを表す。

3. メッセージヘッダ

 リクエストと同じ形式でレスポンスに関する付加情報が書かれている。

参考:レスポンスヘッダ一覧

 

4. メッセージボディ

 取得したリソースの内容が入っている。

HTMLであればHTMLコード、画像リソースであればバイナリ形式で入っているといったように形式に合わせたデータが入る。

 

 

UTF-8の半角スペースについて

先日苦しめられたのでメモ書き。

UTF-8には2種類半角スペースが存在し、普通の半角スペースと文字コード「C2A0」で表される空白がある。

UTF-8で書かれたモノをShift-JISやEUCに変換した際に不可解な"?"が入っていたら「C2A0」が入ってる恐れがある。

例えば、取得したRSSXMLファイルに混入しているなど。

コイツの何が厄介かって、変換前の文字列を見てもただの半角スペースに見えるところだ。

一度変換してみて?が混入してたらこのコードを足してみよう。(PHP専用)

$content = str_replace( "\xc2\xa0", " ", $content );

 書いてある通り「C2A0」を削除するコード。これで?は出なくなりました。