花びらを数える日々

チラシの裏、ときどき星の屑

週末前夜のネガティヴ

モチベーションが上がらない理由はわかっている。 今の自分が、理想とかけ離れているせいだ。今週はどれだけのことを為しただろう？　数えるのに困るくらいで、そんな自分が嫌になる。

今の時代、たとえ手が届きそうなほどの満天の星空を目にしても、その夜空に手を伸ばす人はほとんどいないだろう。星々は遥か彼方にあって、どんなに手を伸ばしても届かないことを誰だって知っているから。

小学生の頃の僕の夢は確か書店員だった。本当は夢もなりたいものもなかったが、何かしら答えなくてはいけないときはあって、そのときは書店員と答えた。我ながらつまらない子供だったと思う。 小学生の多くは、野球選手やサッカー選手など、もっと子供らしい夢を掲げたりする。きっとその中には、本当にそれを夢見ている子もいたことだろう。でも、その夢はいつしか失われる。きっと、そこに至る道が見えなくなるからだ。

目の前に見えていた道は現実に隠れ、閉塞感を払うだけの希望がもう見えない。大人になるにつれ、目が悪くなったからなのか、あるいは目が良くなったからなのか。

だからと言って、自分の限界を知った風な大人は嫌いだ。夢を見ない大人なんて、たとえ立派でも、かっこよくない。
一歩ずつでも進むしかない。お気に入りの音楽を聴いて、小さな夢を掲げて、もうちょっと頑張ろう。

静かな雨の夜

さて、やはり行動を習慣として身につけるには、二週間では足りないことがわかった。

このブログを毎日書くと決めた半月前の気持ちは既に失せ、自分の不甲斐なさを再確認した今日だ。

三日坊主は三日おきに新しく始めればいい、と何かで読んだ。僕はそれを目指そうと思う。今日もなんとか、夜中ではあるもののブログを更新できそうだし。

なんとなくで生きてなんとなくで仕事をする日々を、抜け出さなくてはいけないとなんとなく思っている。今日はこの時期にしては珍しく涼しい雨が降った。こんな雨の日こそ、出かけるべきなのかもしれない。

夜になってから、動画サイトで弾き語りを聴いた。聴きながら仕事をする。そうするとなぜかいつも、僕は僕の思うような人間でいられる。嫌なことや面倒なことから逃げたりせず、誠実に物事に向き合うことのできる人間。それが普通なのかもしれないけれど、それは立派なことだと思うんだ。

涼しい夜風が部屋に吹き込んでくる。大通りを走る車の音と雨音が混ざって聞こえる。こんな日は、できることなら誰かや何かに思いを馳せて眠りたい。次にこんな夜を迎えるまでの宿題にしよう。

初めてのGulp、Sass、EJSの環境構築　インストールからタスク設定まで！

昨日はブログを書かずに寝てしまったので、今日はその埋め合わせをしようと思う。 ウェブ制作の環境構築をしていたため、行ったことを記録しておく。動作環境はMacOS。WindowsOSの場合はまた違うのかも。

やること（やったこと）

前々から気になっていたSassにいい加減手をつけてみようと思った。ついでに同じく気になっていたタスクランナーにも手をつけてみようと思った。調べてみると、Gulpというものがいいらしい。タスクランナーではなくビルドツールと呼ぶのが正しいのかもしれないが、この辺りはまだよくわかっていない。

GulpとSassの実行可能な環境を作る。これが今回の目標。（追記：EJSもついでに使えるようになった。）

1.予習をする

まずは全体像をつかみ、そこから具体的な手段を学ぶ。

Schooという動画学習サービスがあるのだけれど、今回はこれで予習して、わからない部分をネットで調べた。Schooにはかれこれ3年ほど前（だったと思う）から有料会員として登録しており、これはいろいろな言語や制作技術の入門にはもってこいの内容が揃っている。動画という媒体は、深い知識を身につけるには時間がかかりすぎるし、復習にもあまり適していないと個人的には思うが、一方で、どこから手をつけたらいいかわからないような内容を学ぶには非常に良い。書籍等の他媒体よりも広い範囲の入門者を対象として設定しているようで（あるいはユーザーの特定が甘いという意見もあるかもしれないが）、そのおかげで非常にわかりやすい。おすすめ。

1-1.Sassの実行方法について

SassとはCSSのメタ言語であり、SassとScssという二つの記法があるらしい。Scss記法は従来のCSSとほぼ変わらない記述方法をとれ、現在メジャーとのことだったので、こちらを学ぶことにした。学ぶと言っても、数分で理解できる簡単なものだった。これは使わなくては損だ。

SassをCSSに変換することをコンパイルというそうだ。様々な言語でこのコンパイルという行為があることは知っていたが、自分で行うのは初めてのことだ。使い慣れない専門用語が出現するとひどく面倒なことに思えるが、Sassのコンパイルは簡単だった。

実行方法にはいろいろあるらしい。専用のアプリケーションを使う方法もあるみたいだけれど、Gulpを使用すればプラグインを導入するだけで実行できるみたいなので、Gulpを使ってみることにした。

1-2.Gulpについて

Gulpは、様々な作業を自動化するためのツールだ。と、僕は認識している。前述したSassのコンパイルの他にも、画像の圧縮やファイルの複製なんかも簡単にできるらしい。最初は難しい印象を持っていたけれど、使ってみると思ったより簡単だった。作った人たちすごい。

2.前提となる準備

ここまでで、まず第一の目標はGulpの実行環境を整えることになった。そのためには、Node.jsのインストールが必要らしい。

2-1.Node.jsのグローバルインストール

幸い僕はNode.jsは以前使用することがあったため、すでにインストールが済んでいる。Node.jsはバージョン管理ツールを用いてインストールするのがいいみたいだけれど、直接インストールツールをダウンロードして実行してもいいみたい。僕はどうやってインストールしたか忘れてしまった。必要があればその時に再インストールしようと思う。

2-2.Gulpのグローバルインストール

次に、Gulpをグローバルインストールする。グローバルという言葉も変数やら何やらで使用するためもう聞きなれたが、多分1年前の僕は意味がわからなかっただろうな…。
簡単に言えば、どこからでも使えるように、といった意味合いだ。たぶん。

グローバルインストールには、次のコマンドを使用する。

npm install --global gulp-cli

2-3.プロジェクトフォルダの作成

サイトごとにデータを格納するプロジェクトフォルダを作成する。作業用フォルダ、というべきか。ここに、ローカルのGulpやプラグインをインストールする。

3.Gulpのインストール

ここから実際にインストールをしてみる。コマンドを入れていくだけなので、一度知ってしまえば難しくはない。

3-1.Gulp本体のインストール

まずは、作業用フォルダに移動する。

cd {作業用フォルダのパス}

次に、インストールするパッケージを管理するファイルpackage.jsonを作成する。

npm init

いろいろと聞かれるので答える。とりあえず使ってみるだけなら、全部Enterで飛ばしてしまってもいいらしいので僕はそうした。また必要な時に学ぼう。

そして、Gulp本体をインストールする。

npm install --save-dev gulp

これでOK。

3-2.Gulpで使用するプラグインのインストール

複数のサイトやブログを参考にした結果、今回Gulpで以下のタスクを行うことに決めた。

EJSとは、テンプレートエンジンと呼ばれるものらしく、HTMLの作成で役に立ちそうなので導入することにした。具体的には、インクルードや変数の使用ができるようになる。SassのHTML版のようなもの、というとわかりやすい（異なる部分はとても多いが）。最近はWordPress等でPHPを使うことの方が多いのだけれど、そのせいで余計にHTMLを書くのが億劫になっていたので丁度いい。

使用するプラグインとコマンドは以下。

画像圧縮プラグイン

npm install --save-dev gulp-imagemin

Sassプラグイン

npm install gulp-sass --save-dev

Sassコンパイル時にベンダープレフィックスを追加するプラグイン

npm install --save-dev gulp-autoprefixer

JSを圧縮するプラグイン

npm install gulp-uglify --save-dev

EJSプラグイン

npm install gulp-ejs --save-dev

インストールされているプラグインを確認するには、先ほど作成したpackage.jsonを見るか、以下のコマンドを使用する。

npm ls --depth=0

4.ディレクトリの整理

Gulpを使用する準備は整ったのだけれど、ここで先に使用するフォルダの構造を整えておく。僕は、次のような形にした。

  • project
    • develop //開発用フォルダ
      • images
      • sass
      • js
      • ejs
    • release //出力先フォルダ
      • images
      • css
      • js
    • (node_modules)

5.gulpfile.jsの作成

最後に、Gulpで実行するタスクを指定するファイル「gulpfile.js」を作業ディレクトリ直下に作成して、必要な記述をする。
記述内容は以下のようになったが、ここについては他のブログ等での説明が詳しい。EJSに関しては、フォルダ構造もコピーして出力するよう指定した。

//gulp本体の読み込み
var gulp = require('gulp');

//Sassコンパイル&ベンダープレフィックス追加
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

var sassPath = {
  src: 'develop/sass/**/*.scss',
  dest: 'release/css',
  watch: 'develop/sass/**'
};
var options = {
  outputStyle: 'compressed',
  sourceMap: true,
  sourceComments: false
};
var autoprefixerOptions = {
  browsers: ['last 3 version', 'ie >= 6', 'Android 4.0']
};

gulp.task('sass', function() {
  gulp.src(sassPath.src)
    .pipe(sass(options).on('error', sass.logError))
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(sassPath.dest));
});

//画像圧縮
var imagemin = require('gulp-imagemin');

var imageminPath = {
  watch: 'develop/images/**'
};

gulp.task('minify-img', function() {
  gulp.src('develop/images/*.png')
    .pipe(imagemin())
    .pipe(gulp.dest('release/images'));
  gulp.src('develop/images/*.jpg')
    .pipe(imagemin())
    .pipe(gulp.dest('release/images'));
  gulp.src('develop/images/*.gif')
    .pipe(imagemin())
    .pipe(gulp.dest('release/images'));
});

//JS圧縮
var uglify = require('gulp-uglify');

var uglifyPath = {
  src: 'develop/js/*.js',
  dest: 'release/js',
  watch: 'develop/js/**'
};

gulp.task('minify-js', function() {
  gulp.src(uglifyPath.src)
    .pipe(uglify())
    .pipe(gulp.dest(uglifyPath.dest));
});

// EJS
var ejs = require('gulp-ejs');

var ejsPath = {
  src: ['develop/ejs/**/*.ejs','!' + 'develop/ejs/**/_*.ejs'],
  dest: 'release/',
  watch: 'develop/ejs/**'
};

gulp.task('ejs', function() {
  gulp.src(ejsPath.src, {base:'develop/ejs/'})
    .pipe(ejs({}, {}, {'ext': '.html'}))
    .pipe(gulp.dest(ejsPath.dest))
});

//監視タスクの設定
gulp.task('default', function(){
  gulp.watch([sassPath.watch], ['sass']);
  gulp.watch([imageminPath.watch], ['minify-img']);
  gulp.watch([uglifyPath.watch], ['minify-js']);
  gulp.watch([ejsPath.watch], ['ejs']);
});

6.動作確認

上記のgulpfile.jsでは、defaultに監視タスクを設定した。これは、gulpコマンドで実行できる。タスクを個別で実行する際には、gulp {タスク名}のコマンドでOK。

6-1. Atomでの実行

僕はエディタにAtomを使っているので、いちいちターミナルを使わずにGulpを実行できるよう「gulp-control」というプラグインを入れた。開いているプロジェクトに応じて設定されているタスクをクリックで起動・停止できる。Atomユーザーならほとんどが使っているであろう「Project Manager」プラグインとセットで使うと非常に便利。ちなみに僕はtool-barとflex-tool-barプラグインを使って常時表示されるボタンに設定した。プラグインの制作者様には、心から感謝している。ありがとうございます！

7.課題

ここまでで、目的としていた動作は実現できるようになった。一つ課題として残っているのは、ファイルの変更があった際にすべてのファイルに対して圧縮処理等が行われてしまうことだ。できることなら変更のあったファイルにだけ処理を実行したいところだけれど、今は小規模なサイトしか作らないし、特に困るわけでもないので放置することにした。時間があるときに改善しよう。

座禅を初めて体験した感想

座禅を体験してきた。その感想を書こうと思う。

まず、経緯から。近頃はマインドフルネスやら瞑想やらで認知も広まってきている印象のある座禅だが、僕にはそれらの違いもわからないし、何が得られるのかもよくわからなかった。自分にとってよくわからないものが世間で評判になっていれば、それを知りたいと思うのは人間の性ではないだろうか。

どうやら、原点にあるのは禅らしい。ジョブズも禅には興味を示していたという。では禅について知ってみようと、いつもの通りGoogleで検索する。話がそれるが、Googleで検索する、というのはもしかしたら頭痛が痛いと同じような表現なのかもしれない。と、ふと思った。そんなことないか。
調べてみてもわからない。僕の頭の中にある宗教の枠組みからも外れたもののようだった。ますます興味深い。こんなことを考えていたのが、ひと月ほど前のことだった。

禅の修行の主たるものに、座禅があるらしいことがわかった。どうやら各地で座禅の体験会もあるらしい。それらは、禅寺で行われるものもあれば、地域住民のグループで行われるものもあるようだった。地元で探してみると、後者の集まりが見つかったので参加を申し込んでみた。

そして今日。30分の座禅を二回、計1時間座ってみた。

結果、まだ僕は何もわかっていない。いや、わかっていないことがはっきりとわかった、と言えなくもない。

座禅自体は、思った以上に自分の集中が続かないことや、無理をしていないつもりでも体のどこかに力が入ってしまったりと、いろいろと気づく点があった。あれは見た目より難しい。
基本的な作法や考え方、数息観という手法？などをお教えいただいて、それとともに、ここから先は自分次第であるということも強く念を押された。禅の教えは、教わるのではなく自分で答えを見つけるものであるようだ。なんとなく、そういうことはわかった。これもまた、難しい。

ちなみに、参加者は、皆穏やかそうな40代後半から70代くらいの方々だった。初対面での印象や年齢層については、概ね予想通りだった。少し芯のありそうな、物腰の柔らかい人たち。自主的に座禅を組む人たちというのは、おそらくそういう種類の人だろうと勝手に想像していたのだけれど、大きく外れることがなくてホッとした。 予想外だったのは、女性の比率が高かったこと。とはいえ男女比は7:3くらいだったが、男性しかいないだろうと思っていたから意外だった。

座禅にしても他の瞑想にしても、自分で時間を取るのはなかなか難しい。人間は多分、何もしないでいることが苦手な動物なんだ。
だから、どこかへ出かけて行って、こうした体験をすることはきっと価値がある。僕自身、思ったよりも良い体験になったと感じている。
まだ座禅によって何かが得られるかはわからない。何かを得るためにするものでもない、という問題もある。それでも、またやってみようと思う。

今日のタイトルはシンプルイズザベスト、と思いこれに決めた。普段は意味不明なタイトルばかりつけている僕だが、今日の記事は久々に誰かの役に立たないこともないものに思えたので、わかりやすさを重視した。どう？

鶏口牛歩

今日は何事もない一日だった。

GulpもSassも、ついでにEJSも使えるようになった。今更だ。これで生産性が上がるかもしれない。

鶏口牛後という故事成語があったが、本当にそうだろうか。むしろ牛後であった方が、学ぶことは多いのではないだろうか。誰かがそんなことを書いていたのを読んで、不安が募る。この日々から学ぶものはすでに無く、今の時間は無駄なのではないか、と。
無駄だとしたら、無駄にしているのは自分自身の責任だ。何事においてもそうだが、すべての責任は自分にある。と僕は思う。過去の自分の延長線上に自分があることはもちろんだし、もしも想定外のことがあるというのであれば、それは自分の想像力が欠けていた結果に過ぎない。

書いて消してを繰り返して、意味のない言葉ばかりを並べて、それでも文字が集まればブログは形を成していく。ゴミでも積み上げればやがて島になる、というのと同じだ。
だとすれば、無為に過ごした一日も、きっと何かの役に立つに違いない。そう信じて、今日は眠ることにしよう。

大丈夫、明日は今日よりもいい日だ。

夏の夜に眠れないのはきっと、

何かを学ぶと、それを活用するか否かを別として、何かを為した気になる。

今日は今更ながらWeb制作におけるタスクランナーについて学んだ。そこから広がる世界に胸をときめかせた。

長期的に見ればきっと大きな一歩である今日という日の学びは、しかしそれ自体は何も生み出していない。

それでも、どんな些細な行動であっても何かが変わったという事実は変わらない。だから、今日を無駄に過ごしたわけではないと、安心して眠ることができる。

理屈っぽい自分が好きじゃない。相手を傷つけまいとして、それができていないことがあるから。正しさが人を救うとは限らないということを、僕たちは知っているはずだ。なのに、ときにその正しさを通したいと思ってしまう。例えば、父の考えに反論を唱えたりする。もういい歳なのだし、もうずっと前から聞き流し方も覚えているのに。多分どこかで、正しくあってほしいと思っているからだ。

もっと適当に生きられたらいいのに、と適当に生きている僕でさえ思うのだから、きっと大変な世の中だ。

とりあえず、今日は寝る。明日が来る。明日は今日よりもいい日だ。だから僕は安心して眠ることができる。

今日できることは今日やる。今日できないことは明日の自分に任せよう。
夏休みの宿題は、夏休みが終わるまでに片付ければいい。僕たちも、その日が来るまでにあるべき自分になれればいいのだと思う。

勝手な想像だけど、背景が美しいと思うんだ

今日は、MacにGIMPを入れた。普段はWindows機で古いPhotoshopを使っているのだけど、PCが重くて。Macで画像加工をしたいけど、使う頻度に対してフォトショは高いし。

誰かが作った拡張機能を追加できる、という機能には、他のアプリケーションでも散々経験しているのだけれど、毎回感心する。
もちろん、高機能なソフトウェアが無料で利用できることにも、同じく心が動く。

僕がそれらに心を動かされる理由は、多分こうだ。

本来であれば、仕事には報酬が支払われる。それがこの社会の仕組みで、企業であれば営利を目的とするのが一般的だ。そうでない企業であっても、運営のためや規模の拡大のためには利益を求めるし、普通に考えると無料で何かを提供するということはほとんどありえない。あったとしても、そこには何かしらの目的がある。見込み客の獲得のためだったり、あるいは個人情報を取得するためだったり。でも、ネットの世界には、そうでないものがある。

ウィキペディアのようなものが僕は好きだ。あれはきっと、人の善意が集まって価値を生み出したものだ。本当は違うかもしれないけれど。

つい最近、何事もシンプルにすべきだという思いをあらためて感じた。複雑さはいろいろな物事をつまらなくするから。

昨今か、もっと前からなのかはわからないが、少なくとも今は、他人の善意を信じてばかりではいられない世の中なのだと、僕たちは教わる。
誰もが利害関係を持っていて、意識していて、純粋さを欠いている。

僕が確か小学生の頃、クラスの真面目で誠実そうなK君は他人に自分の罪をかぶせた。大したことじゃなかった。僕は一部始終を見ていたのだけど、実際に彼が何をやったのか、誰が損をしたのかは、もうすっかり忘れてしまった。その程度のことだった。でも、彼は自分を守るために嘘をついて、他の誰かに濡れ衣を着せた。もしかしたらそれを着たのは、僕だったかもしれない。

いろいろな人の思惑が重なり合って、そこに自分も重なって、まるで混ぜ合わせた色のように濁って、複雑さを増していく。世の中はそういうものだと、僕たちは知らず知らずのうちに認識していく。

その中で、人の善意が結晶化したかのような仕組みや、情報や、コードがあって、僕はそれらをとても美しいと思う。色のない、形のわからないものであっても、それには美しいという言葉がふさわしい気がするんだ。

でも、正直gimpは使いづらい。