読者です 読者をやめる 読者になる 読者になる

Corredor

ウェブ、プログラミングの勉強メモ。

CSS3 の gradient とか flex とかを使って凝ったデザインを作ってみた

CSS CSS3 CodePen

アーケードゲームエミュレータとして知られる「MAME」のサイトのヘッダ部分の画像がカッコよかったので、CSS だけでどこまで再現できるか試してみた。

f:id:neos21:20161120063124p:plain

結果は以下。

f:id:neos21:20161120063636p:plain

CodePen で公開しているので、CodePen 上で広げて見てみてください。

See the Pen Gradation Grid Line Background by Neos21 (@Neos21) on CodePen.

背景を作るまで

幅 1200px くらいで見た時にそれっぽくなるように作った。1要素で済ませてみたかったので background を複数指定して頑張った。

background (background-image) は先に指定したものほど上に重なるので、初めに左右下にビネット効果を与えるグラデーションを指定し、一番最後に全体の背景となる黒を載せるようにした。background-sizebackground-positionbackground-repeat などは、background で指定した順に合わせて指定する。

さて、グリッド状の背景を作る方法だが、これは linear-gradient()background-size を組み合わせ、20px 四方の右端もしくは下端に 1px 程度の色を付けるようにした。それ以外の部分は透過させておき、「横線の繰り返し」のレイヤーと「縦線の繰り返し」のレイヤーを重ねることで方眼を作った。

ここで問題なのは、MAME のサイトの方をよく見ると、このマス目の罫線自体がグラデーションしているのだ。20px 四方の背景を作り出して繰り返させている以上、この罫線をさらにグラデーションさせることができず、今回は断念した。うまいやり方知ってる人がいたら教えてください。

それ以外は円形グラデーションの組み合わせでそれっぽく表現した。グラデーションというと linear-gradient() しかないんだろうと思っていたのだけど、radial-gradient() という関数もあった。これは円形のグラデーションが指定できるもの。位置指定とサイズ指定の関係を理解するのに時間がかかったので、MDN でプロパティを見ながら実際に使って見てみると良い。円の大きさや色合いをもっと凝れば近付けられると思うが、大変なのでそれっぽいところで切り上げた。

文字に関する指定

テキストが複数行になっても上下左右で中央寄せになるようにするため、display:flex; を利用した。align-items:center; で垂直方向に中央寄せにし、justify-content:center; で水平方向に中央寄せにするのだが、折り返しが発生するほど幅が狭められた時は text-align:center; がないと水平方向の中央寄せが効かない。

あとは text-shadow で若干 Glow エフェクト (ネオン効果) みたいなのを付けてみたりした程度。

以上

CSS オンリーでもそれなりに凝ったことができるのはやはり面白い。Photoshop いらずの CSS 芸人になれたらいいな。

Git で直前のコミット日時を変更して GitHub の草を生やし続ける

Git GitHub

GitHub の草を絶やさないための姑息な裏技。

git log --amend --date というコマンドで、直前のコミットの日時を変更できる。

$ git add sample.txt
$ git commit -m "サンプルのコミット。"
$ git log --pretty=fuller
commit a75cc……
Author:     Neos21 <mail@example.com>
AuthorDate: Wed Jul 13 00:07:05 2016 +0900
Commit:     Neos21 <mail@example.com>
CommitDate: Wed Jul 13 00:07:05 2016 +0900

上記のように何らかのコミットを行ったあと、git log --pretty=fuller というコマンドを打つと、AuthorDateCommitDate という日付が見える。GitHub の Contributions、いわゆる「草」は、この内の AuthorDate を見て色付けを行っている。

この2つの日付は何なのかというと、コミットする内容を作った著者 (Author) の日付と、そのコミット情報を取り込んだ人 (Commiter) の日付を別々に持っているということらしい。

The author is the person who originally wrote the work, whereas the committer is the person who last applied the work.

さて、この AuthorDate さえ偽装できれば、GitHub で後から過去日に草を生やせるということだ。そのコマンドは以下。

# 先程のようなコミット直後に打つ。
$ git commit --amend --date="Mon Jul 11 12:00:00 2016 +0900"

$ git log --pretty=fuller
commit a75cc……
Author:     Neos21 <mail@example.com>
AuthorDate: Mon Jul 11 12:00:00 2016 +0900
Commit:     Neos21 <mail@example.com>
CommitDate: Wed Jul 13 00:07:05 2016 +0900

git commit --amend --date というコマンドで、直前のコミットの AuthorDate だけを書き換えた。--date="Mon Jul 11 12:00:00 2016 +0900" 部分で日時を指定している。ココを誤るとコミットに失敗するので、曜日含め正確に記入する必要がある。

うまくコミットできると、git log --pretty=fuller で見える AuthorDate が書き換わったことが分かるだろう。ちなみに通常 git log で閲覧できる日付は CommitDate の方なので、こちらで見ると何も変わっていないように見えるが平気。

この状態で git pushGitHub に Push してしまえば、それが過去日であろうと、GitHub Contributions に草が生やせる。

git commit --amend で操作するコミットの、さらに1つ手前のコミットよりも古い日付を指定したらどうなるのだろう。First Commit よりも過去日を指定したらどうなるんだろう。コミットログの順序と日付の整合が取れなくなるような操作は試していなくて、GitHub 上に既に Push してあるコミット履歴を改変するようなことをすると、git rebase なりしてマージしないといけなくなりそうな気がするので試していない。
普段誰も見ないようなどうでもいいリポジトリを作っておいて、草を生やしたいときだけどうでもいいコミットを作って日付改変して Push するのが安全だろうか。

しかし GitHub 上の表示仕様が変わって、Current Streak も見えなくなったし、今更みんな草の密集度合いとか気にしてないか。どうでもいいところに神経質で、上っ面だけでもキチッとしていたい人がいましたら、自己満足のためにドウゾ。

参考

Asus ChromeBook Flip C100PA-DB02 を買いました

ChromeOS ChromeBook Chrome

新型 MacBookPro が発表されたのを見て、「軽い MacBook イイなぁ~、Early 2015 の MacBookPro 13インチは大変優秀だけど 1.58kg もあると、持ち運び大変なんだよなぁ…」と思い、一旦は「iPad Pro + キーボードでノート PC チックに使う」案を検討したが、やはり iOS だと開発環境としては厳しいかなぁと思い断念。

色々考えていたら、ChromeBook という激安ノートパソコンが選択肢に挙がる。

これは面白い…。

そう思っていた次の瞬間手元には Asus ChromeBook Flip C100PA-DB02 が!!!!!

f:id:neos21:20161107012713j:plain

箱から出しました…

f:id:neos21:20161107012020j:plain

御開帳…

f:id:neos21:20161107012645j:plain

なるほど…

スペック

  • Asus ChromeBook Flip C100PA-DB02
  • CPU:Rockchip RK3288 1.8GHz Processor
  • RAM:4GB DDR3
  • SSD:16GB
  • Screen:10.1 Inches / 1280x800 Pixels / Touch Screen
  • Keyboard:US key
  • Weight:890g
  • OS:Chrome OS

日本でも売っている ChromeBook Flip の海外版。日本ではメモリ 2GB、日本語キーボードなのだけど、MacBookPro 同様、英語配列のキーボードにしたかったのと、4GB メモリがあった方が良いかと思い、海外版を購入。

実際の商品はコレ。

日本語版の紹介サイトはコチラ。

ChromeBook Flip という名前のとおり、液晶を裏側に折りたたんで、タッチパネルでタブレットのように扱える。890g と MacBookPro (1.58kg) のほぼ半分の重さで、10.1インチは手軽に扱えるサイズだ。

今回の海外モデル、海外の Amazon.com で買うと、速達オプションを入れても3万3千円程度でかなり安い。日本の Amazon で同じ型番の並行輸入品を買うと、約4万5千円になる。ということで、Amazon.com に登録して3万3千円で買ってやろうと思ったら、カード会社が使用を不審に思って止めに入ったらしく、注文がキャンセルされてしまい、オマケに Amazon.com のアカウントにログインできなくなってしまった。アカウント解除とかのあれこれを考えるのがもう面倒臭いので、日本の Amazon で4万5千円出して買ってしまった。2016年11月3日注文、2016年11月5日到着。

ChromeBook って?

ChromeBook は、ChromeOS を搭載したノートパソコンの総称。この Asus 以外にも、Google と提携するメーカー各社が「ChromeBook」の名を冠した製品を販売している。Windows OS にお金を取られないので安く済んでいる。スペックを落としてあり、作りも若干安っぽいモノが多いが、「安かろう悪かろう」ではなく、少なくともサブ機として必要十分なスペックだ。

ChromeOS は基本的に Chrome ブラウザだけで構成されており、アドインのようにインストールできる拡張機能およびアプリしか使えないので、WindowsMac のように、Office やら Firefox やらといった外部ソフトを入れたりすることはできない。Android に通じるような気がするが、「限られた中でカスタマイズして使う精神」がないと凝ったことはできない。逆に、「ネット見るだけだし、ブラウザとかよく分かんない」って人は、ネットとメールだけに限ったノートパソコンとして十分に使える。

並べてみる

左に ChromeBook Flip 10.1インチ、右に MacBook Pro 13インチ。外観はシルバーで、キーボードの配色やベゼルの色も MacBook Pro によく似ている。ChromeBook の方はバックライトキーボードではない。また、液晶の明るさも、MacBook Pro と比べるとだいぶ暗いように感じた。明るさの問題は比べるからであって、使っていれば慣れる。

f:id:neos21:20161107014125j:plain

そうそう、多分このブログではまだ記事にしていなかったと思うのだけど、MacBook Pro にはカラフルなケースを被せてある。普段は以下のようなカラフルなキーボードカバーを付けていて、これだとさらに印象が変わる。

f:id:neos21:20161107014443j:plain

Windows マシンのモニタの前に置いてみた。10.1インチ液晶で、解像度は 1440x900 px が最大。3つとも同じ壁紙にしてあるだけで、特に同期とかはさせていない。

ChromeOS の実力は?

普段は Firefox メインで、Chrome ブラウザはボチボチだったのだが、ChromeOS 導入を機にカスタマイズを本格化した。Gmail アカウントに設定内容が同期されるので、WindowsMacChrome ブラウザからインストールしておいた拡張機能やアプリなどは、ChromeOS の Chrome ブラウザにもサッと同期させられる。ブックマークなども Gmail アカウントとして同期するのでかなり便利だ。

メインで使っている Firefox のブックマークと連動させることができていないが、今のところ不便していない。というのも、Firefox を使用するメインの作業を ChromeBook で完璧にできないといけないこともないので、必要なブックマークだけ Chrome にも入れておくぐらいでなんとかなっている。サブ機としての使用に限定している感じだ。

メーラーも普段は Thunderbird を使っているが、管理しているアカウントは Gmail だったので、普通に Gmail で見れたら十分。

その他、Google Keep、スプレッドシートなどは普段から使っているので、Gmail アカウントの同期でなんとかなっている。

EvernoteDropbox、Wunderlist など、普段 WindowsMaciPhone で使っているアプリとの連携も、Chrome アプリ・拡張機能を入れれば普通に使えて、動画も VLC プレイヤーが入るので特に問題なし。

エクスプローラ的な「ファイル」アプリがあるが、ローカルの SSD を使うルートディレクトリは「ダウンロード」フォルダ配下になる。ローカルの SSD は 16GB しかないので、基本的には Gmail アカウントに紐付く Google ドライブを使うことになる。「ヘルプ」画面あたりに案内があったと思うが、本体を購入した特典で Google ドライブに 100GB 分の容量をもらえるので、サブ機で操作する内容として不便はないだろう。前述のとおり Dropbox 連携もできるので、不便は全くない。

「ダウンロード」フォルダがルート扱いなのが気持ち悪い人には、以下のアプリで任意のフォルダを「ダウンロード」フォルダと同じ階層に作ることができる。

開発環境としてはどうか?

Chrome Dev Editor というアプリがあり、GitHub と連携してのフロントエンド開発ができる。その他、標準では RubyPython をインストールできるわけではなく、Cloud9 などのウェブサービスで開発する手法が一般的。

このあと話すが、開発者モードにすることでシェル (Bash) をいじれるので、ターミナルのカスタマイズが可能。

開発者モードにする

ChromeOS には「開発者モード」というものがあり、これを有効にするとターミナル環境をいじることができる。開発者モードに移行するとそれまでのローカルデータは全て消えるので、購入したら最初に開発者モードにしてから始めると良い。

手順は以下のとおり。解説しているサイトは沢山あるので、色々調べてみるべし。

  1. 一度パソコンの電源を落とし、Esc + F3 (Refresh キー) + 電源ボタンで起動する。
  2. Ctrl + D で開発者モードにする。
  3. スペースキーは押さずに、初期化が始まるまで待つ。
  4. 初期化が終わったら、次回以降、起動時は毎回 Ctrl + D を押す。

これで開発者モードになる。

起動したら、Ctrl + Alt + T でターミナルを起動する。ここで起動するシェルは crosh と呼ばれる ChromeOS のシェルで、ココで

$ shell

と入力することで、Bash が起動する。

ここからあれやこれやすると、Linux OS を導入してデュアルブートできるようになる。この話は次回。

まとめ

まだ2日しか使っていないが、スペック的には申し分なし。

複数タブを一気に開くと若干もたつくが、MacBook Pro での同様の操作と処理時間がそんなに変わらないので、無線 LAN の速度で待たされているのかな?と思う。動画・音声も問題なく再生できており、音質はそこそこ良い。自分はサブ機と割り切っているが、用途が合えばメイン機としても十分申し分ない。キーボードは個人的には MacBook Pro より打ちやすく感じていて好きだ。

初の ChromeOS なので、これからゴリゴリカスタマイズしていこうと思う。

Doskey コマンドで読み込ませるマクロファイル中のコメントアウト

Windows コマンド Windows バッチ

コマンドプロンプトは、一部の記号文字が無視されるので、Doskey コマンドで読み込ませるマクロファイルの中に、コメントアウトのように使えるみたい。

Doskey コマンドと、コマンドプロンプトにおけるエイリアスは以下の記事をドウゾ。

neos21.hatenablog.com

行頭に書いて無視される記号 (独自調べ)

  • セミコロン ;
  • イコール =
  • カンマ ,
  • アットマーク @

このあたりはバッチファイルなんかに書いても行頭の記号を認識しないので、

; Rem コメント

のように書くことで完全にコメントアウトできる。

コロン : も同様の動きをするが、これはラベルとして扱われていると思われるので、余計な影響をなくすためここからは外しておいた。

マクロファイル内でのコメント定石

調べたところ、セミコロンとイコール ;= を繋げてコメントアウトライクに書く手法が多く使われているみたい。

;= Rem ココはコメント。
;= Rem コピーのエイリアス
cp=copy

;= Rem セミコロンの初期化
;=

マクロファイルの最終行に ;= だけの行を置いておくことで、; を空っぽのエイリアスとして再定義して終わらせると安全っぽい。

そういえば Echo コマンドの直後に開始カッコ ( を書いても動くんだよね。コレがなかなか難読化させてくれて面白い。

Rem 引数が空の時に空行として扱うようにするときは、大抵ピリオドを使うことが多いが…
Echo.%HOGE%

Rem ピリオドではなく開始カッコを使っても良いので、For 文の中などで使うとカッコの数をおかしくできる
Echo(%HOGE%

Windows で関連付けがうまくできなくなったらこう直す

Windows Registry

プログラムの一覧からソフトを選択しても、そのソフトに関連付けを変更できないまま上手く開けない時のアレを直す方法。Windows7 でも Windows10 でも。

regedit」を開き、「HKEY_CLASSES_ROOT\Applications\」まで下る。

その下に、関連付けが上手く設定できないソフトのキー (ツリー上でフォルダのアイコンで表現されているもの) があるはず。これを右クリックから「削除」してしまう。コレで OK。