LESSTESTER – Mach3.laBlog

LESSTESTERのアップデートと最近得た知見の話

mach3 — Thu, 27 Apr 2017 03:17:57 +0000

数年ぶりに LESSTESTER をアップデートしました。何故数年放置しておきながら今になってアップデートをしたかというと、案件等で得た経験を試す実験場としてとてもお手頃だったからです。

アップデートのきっかけ

LESSTESTERを見直すきっかけになったのは、StackOverflowで「バージョンが古い。5年前のバージョン。（意訳）」と言及されていたのを見かけた事。実際は、Less v1.7.0が出たのが2014年2月でLESSTESTERアップデートが翌3月なので3年しか経ってない事をここに釈明しておきます。しかし、Lessのバージョンがv2.7.2まで上がっている間ずっと放置してしまったのは反省しないといけませんね。

cf) https://github.com/less/less.js

本当はLessユーザーも希少な様子なので閉めようかとも考えましたが、せっかく公式にも取り上げてもらっていた事ですし、案件で得られた経験値を試すついでにまるっと作り直してみようと思いました。

そして出来たもの

https://lesstester.com

新しくついた機能 :

ドラフトが端末に保存できるようになりました
Lessのバージョンを選択できるようになりました
キーマップに sublime が追加されました
リアルタイムコンパイル

新しくつけようと思ったけどやめた機能 :

URLでシェアする機能（理由 : コストのわりに使われ無さそう）

活用した技術など :

Vue.js – https://jp.vuejs.org/
AWS S3の静的サイトホスティング
AWS Route53 + CloudFront でSSLに対応
（おまけ）さくらのメールボックス

感想

ゼロから組み直したにしては、AWSとVue.jsが大変便利だったおかげで短時間で完成しました。

Vue.js

現在進行系で進んでいるプロジェクトで使っているのですが、低い学習コストのわりに高機能かつ使い勝手が良く、規模問わず動的なWebアプリケーションを作るのに大変便利です。

AWS S3

言わずと知れたS3さんは便利すぎる。もう全部これでいいんじゃないでしょうか。

AWS Route53 + CloudFront

SSL対応がこんなに簡単で安価になるとは、時代を感じます。 CloudFrontは高機能である反面、デプロイと変更の適用で結構待たされるので、いろいろな設定を試す段階ではちょっと辛い部分はありました。

また、今回は使っていませんが API Gateway / Lambda / RDS あたりは触る機会がどんどん増えていくのではないかなと思っています。

さくらのメールボックス

SSL対応の際にドメイン所有者の確認のためメールが送られるので、それを受け取る為に使いました。年額1000円程度で複数ドメインを使用できるのでかなりリーズナブルです。メールサーバの構築はなにかと面倒なので、ぜひ利用していきたい選択肢ですね。

セキュリティ対策を強化したメールサーバー専用プラン【メールボックス】

まとめ

お買い物もホビーも開発もAmazonに依存する時代の到来です。それぞれのリソースについては時間があれば追って使い方などを記事にまとめておきたいところです。

LESSTESTER のリニューアルと日本におけるLESS

mach3 — Mon, 10 Mar 2014 08:59:22 +0000

先日、LESS の 1.7.0 がリリースされたそうなので、勢いだけで LESSTESTER をリニューアルしてしまいました。

LESSTESTER リニューアル

LESSTESTER – Test Your LESS Code.

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

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

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

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

日本と海外におけるLESS

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

言語別（上位5）

英語 : 57.23%
ロシア語 : 4.98%
フランス語 : 4.27%
日本語 : 4.16%
ポルトガル語 : 3.18%

地域別（上位5）

アメリカ : 13.11%
インド : 11.09%
イギリス : 5.99%
日本 : 5.24%
カナダ : 5.17%

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

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

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

LessでCSSはもっと楽になる！（第1.5回Yokohama.js）

mach3 — Mon, 29 Aug 2011 01:56:49 +0000

昨日行なわれた第1.5回Yokohama.jsで喋らせて頂いたお題です。
使ったプレゼンテーションスライドの紹介など。

スライド

ざっくりとした内容

Lessってなに？
- 公式 : LESS « The Dynamic Stylesheet language
Lessだと何が幸せなのか？
Lessの記法いろいろ
- 変数
- ミックスイン（関数のようなもの）
- 演算子
- セレクタの入れ子
Lessの使い方
- クライアントサイドでコンパイルする
- node.jsで実行する
- GUIクライアント for Mac : LESS.app For Mac OS X
- GUIクライアント for Win : TitaniumデスクトップでLESS.jsのフロントエンドをこさえてみた
LESSTESTERの紹介
- LESSTESTER – Online Compiler fo Less CSS