I'm kubosho_

思想の固まり

Sassなどにあるルールセットを入れ子できる機能がいらないと感じる理由

Sassなどにはルールセットを入れ子できる機能がありますが、個人的にはいらない機能だと感じています。

理由は、詳細度の総計が分かりにくくなるので .foo .bar .baz .foobar みたいに上書きしにくいセレクタ宣言ができてしまうことが多いように感じるためです。 先ほどのセレクタ内で宣言されたスタイルを上書きするためには、次のことをやらないといけないでしょう。

  • 同じくらい入れ子する
  • !important を使う
  • そもそも入れ子の数を制限する

しかし、同じくらい入れ子する、もしくは !impotant を使った時点で管理できないCSSへ一歩踏み出していると思います。 またそもそも入れ子の数を制限するのはありだと思いますが、それだと入れ子がある意味が分からなくなると思います。

なので、ルールセットの入れ子はいらないと思います。


と思いましたが、BEMの考え方でセレクタを書く場合は必要ですね。それ以外はいらなそうですが…

若者?がCSSを覚えた方法

もうちょっと書こうかなと思って結局放置してしまったので公開していきます。


1年前、こんな記事を見ました。

若者はどうやってCSSを覚えたのか

どうやってCSSを覚えたのか、その方法について書かれている記事をあまり見たことがない気がしたなと思ったので、自分の覚え方を誰に言われたわけではないですが、書いていきます。

自分がCSSを書き始めたのは2006年1月からでした。当時はPCを持っていなかったため、フィーチャーフォンからWebサイトを作り、テンキーを使ってCSSを書いていました。

エムペ!やモバイルスペース、フリースペースやmono spaceといったものが通じる人とはだいたい友達です。

Goodpatchのギークガール☆趣味はプログラミング!だから、仕事外でもアウトプットしていたい|CodeIQ MAGAZINEで「HTMLのタグは、単語登録をして作っていました。これでHTMLとCSSを覚えたんです」と書いてあって「ああ、やったやった」と頷いてしまいました。

そこからはずっと趣味として、Webサイトを10個くらい作っては閉鎖してということをしていくうちに、HTMLとCSSが体に染み付きました。

新卒で入った会社をやめた後に、職業訓練校に行きHTMLとCSS(とPHPやMySQLもほんの少し)を改めて学びました(といってもHTMLとCSSに関しては学ぶ内容はなかった)。

そして、初めてPCを使ってサイト(foursquareの日本語情報サイト)を作った結果、それが元でソーシャルゲームやWebサイトの受託制作を主の業務としている会社に入社することができました。

その会社を退職した後も引き続きHTMLやCSS、JavaScriptを仕事で書いてます。

CSSをリファクタリングするためのテストツール選定

この記事は今年のはじめに公開しようと思っていたのですが、体裁を整えないままずっと下書きに残ってしまっていたので供養の意味も込めて公開します。

もしかしたら間違ったことが書かれているかもしれないのと、情報も若干古くなってしまったのでそれらを承知の上でお読みください。


何をテストするのか

  • 肥大化したCSSを整理したい
  • 見た目は変えないようにする
  • CSSを整理した後に見た目が変わっていないことをテストで保証したい

ツールを検討する上での前提条件

  • 基本テストはVisual Studioのタスクランナーエクスプローラー上から行いたい
  • testタスクをクリックしたらでテスト実行したい
  • グローバルインストールさせたくない
    • タスクランナーエクスプローラーは依存しているパッケージで足りないものがあると、自動的にnpm installしてくれる
    • グローバルインストールが必要なものまではnpm install -gしてくれない

ツールの検討

まずRuby製のツールはNode.js一本でやりたい身としてはパスしたい。 Node.jsの他にインストールさせたくない…

BackstopJS

まずは何をテストするのか | CodeGridで紹介されていたBackstopJSを使ってみることにしました。

使ってみた結果が以下のリポジトリになります。 kubosho/sandbox-backstopjs

自分(達)がダメだと感じたところ

  • ページのキャプチャを取って差分画像をするまでの時間が長い
    • 作業効率が落ちる
  • npm i -g gulp casperjs phantomjs@1 する必要がある
    • グローバルインストールはさせたくない
    • devDependenciesに含めたい
  • node_modules/backstopjs 以下でGulpのタスクを実行する必要がある
    • node_modules 以下は極力触りたくない
    • Visual Studioのタスクランナーエクスプローラーと相性が悪い

PhantomCSS

OS XはCasperJS 1-1betaを別途インストールしないといけないが、Windows向けには.batファイルとしてCasperJSが添付されている。

Huddle/PhantomCSS

PhantomCSSのダメなところ

  • PhantomCSS/testsuite.jsを見ると分かるように依存しているCasperJSのことも考えないといけない構造になっており、PhantomCSSも微妙なのではという思いが募った
  • PhantomJSに対するNightmareのようにラップしたライブラリが欲しいと思った

人生に悩んでいる20代後半〜30代前半は夏アニメのReLIFEを見たほうがいい

録りためていた夏アニメのReLIFEをこの休日を使って一気見したのですが、ストーリーが自分にぶっ刺さり、また自分の人生を見つめ直し、これから後悔しない人生にするためにはどうしたら良いのか考えるきっかけになったので、ReLIFEは何がいいのかを一応ネタバレをさけつつ書いていきます。

あらすじ

公式サイト内のイントロダクションから引用するとこんな感じです。

海崎新太(27歳)は、新卒として入社した会社を3ヶ月で退職。その後の就活もうまく行かず、親からの仕送りも打ち切られ田舎に戻ることを迫られる。悩みを打ち明けられる友達も彼女もいない……途方に暮れる海崎の前に謎の人物・夜明了が現れる。

夜明は海崎にニートを対象にした社会復帰プログラム「リライフ」への参加をもちかける。その内容は、謎の秘薬で見た目だけ若返り、1年間高校生として高校に通うことだった――。

と、設定自体は現実にはあり得ないですが、主人公の海崎が周りの高校生と交流して影響を与えつつ、自身も忘れていたものを取り戻すという青春アニメです。

「ある程度社会人経験を積んだ人が、自分と照らし合わせたりしてもどかしさを覚えつつニヤニヤして見る」感じです。

なぜ良いと思ったのか

まずストーリーで引き込まれ、その次にED曲でさらに引き込まれました。 また登場人物やセリフ(主にヒロインの日代のセリフ)も刺さりました。

ストーリー

1・2話で続きが気になるような伏線を入れてきて、この伏線がどうなるか見続けたくなり、またその後もきっちりと続きが気になるところで終わらせていて、構成が上手いと感じました。

主人公の海崎はあらすじにもあるように新卒で入った会社をとある事情で3ヶ月で退職し、その後コンビニのバイトで食いつなぐも仕送りを打ち切られ、路頭に迷いそうになります。まずこの設定が現在の自分と合わさって少し感情移入し見ようという気になりました。

また、1話のタバコが見つかり先生に反省文の提出を求められる場面で、過去に海崎の身に何かあった描写や、2話で小野屋が海崎と一緒に大神をからかうのですが、海崎と同じくリライフしてきたのでは?と思わせる描写があり、この伏線はどうなるのかが気になりました(結局違う方向でしたが)。 同じく2話では、一見とっつきづらそうな日代が実は友達がほしいという思いを発露したのも意外な展開でした。

ただ3話ではその友達が欲しいというのが、バレー部の狩生にとって誤解される結果になり確執につながってしまいます(そののち解消しますが)。

また、両思いなのになかなか成就しない恋を見ては「早くお前らくっついて末永く爆発してほしい」ともどかしさを覚えたりしました。これは自分が学生時代に同じ経験をした結果、告白ができなかったということが関係しているかもしれません。

ED曲に使われる曲が20代後半〜30代前半にものすごく刺さる

ReLIFE - Wikipediaの主題歌を見ると分かりますが、「イージュー★ライダー」「HOT LIMIT」「タイミング」など、1990年代後半〜2000年代前半の間に小学〜中学生だった人にとってはものすごく刺さる選曲となっています。

特に第3話の「タイミング」はその後の展開を考えるとまさにタイミングが良かったり、第12話の「夏祭り - Whiteberry」はED曲が流れ始めたときの状況も合わさって「選曲した人は神か!」となりました。

登場人物

海崎は、その生い立ちから今の自分と重なるところがあり、感情移入して見てました。そして海崎の行動を見て、今までの自分が後悔した点を振り返り、そして今後後悔しないで生きるにはどうしたらいいのか考えるきっかけになりました。 また全体を通して、受け身の態勢ではなく積極的に自分の周辺を変えていこうという姿勢は見習おうと思いました。 ただ最終回でヘタレ感が半端なかったのが残念ですが…

日代も、一見愛想がなく無口ですが、2話でネコのスタンプに似ていると言われたときに「にゃあ」と返したり、3話で海崎から借りた1,000円札をターバンを巻いた形に折って返したりと、どこか変わっている部分もあり憎めない性格になっています。むしろかわいい。あと、後述するセリフがグサグサと自分の心に刺さりました。

狩生は、真っ直ぐで頑張りすぎるところがあるがそこがいいのと、最終回で急激にその魅力が増したように思えます。ツンデレ乙といった感じでしょうか。

セリフ

5話では、海崎が狩生に対して「人を貶そうとする行為は結局自分を貶す。今まで積み重ねてきた努力や信頼を自分で踏みにじるな」というのが、改めてそういうことをやらないようにしようと思いました。 5話はそれ以外にも名ゼリフがあってとてもよいです。

9話では、日代が海崎に対して「いつまでも失敗を引きずっている自分を倒したいんです。失敗は忘れてはいけないと思います。でも、悪い思い出のまま引きずっていて逃げ続けていたら、いつまでも変われないと思うんです。失敗があったからこそできるようになることもあると思うんです」というのが、自分の最近の振る舞いを考えてここから何を変えたらいいのか、どのような行動指針で動けばいいのか考えさせられました。

また、10話ではとある理由で試合に来なかった狩生に対して日代が説得するのですが、経験則から説得して「本当にこれでいいんですか?本当はどうしたいんですか?」というのが、自分の過去を振り返ってこれでよかったのかと考えさせられました。

見た結果

全体をとおして青春を感じたり海崎の積極性を見て、もどかしさや焦り、また自分の学生時代を思いだして、海崎のように積極性があったらとあのときはこうできたと思いました。 そして直近で自分があまり上手くいってなかったということもあり、はたしてこのままで良いのだろうかと思考を重ねていたところでこのアニメを見た結果、改めて自分の行動指針はなんだったっけと振り返るきっかけになりました。

ここまで書いて、なんだか自己啓発本やセミナーを受けた後の感想みたいと思いましたが、それは自分がこのアニメがきっかけで自分の人生を振り返って後悔した点と、これから後悔しないためにどう行動すればいいのか考えたのが関係しているかもしれません。

また、今までは自分が若いと思っていた節もあったのですが、もうおっさんになってしまったと自覚しました。

見てみる

Amazonプライムビデオで全話配信されているのと、comico内の「ReLIFEチャンネル」でも1話無料、その後はcomico内のポイントを消費で見られるようです。

あともちろんcomicoでも連載しているのと、紙やKindle版もあります。 今回のアニメは夏休み中までを描いていましたが、comico上だと2学期の文化祭のストーリーもあります。ここでも日代さんがかわいい。 また漫画版だと、アニメと展開が違ったり端折られている部分が描かれていたりしているため、アニメを見た状態でも1話から見たほうがいいです。

ReLIFE | 夜宵草 - 話題沸騰中のアニメ「ReLIFE」の原作をタダ読み!!

ReLIFE (アース・スター コミックス)

ReLIFE (アース・スター コミックス)

ReLIFE コミック 1-5巻セット (アース・スターコミック)

ReLIFE コミック 1-5巻セット (アース・スターコミック)

ReLIFE6 (アース・スターコミック) (アース・スターコミックス)

ReLIFE6 (アース・スターコミック) (アース・スターコミックス)

Re:VIEW + RedPen + Travis CIの環境を構築できるboilerplateを作った

夏コミに向けての進捗どうですか。

ブーメランを投げたところで、「執筆環境を整えて自動校正やgh-pagesへのデプロイもしてくれる」Re:VIEW boilerplateを作ったので紹介します。

リポジトリ:https://github.com/kubosho/review-boilerplate

Re:VIEW boilerplateとは

以下の機能を提供します。

  • Re:VIEWフォーマットからWebページやPDFを出力する
  • RedPenでRe:VIEW文書を自動校正する
  • Travis CIを使った継続的インテグレーションをする
  • gh-pagesへの自動デプロイ(Travis CIでビルドが正常終了した場合)

ライセンスもMIT Licenseなので、ライセンスと著作権表示さえしていただければ、あとは好きなように使えます。

Re:VIEW boilerplateの使いかた

READMEにも書いていますが、簡単に使いかたを書いていきます。

とりあえずWebページとして出力する

Node.jsとRuby + Bundlerさえインストールされていれば、以下のコマンドを実行するだけでarticles/book/内にindex.htmlができます。

npm run setup
npm run web

PDFを出力する

PDFを出力するときは別途TeXのインストールが必要になります。 TeXのインストールについてはTechBooster/FirstStepReVIEWを参照してください。 TeXがインストールされていれば、以下のコマンドを実行することでPDFが出力されます。

npm run pdf

Re:VIEW boilerplateを作ったきっかけ

2015年の冬コミで初めてRe:VIEWを使って執筆をしました。 2014年の夏コミではAsciidoctorを使いましたがRe:VIEWを比較した場合、Re:VIEWは以下の利点がありました。

  • 独自記法がAsciiDocと比べるとRe:VIEWのほうが簡潔
  • WebページやPDFへ変換するのが簡単
  • 日本において、Re:VIEWは多く実績がある

そのため今回の夏コミにて再びRe:VIEWで執筆することにしました。

そしてこれからもRe:VIEWで執筆しようと思ったため、ここらで環境構築をしておいて後は楽したいと思い、Re:VIEW boilerplateを作りました。

Re:VIEW boilerplateの使用例

この夏頒布予定のSteins;Git 0という「Steins;Gateの世界観をGitで説明する薄い本」で使っています。

他には使われていないので、ぜひ使ってみてください。そして気づいたことがあれば、issueやPull Requestを送ってください。