Atomのsass-autocompileで保存場所を指定する

Atomでscssファイルを自動でコンパイルするためにsass-autocompileパッケージをインストールします。

保存場所を指定する

あまり必要がないかもしれませんが、コンパイルしたファイルの出力先を変更したい場合があります。 例えば次のようにscssファイルはscssフォルダ内にまとめて管理し、cssは各フォルダ内に出力したい場合などです。

root
  |-- contact
  |     |-- css
  |           |-- index.min.css
  |-- scss
        |-- contact
              |-- index.scss

パラメータで指定する

sass-autocompileでは最初の1行目のコメントでパラメータを指定することが出来ます。 そこで出力先を指定することで対応します。

// compileCompressed: ../../contact/css/$1.min.css

(以下省略)

WindowsAtomにsass-autocomplileをインストールする方法

一応メモ書き。

nodistをインストールする

https://github.com/marcelklehr/nodistからインストーラーをダウンロードしてインストールする。

node-sassを確認する

エラーが出た場合、https://github.com/sass/node-sass-binaries からバイナリをダウンロードして vendorフォルダに入れる。

Error: Missing binding ...\nodist\bin\node_modules\node-sass\vendor\win32-ia32-47\binding.node

win32-ia32-47_binding.nodeファイルをbinding.nodeにリネームして、vendorフォルダにwin32-ia32-47フォルダを作成しその中に入れる。(win32-ia32-47の部分はエラーメッセージと同じものを使う)

Dreamweaver CC 2015でEmmet(エメット)を使ったコーディング

Dreamweaver CC 2015ではEmmet(エメット)が標準で使用できます。

Emmetについて公式サイトに書かれていることを適当に意訳すると以下のようになります。

多くのテキストエディタは「スニペット」と呼ばれるコードの塊を保管し再利用することができます。
スニペットは生産性を向上するための良い方法ですが落とし穴があります。
最初のスニペットを定義する必要があり実行時にそれらを拡張することはできません。

Emmetは全く新しいレベルへのスニペットのアイデアです。
cssライクな表現で動的に展開され、略語で入力した内容に応じて出力を生成することができます。
Emmetはhtml/xmlcssを使用するWeb開発者のために開発、最適化され、あなたもプログラミングに使用することができます。

書き方

スニペットを入力してタブキーを押すと登録されたコードが展開されます。

例:divを入力してタブキーを押した場合

div → <div></div>

htmlのコーディングでよく使うスニペット

htmlの雛形を作成するとき

[lang=ja]を指定するのは、指定しない場合自動的にlang="en"が指定されてしまうから。
※htmlの後に4t,4s,xt,xs,xxsを指定するとでDOCTYPEを変更することが出来ます。

![lang=ja] または html:5[lang=ja]

<!doctype html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
    
</body>
</html>

ビューポートの設定

meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

description,keywordの設定

meta[name=description content]+meta[name=keywords content]

<meta name="description" content="">
<meta name="keywords" content="">

スタイルシートの設定

link

<link rel="stylesheet" href="">

faviconの設定

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

javascriptの設定

script:src

<script src=""></script>

リンク付きのリストを5個作る場合

ul>li*5>a

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

cssのコーディングで使うスニペット

基本的なスニペットしか使わないので省略。

スニペットのカスタマイズ

今のところsnippets.jsを直接カスタマイズしないと無理みたいです。 Dreamweaverのアップデートで変更される可能性があるので直接ファイルを編集するのはおすすめしません。

まとめ

Emmetを利用すると少ないタイピングでコーディングができ作業効率があがります。 全てをEmmetで書く必要はありませんが、Dreamweaverスニペットと使い分けると快適ですね。
あとはスニペットの編集が手軽にできるようになれば最強だと思います。

CodeIgniter3でviewフォルダを変更してhtmlを読み込む

CodeIgniter3でviewフォルダを変更してhtmlを読み込む時の覚え書き。
publicフォルダが公開フォルダで、そこにhtmlファイルが入っていることが前提。

viewフォルダを変更する

public/index.phpファイルを開き、$view_folderの値を設定する。
publicフォルダをviewフォルダにするには以下の通り。

 $view_folder = dirname(__FILE__);

controllerを追加する

htmlファイルが存在する場合、htmlを読み込むようなコントローラーを作成する。

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Pages extends CI_Controller {

  public function __construct() {
    parent::__construct();
  }

  public function index($page = 'index')
  {
    $this->load->view($page.'.html');
  }

  public function view($dir, $page)
  {
    if (!file_exists(FCPATH.$dir.'/'.$page.'.html')) {
      show_404();
    }
    $this->load->view($dir.'/'.$page.'.html');
  }
}

routes.phpを変更する

application/config/routes.phpに上で設定したコントローラーへのアクセスを追加する。

$route['default_controller'] = 'pages';

$route['(:any).html'] = 'pages/index/$1';
$route['(:any)/(:any).html'] = 'pages/view/$1/$2';
$route['(:any)'] = 'pages/view/$1/index';

.htaccessファイルの設定について

.htaccessファイルで静的なファイル以外をindex.phpへリダイレクトするよう設定する。

RewriteEngine On
RewriteCond $1 !^(.+\.js$|.+\.css$|.+\.jpg$|.+\.png$|.+\.ico$)
RewriteRule ^(.*)$ index.php?/$1 [L]

CodeIgniter3でTwigを利用する

CodeIgniter3でテンプレートエンジンにTwigを使用する場合の覚え書き。

Twigとは

Twig は、 PHP で実装されたオープンソースのテンプレートエンジン である。ライセンスはBSDライセンスである。 その構文はPython で実装された Jinja や、Django に近いものになっている。[3] Symfony2 フレームワークでは デフォルトのテンプレートエンジンとして利用されている。 Twig - Wikipedia

Twigのインストール

Composerを使用してインストールします。

composer.jsonにtwigを追加する

  "require": {
    "php": ">=5.2.4",
    "twig/twig": "1.*"
  },

applicationディレクトに移動して、以下のコマンドを実行する

  $ composer install

applicationディレクトリ内にvendor/twigが作成されます。

application/config/config.phpファイルを変更する

composer_autoloadをtrueに変更します。

$config['composer_autoload'] = TRUE;

Twig用のライブラリを作成

使いやすいようにライブラリを作成します。
application/librariesディレクトリ内にTwig.phpというファイルを作成し、以下の内容を入力します。 画面に表示するためにdisplayメソッド、文字列として取得するためにrenderメソッドを実装しています。

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Twig {
  const TWIG_CONFIG_FILE = 'twig';

  protected $template_dir;
  protected $cache_dir;
  private $_ci;
  private $_twig_env;

  public function __construct() {
    $this->_ci =& get_instance();
    $this->_ci->config->load(self::TWIG_CONFIG_FILE);

    $this->template_dir = $this->_ci->config->item('template_dir');
        $this->cache_dir = $this->_ci->config->item('cache_dir');

    $loader = new Twig_Loader_Filesystem($this->template_dir, $this->cache_dir);
    $this->_twig_env = new Twig_Environment($loader, array(
        'cache' => $this->cache_dir,
        'auto_reload' => TRUE
    ));
  }

  public function render($template, $data = array(), $render = TRUE)
    {
        $template = $this->_twig_env->loadTemplate($template);
        return ($render) ? $template->render($data) : $template;
    }

  public function display($template, $data = array())
  {
    $template = $this->_twig_env->loadTemplate($template);
    $this->_ci->output->set_output($template->render($data));
  }
}

### 設定ファイルの作成

application/configディレクトリ内にtwig.phpというファイルを作成し、以下の内容を入力します。

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

$config['template_dir'] = VIEWPATH;
$config['cache_dir'] = APPPATH.'cache';

テンプレートを作成する

application/viewsディレクトリ内にindex.twigファイルを作成し、以下の内容を記入します。

<html>
<head>
  <title>test</title>
</head>
<body>
  <p>{{ name }}</p>
</body>
</html>

コントローラーでライブラリを読み込み実行する

  public function index()
  {
    $this->load->library('twig');
    $data = [
      'name' => 'yamada'
    ];
    $this->twig->display('index.twig', $data);
  }

ブラウザに"yamada"と表示されればOKです。

まとめ

これでCodeIgniterでもTwigを利用することができるようになります。

Codeigniter3のバリデーション

Codeigniter3でバリデーションを書くときの覚え書き。

postされた値をバリデーションする場合

codeigniterでは手動でデータを設定しない場合、自動的にpostデータをバリデーションする。

  $this->load->library('form_validation');
  $config = [
    [
      'field' => 'name',
      'label' => '名前',
      'rules' => [
        'trim',
        'required',
      ],
    ],
  ];
  $this->form_validation->set_rules($config);
  if ($this->form_validation->run() === TRUE) {
    // OK
  } else {
    // NG
  }

postされた値以外をバリデーションする場合

postされた値以外をバリデーションしたい場合は、set_data()を使用する。

  $data = [
    'name' => 'yamada',
  ];
  $this->form_validation->set_data($data);

ライブラリの初期化時にルールを設定する場合

引数にバリデーションルールを指定する。

  $this->load->library('form_validation', [
    [
      'field' => 'name',
      'label' => '名前',
      'rules' => [
        'trim',
        'required',
      ],
    ],
  ]);

エラーメッセージの前後のタグを変更する場合

prefixとsuffixを指定する。デフォルトはpタグ。

  $this->load->library('form_validation', [
    'error_prefix' => '<p>',
    'error_suffix' => '</p>',
  ]);

独自のバリデーションを行う場合

例)無名関数(クロージャ)を利用して名前が'yamada'かどうかをチェックする場合。

  $_name = 'yamada';
  $config = [
    [
      'field' => 'name',
      'label' => '名前',
      'rules' => [
        'trim',
        'required',
        [
          'check_name',
          function($value) use ($_name) {
            if ($value == $_name) {
              return TRUE;
            } else {
              return FALSE;
            }
          },
        ],
      ],
      'errors' => [
        'check_name' => '%s が山田ではありません。'
      ]
    ],
  ];

viewでエラーを表示する場合

全てのエラーを表示する場合

<?php echo validation_errors(); ?>

個別でエラーを表示する場合

<?php echo form_error('name'); ?>

コントローラーでエラーを取得する場合

全てのエラーを取得する場合

  $errors = $this->form_validation->error_array();

個別でエラーを取得する場合

  $errors = $this->form_validation->error('name');

エラーメッセージを日本語にする場合

application/config/config.phpでlanguageをjapaneseに変更する。

  $config['language'] = 'japanese';

system/language/englishフォルダ内のform_validation_lang.phpをコピーし、application/languageフォルダにjapaneseフォルダを作成しペーストする。

エラーメッセージを適当な文字に変更する。

  $lang['form_validation_required'] = '{field} を入力してください。';

iMacに外部ディスプレイをつなげてデュアルディスプレイにしてみた

家のiMacで作業していると、ふとした時にもう1つディスプレイがあればいいのにと思う事があります。

普段はWindowsのパソコンで作業しており、そちらはデュアルディスプレイなので作業がしやすいです。 たまにiMacで作業をすることがあり、1つの画面で複数の作業をする時に画面が狭いと感じることが多々ありました。

そこで今回思い切って外部ディスプレイを買って、デュアルディスプレイに挑戦してみました。

iMacのディスプレイについて

家のiMacは21.5インチのLEDバックライトディスプレイで、解像度が1,920 x 1,080です。 iMacのグレアディスプレイは発色が綺麗なところはいいですが、僕はあまりグレアのディスプレイが好きじゃありません。

グレアディスプレイとノングレアディスプレイ

グレアディスプレイの画面は外からの光や部屋の明かりが十分に無い場合、光が反射して個人差があると思いますが目が疲れます。 長時間作業をしていると目の奥が痛くなって、頭痛がひどくなるので長時間の作業ができません。 そこで、今回買う外部ディスプレイはノングレアにしようと思っていました。

ノングレアは発色が良くないことが多いですが、サブディスプレイなので、色を確認するときはiMacのディスプレイを使用して、それ以外はサブディスプレイにすることで問題ないと思いました。

外部ディスプレイ探し

いざディスプレイを探すとき、最初は価格.comで情報を集めます。 基本的にはiMacと同じ解像度でノングレアであれば、あとは安いものでいいと思っていますが、価格.comのクチコミなどは参考になるので毎回チェックします。

モニタのサイズについては、iMacは21.5インチで同じものにしようと思っていましたが、文字がかなり小さく、長時間の作業がつかれるのでちょっと大きいサイズのものを買うことにしました。

モニタサイズが22~24インチ、ノングレア(非光沢)で絞り込み、売れ筋順に表示するとIODATABenQのディスプレイが2万円以内で比較的良さそうでした。 その2つとも、最安値のショップがAmazonだったため、今度はAmazonで情報を集めます。

Amazonの売れ筋ランキングを見てみると、2つとも特に違いが分からなかったので、とりあえず売れ筋1位のBenQの24型ワイドディスプレイを注文しました。 ネットで買う場合、実際にものを見ることができないので最後は他の人が買っているから大丈夫だと思って買うことが多いです。

iMacと外部ディスプレイのつなげ方

iMacの端子はThunderboltなので、ディスプレイをつなげる為にはケーブルを別途買わないといけません。 ケーブルは純正のものを買うとちょっと割高だったので、Amazonで安いThunderbolt-HDMI変換ケーブルを買いました。

ディスプレイの設定

iMacとディスプレイをケーブルでつないで電源を入れてもそのままでは映りませんでした。 BenQのディスプレイ側の設定で、HDMI入力になるように設定することで外部ディスプレイとして表示されました。

iMacの設定

iMacのディスプレイの設定は、デフォルトではミラーリングになっているみたいで、外部ディスプレイにも同じ画面が表示されていました。 そこで、[システムの環境設定]-[ディスプレイ]-[調整]にあるディスプレイをミラーリングのチェックをはずすと、外部ディスプレイに違う画面が表示されるようになりました。

たまに外部ディスプレイが映らなくなる

iMacのスリープから復帰するときにディスプレイを認識しなくなることがありました。 その方法を忘れないように書いておきます。

1.ターミナルを起動してコマンドを入力する

ターミナルを起動して、以下のコマンドを入力します。lockfileは無いことが多いです。

$ rm ~/Library/Preferences/com.apple.systempreferences.plist  
$ rm ~/Library/Preferences/com.apple.systempreferences.plist.lockfile

2.iMacを再起動する

iMacを再起動して外部ディスプレイが認識されていることを確認します。 認識されていない場合は、ケーブルの接続を確認したりディスプレイが認識されているか、環境設定から確認します。

感想

外部ディスプレイの発色に関しては、ノングレアだからか若干白っぽいですが、特に問題はなさそうです。 ディスプレイの高さはiMacの方がちょっと高い位置にありますが、これも誤差の範囲でした。

今回デュアルディスプレイにしてみました結果、作業効率がぐんとあがりました。 もっと早くデュアルディスプレイにすればよかったです。

プログラマーっぽい人が会社を辞めたときのお話

会社を辞めて4ヶ月を過ぎ、時間に余裕ができたのでそのときのお話しを書いてみます。

会社を辞めたきっかけ

きっかけは体調を崩して会社に行く事が辛くなったからでした。それまでは小さなシステム開発会社でプログラマーっぽいことをしていました。

なんでプログラマーっぽいと書いたかというと、前の会社ではプログラマーといってもプログラムだけできるわけではなく、お客さんとの打ち合わせやシステムの設計、開発、アフターフォローなどをほとんど一人でやらなければならなかったからです。

小さいシステム会社のお話し

一人でやるメリットとデメリット

一人ですべてやると言うことにはメリットとデメリットがあって、メリットは比較的自分の思うように予定を決めることができます。打ち合わせから開発まで一人なので自由にでき、とても楽しいです。

これが数人でやることになると、とても大変になります。他の人にも分かるように仕様を作成したり、機能ごとにチケットを割り振ったり、進捗の管理をしたりと余計な仕事が増えます。僕にはそれがとても苦痛でした。

デメリットは打ち合わせに時間がとられてしまい、開発する時間がとれなくなります。案件が少なければまだ問題はありませんが、複数の案件を同時にやっているととても大変なことになります。忙しい時は昼は打ち合わせ、夜は開発なんてことがめずらしくありませんでした。

打ち合わせに時間がかかる

打ち合わせを電話やメールなどで済ますことができればいいですが、基本的にはお客さんのところまで行って直接お話しをする必要があります。

近い場合はそれほど問題ないですが、遠い場合はそれだけで疲れてしまいます。1回の打ち合わせで内容を決めきれないと、何度も打ち合わせをすることになって、成果物がないのにお金と時間がなくなります。

納品が終わりではない

システムを納品したからといってそこで仕事が終わりではありません。お客さんの検収がもらえないとお金を請求できないのですが、結構修正依頼があります。

担当者レベルでは了承をもらっていても、実際の使用者や上司からの要望で修正することが多いです。あまりにも最初の要件と違っていたり、大幅な修正の場合は別途お金をもらったり修正を突っぱねたりすることになりますが、基本的にはお客さんの要望を飲んで修正することになります。

システムに不具合があると大変なことに

いくらテストをしてもそれでも不具合が発生することがあります。不具合によってお客さんの業務が止まってしまうと大変です。

不具合を修正する必要があるのですが、分かるのが僕だけなので休みの日でも呼び出されます。他の仕事が詰まっていても最優先で不具合を修正して納品する必要があるので、他の仕事はその後やることになります。胃の痛みに耐えながら修正することも少なくありませんでした。

担当する案件がたまっていく

小さなシステム会社では人が入ってもすぐやめていきます。給料が安いという理由から自分には合わないといった理由でなかなか人が定着しません。

そのため案件をやればやるほどたまっていきます。他の人に引き継ぐこともできず、ただただ量が増えていきます。

体調を崩す

そんな感じでやっていると、若いうちはいいですが30代に入ってから体の疲れが取れなくなりました。胃のむかつきが直らず病院で検査するとストレスによる逆流性食道炎と診断されました。

それでも胃薬を飲んで頑張っていましたが、ある日会社に行こうとすると動悸が止まらず冷や汗が出てその場で座り込んでしまいました。病院に行って検査をしても体には異常は見つからず、ストレスからくる精神的なものというこになったのですが、その日以降、体調が日々悪くなっていきました。

会社を辞めるのも大変

そんな感じで仕事もできそうになかったので会社を辞めることにしたのですが、すぐにはやめられませんでした。辞めえられたら困ると言われ、休職しながらたまに仕事をしてくれないかとも言われましたが、会社に来ること自体がもう苦痛だったのでそれはできないと言いました。

すると今度はある仕事がもう少しなのでそれが終わるまでやってくれと言われ、体調がよければやると言うことになったのですが、それがなかなか終わらず3ヶ月くらいはそのまま仕事をしていました。

会社を辞めて

現在は療養しながら、たまに仕事をして暮らしています。