Category Archives: Web Development

サイトのアップデート

Posted on by

直近の仕事が延期になってぽっかりと時間が空いたので、このサイトのメンテを一気にやった。

  • Bootstrap のアップグレード（v.1 -> v.3）
  • タスクランナーを Grunt から gulp に乗り換え
  • CSS プリプロセッサは Stylus から Sass (indented syntax) へ乗り換え
  • JavaScript は ES2015 + Babel を Webpack でビルドする環境へ
  • WordPress テーマディレクトリの整理
  • WP touch プラグインを廃止。スマホ向けスタイルは Bootstrap ベースで自作
  • WP Pusher による自動デプロイ

何年もサボっていたのでもう色々古かった。 Bootstrap はタイポグラフィーが格段に良くなりました。感心。それとモバイルファースト感が増していて、時代が移り変わった感じがします。 とはいえ今回使った v3.3.7 は2016年7月のリリースバージョンとなっていて、そんなに最新のトレンドっていう訳でもないです…。 というかこのリリースノートを見る限り Bootstrap ってもうあまり活発にメンテされていない感じか。

さくらのレンタルサーバーからさくらのVPSに引っ越しした

Posted on by

実際に引っ越ししたのは5月のことなのだが、今更書く話。

さくらのVPSは仕事でも使っているのだが、使い勝手がよいので個人でも使うことにした。
このサイトはそちらに引っ越ししました。

Linuxの設定は問題ない…と思っていたのだが、旧レンタルサーバーと使いたい構成が異なった（Apache + MySQL + WordPress → Nginx + MySQL + WordPress）のと、メールサーバーをどうするかという課題があって結構手こずってしまった。

このサイトはWordPressで稼働しているのだが、今回はNginxで動かすことにした。Nginxを使うのは初めてだが、ネット上にいくらでもノウハウが転がっていたのであまり困ることはなかった。Nginxはその頃に 1.8.0 がリリースされたのでそれを使うことにした。メールサーバーはノウハウもないのでやりたくないぜ…と思ったので、Gmailに転送するだけにした。postfix設定についても探せばノウハウはたくさんあった。

しばらく運用してみたが、以前よりサイトが重くなっている。。VPSのスペックの問題かNginx + WordPressという構成の問題か…、分からないがこのまま様子を見よう。

grunt-contrib-jshint の設定

Posted on by

Gruntfile.coffee に以下のように書く。

grunt.loadNpmTasks 'grunt-contrib-jshint'
grunt.initConfig(
  jshint:
    main:
      options:
        jshintrc: true
      src: [ 'app' + sitePath + 'js/script.js' ]
  ...
  watch:
    js:
      options:
        livereload: true
      files: [ 'app' + sitePath + 'js/*' ]
      tasks: [ 'jshint' ]
)

options.jshintrc = true を設定するとそれ以外の options は無視され同階層に置かれた .jshintrc ファイルを参照するようになる。

.jshintrc はJSON形式で記述する。
結果的に以下のような設定に。

{
  "node": true,
  "esnext": true,
  "bitwise": true,
  "camelcase": true,
  "curly": true,
  ...
  "globals": {
    "window": true,
    "document": true,
    "jQuery": true,
    "$": true,
    "_": true,
    "Backbone": true
  },
  "-W116": true,
  "-W041": true
}

globals には「XXXグローバルオブジェクトがない」的な警告が出るときに、予め「このグローバルオブジェクトはあるから、警告出すな」とJSHint側に伝えておく設定。
-WXXX: true は特定のエラーを無視したいときに追加する設定。このエラーコード（ドキュメントの原文では warning code）は grunt --verbose（もしくは grunt -v）として verbose モードで Grunt タスクを起動すると表示されるようになる。

表示例：

^ [W116] Expected '!==' and instead saw '!='.

ここでは W116 というのが warning code なのでそれを "-W116": true のように options に追加すると、警告は出なくなる。

初めて pull request を体験するなど

Posted on by

最近、仕事で FuelPHP という PHP フレームワークを使う機会があります。いわゆる Cake PHP 的な MVC フレームワークで、PHP 5.3 以降対応としたことにより、今風に書かれているらしいです。

もう先月の話になるのですが、FuelPHP 1.6 翻訳ウィークというオンラインイベントを通じて、Fuel PHP 1.6 の日本語ドキュメントのメンテナンスに参加しました。

翻訳作業には GitHub を通じて誰でも参加できるようになっており、初めて他人のプロジェクトに pull request を送るという体験をしました。日本語でやり取りができたので、はじめの一歩としては敷居が低かったと思います。

それにしても GitHub、やりとりのほとんどをブラウザ上で完結できてしまうほど、進化していたんですね。しかしこれだと git の勉強にはならないなー。

modern.IE×VMWareFusion 試してみた

Posted on by

modern.ie

最初に言ってしまえば、以下の記事をまず読もう。導入手順が詳しく書いてあります。ありがとうございます。 http://design-spice.com/2013/04/03/mac-ie-test/

http://www.modern.ie/ja にアクセスし、
仮想環境 ＞ Download a Virtual Machine. For Mac, Linux, or Windows. ＞ Get the VM ＞ 目的のOS→Mac ＞ プラットフォーム→VMWareFusion で目的のOSのファイルをダウンロード。ダウンロードした.sfxファイルをターミナルから

$ chmod +x DOWNLOADED_FIKE.sfx
$ ./DOWNLOADED_FIKE.sfx

と実行すると、解凍されてディスクイメージファイルができる。
で、そのファイルをVMWare Fusionで開いたら実行できた。詳細はこちらにて

以下、気づいたこととか。