このたび個人事業主 MATSUKAZE. のWebサイトをリニューアルしましたのでご報告いたします。

ドメインも装いも新たに

MATSUKAZE.design

旧サイト（www.mach3.jp）からドメインを改めて生まれ変わった「MATSUKAZE.design」です。自分的にナウいアレコレを盛り込んで創ってみました。制作期間はおよそ一ヶ月。

リニューアル自体は去年のはじめから進めてはいたのですが、2018年は色々と学ぶことが多かった年で、年末にそこまでに行った全てを無かった事にしたい衝動に駆られ、勢いだけで制作した一品です。お収めください。

技術的な話

技術的にはそんなに大層な事はしていませんが記録として四方山話をここに残しておこうと思います。

TL;DR

• Nuxt + Netlifyははかどるぞ
• NuxtでextractCSSは避けるべき
• Slack送信はお手軽で良い
• 読ませるサイトにリキッドレイアウトは不向きか

Nuxt + Netlify

Nuxt.js を使って静的サイトをジェネレートして Netlify にデプロイしています。

Vueはこれまでも触ってきましたがNuxt.jsについてはこれが初見でした。簡単に説明しておきますと、Vueとそれにまつわる便利なアレコレをパッケージングしてプロジェクトをクイックスタートするためのフレームワークです。名前からもReactのNextを模したものと言ってよさそうです。

Nuxtは静的ファイルの配信機能も備えていて、Nuxt自体が静的サイトジェネレータとして機能します。今回使っているのはこれですね。

一方のNetlifyは、このNuxtの静的サイト配信機能と非常に良くマッチしています。Nuxtで静的サイトを出力するために nuxt generate というコマンドを使用するのですが、これをNetlify側で自動で行ってくれます。（勿論そのように設定する必要はありますが）

図解するとこんなイメージ :

制作者が行うのはリポジトリへのpushだけで、あとはNetlifyがその変更を検知してサイトを再ビルドして公開してくれます。便利な世の中になったものです。

extractCSSには罠が潜んでいる

結論から先に書くと、extractCSSはtrueにすべきではないと考えます。

NuxtではデフォルトでCSSをHTMLファイル内に展開します。つまりドキュメントの style 要素の中にそのページで使用されているスタイルをすべて出力するのです。旧来のWeb制作者の感覚ですとCSSは別ファイルにしたい気持ちがあるかもしれません。その場合は nuxt.config.js 内で extractCSS: true にするという設定が必要になります。

しかし、この extractCSS は落とし穴があります。仕組みとしては恐らく

1. インポートされた vue ファイルの style セクションに書かれたスタイルを抽出
2. それを一旦まとめたものを適正なサイズに切り分けてcssファイルとして出力する

といった感じだと思われ、その役割を担うのが mini-css-extract-plugin なのですが、これが時折エラーを吐きます。

WARNING in chunk …  [mini-css-extract-plugin]
Conflicting order between:

Conflicting order とあるのでコンポーネントを読み込む import 文の順番を少しかえて見たところ、改善したり、逆にエラーが増えたりする症状が見られました。WARNING in chunk なのでcssファイルに切り分ける段階でプラグインがパニックを起こしているのではないかと推察します。

それとは別の問題として、ページを訪問した際に一瞬表示が乱れる不具合が発生しました。これも推測に過ぎませんが、切り分けられたスタイルの読み込み順が制作者の意図を担保出来ないので起きている現象ではないかと思います。最終的に描画されるスタイルは正しい形ですが、MATSUKAZE.design の様にアニメーションを使用しているページでは、読み込み時にかなり滑稽な挙動をします。

そもそもHTMLファイルにスタイルシートを直接展開するのはリクエストを減らしてページ描画までの時間を短縮しようという意図に則った物だと思うので、そこでわざわざ別ファイルに分けるのは愚策なのでしょう。どうしても別ファイルにしたいのならば nuxt.config.js で webpack の設定を拡張して1ファイルにまとめる方法を選択した方が良いと考えます。

クイックコンタクト（Slack）

お問い合わせフォーム とは別に、「クイックコンタクト」という物を設置しました。お問い合わせフォームはメールが送られますが、クイックコンタクトはMATSUKAZE.のSlackにダイレクトメッセージが送られます。クイックコンタクトは全てのページの右下のボタンからアクセスできます。

Slackへの送信のあまりの手軽さに「これだけで良いのでは（メールフォームいらないのでは）」という思いもありましたが、これは「自動返信メール」を送りません。自動返信メールが必要かどうかという議論は脇に置いておいて、送り先も安心と信頼のEメールであるべきという考えもあり、両方実装しておきました。

匿名でOKで自動返信も不要で、かつ重要度の高くないフィードバック等の送信はSlackで十分そうですね。

リキッドの悩み

今回、幅を制限しない純粋なリキッドレイアウトを試みてみました。タブレット・スマートフォン向けのレスポンシブ対応が幾分か楽になった一方で、PCの高解像度ディスプレイで閲覧した時に間延びする印象を受けました。横に長過ぎる文章は非常に読みづらく、無駄にスペースが空いてしまってどうにも気持ち悪さがあります。文章を読ませるサイトでは幅を固定あるいは制限した方が良いかもしれません。

おしまい

フリーランスにとって自サイトの制作は怠りがちになってしまいますよね。なってしまいますよね？しかし、自サイトは蓄えてきた知見の復習と新しい物の実験が存分に出来る楽しい砂場です。すきあらば挑戦していきたいですね。

Matsukaze. – Webのなんでも屋さん。

Matsukaze. – Webのなんでも屋さん。

「松風」は、横浜を拠点とするフリーランスのWebコーディネーターです。Webの企画・デザインから開発まで、様々なオーダーに幅広く対応しております。

以前の構成から一新して「松風は何をしてくれるのか」をもう少し噛み砕いて説明しています。 また、去年末のアドベント・カレンダーで作ったアイコンを随所で活用してみました。

（初心者向け）松風Web制作講座

かなり実験的な試みではあるのですが、 初心者向けのWeb制作講座をマンツーマンの個別指導形式で開講してみることにしました。 駆け出しなので形式などはまだまだ変動する可能性がありますが、 ご興味のある方はお問い合わせください。

なお、この講座は初心者向けですので、 プロフェッショナルで現役バリバリのフロントエンドマンの方々、 特にむしろ私が教えてほしいレベルの方は、ひらにご容赦ください。

つぎはブログをリニューアルしたい

次はこのブログです。 もう5年くらいこのままなでデザインも古臭い感じになってしまいましたので、 いい加減リニューアルを進めたいですね。

LESSTESTER リニューアル

LESSTESTER – Test Your LESS Code.

自前のライブラリの試験運用を兼ねてまっさらな状態から作りなおしました。 機能的にはそんなにかわりはないですが、いくつか変更点がございます。

• 英語にしちゃいました
• HELP はなくしました（オフィシャルのドキュメントを参考にしましょう）
• Vim にくわえて Emacs キーバインドを追加する事で宗教戦争を緩和する狙い
• localStorage で設定やら入力内容を保持するようにしています

こんなものをレガシーな環境で使う人はほとんどいらっしゃらないと思うので、 そこらへんは切って制作しています。

英語にした理由は、アクセスのほとんどが英語圏からの物である為と、複数言語対応にする程の内容がないからです。 以前どこかの記事で紹介された際に「英語サイト」と書かれたりしていたぐらいなのでさして影響もないでしょう。

日本と海外におけるLESS

LESSTESTER への日本からの訪問者はあまり多くはありません。 そもそもただのテスターなので分母自体も少ない上に、英語圏の広さに対する日本の狭さもあるわけですが、 アクセスを言語・地域で調べてみるとこのような感じになりました。

言語別（上位5）

1. 英語 : 57.23%
2. ロシア語 : 4.98%
3. フランス語 : 4.27%
4. 日本語 : 4.16%
5. ポルトガル語 : 3.18%

地域別（上位5）

1. アメリカ : 13.11%
2. インド : 11.09%
3. イギリス : 5.99%
4. 日本 : 5.24%
5. カナダ : 5.17%

また、先日 LESSTESTER を辿ってUKからメールでお問い合わせを頂きました。（LESSはあまり関係のない用件でしたが） そこで話をする限り、どうやら日本と英語圏で LESS の普及率や人気は結構違うという印象を受けました。

昨今の日本では Sass が人気ですね。書籍も出ていてブログ記事にも頻繁に取り上げられ、勉強会のテーマにもなっています。 対して LESS はどうかというと、言及する人自体自分以外に周りにほとんど見かけません。 しかし海外の投稿などを拝見すると、Sassに負けじとしっかり紹介されていて、Twitter Bootstrap ではベースとして採用されていたりします。

なんとなく一昔前の Movable Type と WordPress を思い出す現象ですね。 現在のWordPressほどに台頭してくるとまでは考えていませんが、 将来的に LESS の普及率が上がる余地はきっとまだあるでしょう。

Zen2Han

Zen2Han | Codogue

入力された文字列の全角アルファベット・数字を半角英数字に変換するだけのアプリです。 設定項目がいくつか用意されています。

• 大文字/小文字を変換する : アルファベット大文字/小文字の変換を行います
• 数字を変換する : 数字の変換を行います
• スペースを変換する : 全角スペースを半角スペースに変換します
• 記号を変換する : 記号 (-^\@;:!”#$%&'()=|`{+*}<>?_) の変換を行います

こんなときに

• 原稿が送られてきたけど全角半角混じり過ぎで置換が面倒
• ソースコードに全角スペースを忍ばせる嫌がらせを受けている
• 全角英数字を一文字残らず駆逐したい

煩わしい置換作業が、テキストをコピーして入力エリアに貼り付けて変換ボタンを押すだけの簡単なお仕事へ。 とはいえ、CLIやgruntタスクにした方が使い勝手はよさそうですが、 似たようなものがすでにありそうな気はします。 なければまた考えます。

おまけ

今回はエディタ部分にCodeMirrorを使ってみたのですが、 ついでに AsciiTree のエディタも差し替えてみました。

それから広告は邪魔なので下の方に移動させました。

こうなりました

新しくなった Codogue.com がこちらです。

少しずつ長い期間で地味に進めて来まして、ようやく形になったところ。
書き方の好みや開発環境もだいぶリリース当初から様変わりしているので、中身も全部書き直してます。
デザインは、途中で飽きましたが最後まで貫きました。

ついでに追加された 「Facebookmark」

せっかくの機会なので一つアプリを増やしてみました。

Facebookmark

これは、Facebook上で自分が「シェア」してきたリンクを一覧表示・検索するアプリです。
（Facebookへのログインが必要です）

何らかのソーシャルブックマークを使っているのなら勿論それで用は足りるのですが、
Facebookのシェア機能も、公開範囲を設定できたりコメントを残せたりと、わりとログを残す場として便利に使えたりします。
ただ、Facebook上だと昔にシェアした物を探すのは正直骨なので、このアプリを作ってみたわけです。

文字列検索機能は、自分がつけたコメントやリンクのサマリーも含んで検索してくれます。
（後からつけたコメントは含めない様です。残念。）

まとめ

他にもいくつか実験してみたいネタはあるのですが、そのうちいずれ…

今後共よろしくお願い致します。

XDate

XDate – A Modern JavaScript Date Library

Dateをもっと便利にした XDateオブジェクト を実装するライブラリです。 使い方はDateとほとんど変わらず、XDateに引数を渡して初期化して使います。

XDateオブジェクトは、DateにあるsetTimeやgetFullYearなどのメソッドを継承している他、 日付の足し算を行ったり、差分を計算したり等便利なメソッドが沢山生えています。

var d = new XDate(1977, 10, 25); // 1977/11/25のXDateオブジェクトを生成
d.addDays(14); // 14日足してみる
d.diffYears(new XDate()); // 今日との差分を取得する
d.toString("yyyy年M月d日 HH:mm"); // フォーマットした文字列を取得

Dateにないけど欲しかった機能が一通り手に入り、 且つDateの実装からあまり離れていないので使いやすいです。 大抵の物はこれでカバーできそうですね。

また、あまり世話を焼かないタイプのライブラリなので、サイズも小さくまとまっています。

Moment.js

Moment.js | Parse, validate, manipulate, and display dates

こちらもDateオブジェクトのラッパーのMomentオブジェクトを実装するライブラリですが、 メソッド群はXDateと違ってDateオブジェクトを模した形にはなっていません。

Momentオブジェクトの初期化は new を使わずに moment() に引数を渡しておこないます。

var m = moment(); // 現在の日付時刻のMomentオブジェクト

多彩なパーサー

そして注目すべきはその多彩なパーサーです。 引数に値を渡して日付・時刻を指定したMomentオブジェクトを生成出来るのはDateと同じですが、 moment() は様々な形式に対応する事ができます。

これもまだ一部ですが、例を挙げます。

moment("1977/11/25"); // 文字列
moment([1977, 10, 25]); // 配列
moment("1977-11-25", "YYYY-MM-DD"); // フォーマットを指定した文字列
moment("25-11-1977", ["YYYY-MM-DD", "DD-MM-YYYY"]); // フォーマットを複数指定した文字列

フォーマットの指定はすごく便利ですね。しかも配列で渡せば複数のフォーマットでチェックを行なってくれます。

その他機能

var now = moment();
now.add("days", 30); // 30日足す
now.subtract("days", 90); // 90日引く
now.format("YYYY/MM/DD"); // フォーマット
now.fromNow()); // "2 months ago"

fromNow() はTwitter等のWebサービスでよく使われる 「〜時間前」 といった表現を簡単に実装してくれます。 デフォルトは英語ですが、同梱された言語ファイルで簡単に日本語化できます。親切。

その他にも、ここではとても紹介しきれない程に機能満載なライブラリです。 また、その分少しファイルサイズがかさんでしまう側面も。

Humane-Dates

zachleat/Humane-Dates

「〜時間前」 のような表現を実装してくれる為だけの、非常にショートでシンプルなライブラリ。 “human” ではなく “humane” なので間違えぬよう。

cf) humaneの意味 – 英和辞典 Weblio辞書

humaneDate("1977/11/25"); // "36 years ago" （執筆時点）
humaneDate("1977/11/25", new Date()); // 第二引数と比較ができる

jQueryを読み込んでいれば、jQueryプラグインとしても機能するようです。

残念なのは、Moment.jsのように多言語化していないのと、 その為のインターフェイスを持ちあわせていない事。 日本語化する為には、コード内の “lang” オブジェクトを直接編集する必要があります。

単機能なのでコンパクトさが売りです。 コレだけが欲しい、という時には選択肢に入るかもしれません。

node-date-utils

JerrySievert/node-date-utils

node-data-utilsは、Dateオブジェクトを拡張するPolyfillです。 下の例はほんの一部ですが、Dateに追加される機能はシンプルで基本的な物です。

// スタティックなメソッド
Date.yesterday(); // 昨日のDateオブジェクトを返す
Date.tomorrow(); // 明日のDateオブジェクトを返す

// インスタンスのメソッド
var format = "YYYY年MM月DD日";
var d = new Date(1977, 10, 25);
d.toFormat(format); // 1977年11月25日
// 1年と2ヶ月と3日を足す
d.add({
    years: 1,
    months: 2,
    days: 3
});
d.toFormat(format); // 1979年1月28日

add に負の数を渡せば引き算にもなります。

node-date-utilsはDateのprototypeを拡張する事になるので、 あなたの環境・主義がそれを許すならば使ってみても良いのではないでしょうか。

まとめ

本当は datejs の実装が面白かったので紹介したかったのですが、 数年アップデートされておらず、試してみたもののうまく動かない物が多かったので、残念ながら諦めました。

日付の出力はWebサービス等で頻繁に行うと思いますので、 開発者の皆さんに感謝しつつ、できるだけ楽をしましょう。

こんなのです

Matsukaze. – Webのなんでも屋さん。

「疾さ」を表現する為に動きに一工夫してみましたので、見てもらえると幸いです。

例えば、実験的に、スライダーにブラーの効果をつけています。
詳しくは後日記事にしようと思いますが、ぼかした画像を重ねて表示して表現しています。

まとめ

フリーランスの方々は自分のサイトだからこそ苦労する事も多々あるでしょう。
特にWeb系の方は世の中の技術の進化も著しく、試してみたかった表現が出来上がった頃には古臭く感じるという事もあったりしますね。

私も遅々として進みませんでしたが、また新たな発見もあるので、リニューアルも良いです。お勧め。

AsciiTree

例えばディレクトリ構造をテキストで表現したい時など、 「けいせん」と入力して「├」や「└」などに変換するのが手間。

コマンドプロンプトやターミナルのtreeコマンドで出力出来ますが、その場合は余計なフォルダも出力されたり、 あるいはその為にディレクトリ構造を一度生成する必要があります。

というわけで、作ってみました。例のごとく、単機能です。

• AsciiTree

使い方

上の入力フォームにタブやスペースのインデントで階層構造をあらわしたテキストを入力して「生成」ボタンを押すと、 下のエリアに結果が出力されます。

例えば次のようなテキストは

root
    hoge
        foo
        bar
            foobar
            barbaz
    fuga
        baz
    piyo

次のように出力されます。

root
├ hoge
│ ├ foo
│ └ bar
│      ├ foobar
│      └ barbaz
├ fuga
│ └ baz
└ piyo

インデントタイプ

入力するテキストのインデントの種類を選べます。

• タブ
• 2スペース
• 4スペース
• 8スペース

から選択してください。初期値はタブです。

よくあるかもしれない質問集

罫線の種類は選べないの？

いまのところ一種類です。（というより他のオーソドックスな表現法を知らないので）
追加したいコネクタがあったら一報頂ければ実装するかもしれません。しないかもしれません。

いつつかうの？

メールでディレクトリ構造を説明したい時など。 複雑な構造を一々書いていくのは面倒なので。

だれがつかうの？

わたしです。わたしがつかいます。

これはなに

MultiMentions : 一括メンションジェネレーター | CoDogue

多数のアカウントに対して一斉にメンションを送る為のジェネレータです。

2,3ユーザーならば何の問題もないのですが、
数十人〜に一括して送るのはツイッターの文字数制限をクリアする為に
一々小分けにしなくてはならず、骨が折れますね。

MultiMentionsはそんな分割作業をお手伝いしてくれるツールです。

使用例

例えば大規模なパーティの幹事をしていて、参加者に一斉に確認事項を送りたいけど、
全員相互にフォローしているわけではないので、Twiplaの一括DMが送れない。捗らなくて辛い。

そんな時は

Twipla のコメントで宛先を『「参加者」全員』にしてコピーして

MultiMentionsの「ユーザーリスト」に貼り付けます。

「メッセージ」に送りたいメッセージを入力して、「メッセージの生成」ボタンをクリックします。
ここではまだメッセージは送信されないので安心してクリックしてください。

すると下に連々と分割されたメッセージが出てきます。

これをコピーしてTwitterで投稿するも良し、
各メッセージについている「Tweet」ボタンをクリックしても投稿する事が出来ます。
「Tweet」ボタンで投稿完了すると、そのメッセージは消えます。

注意事項など

• 
  

  分かりやすいTwiplaを例に出してますが、ユーザーリストがその形式でなければいけないなんて事はありません。
  
  何らかの文字で区切ってあるTwitterアカウントの羅列であれば、動くはずです。

  
  
• 
  

  URLを短縮してから入力すると、ツイート時に文字制限オーバーのエラーが出る事があります。
  
  （サードパーティの短縮サービスより、公式の t.co の方が文字数が多い場合があるせいではないかと思っています）

  
  
• 
  

  「以下のユーザーは文字数の関係で入りませんでした。」というメッセージが表示される事があります。
  
  これは、メッセージと足すだけで文字数制限を超えてしまうユーザーです。メッセージを短くする等の工夫が必要です。

  
  
• 
  

  「Tweet」ボタンは初回だけ認証画面が表示されます。
  
  二つ目以降のメッセージでは表示されずにそのままツイートされるのでご注意ください。

  
  

まとめ

たまたま大規模なパーティに関わる機会があったので、作ってみました。
幹事さんの手助けになれば、幸いです。

WinLess

公式サイト : WinLess – Windows GUI for less.js

MacではLess.appをはじめとして、UIが優秀なコンパイラが複数あるようですが、
Windowsはまだコレ！という物に出会えていませんでした。が、これはかなり良いです。

WinLess is a Windows GUI for LESS.js. WinLess is a must-have for the webdeveloper who uses Windows.

先日記事にしたLessParserはLess.appの模倣をうたっているだけあって確かに似ていましたが、
個人的に欲しい機能である、「フォルダのドラッグドロップ登録」が出来ませんでした。

WinLessはそのドラッグドロップ登録に対応している他、

• 通知メッセージの表示
• デフォルトで「Minify」をチェック

などの設定項目があり、親切です。

アプリケーション画面

こんな感じになっていて、基本的にはLess.app（LessParser）と操作法はかわりません。
File > Settings で設定を変更できます。

現行バージョンの設定項目は以下の通り。
（本稿執筆時のバージョンは1.5.2）

General

• Start with Windows
• Start minimized

Compiling

• Minify by default
• Automatically compile files when saved
• Show message on successful compile

通知メッセージをONにすると、
タスクバーのアイコン付近にポップアップでメッセージが表示されます。

まとめ

概ねLessParserで満足していたのですが、
唯一物足りなかったドラッグドロップに対応するコンパイラが出てきてくれて、
きっとLessniumも思い残す事はないでしょう…。