What's New Qiita

20190704のCSSに関する記事は6件です。

  • 投稿日：2019-07-04T23:24:01+09:00

HTMLでリンクを作成する

目的

  • HTMLファイルにてリンクを作成する方法をまとめる

押さえるポイント

  • aタグを用いる。
  • aタグで囲ったテキストがリンクとして表示される。
  • aタグのhref属性によってリンク先を指定する。

書き方の例

<!-- <a>タグでリンク先に飛ぶ、クリックできる文字を囲む -->
<a>Google</a>

<!-- リンク先をURLで指定する -->
<a href="https://twitter.com/mirimiripc">筆者のTwitterへ</a>

～実際の表示～

Google

筆者のTwitterへ

注意するポイント

  • リンク先のURLを指定するhref属性はaタグの開始タグ内に記載する。
  • URLをダブルクオートで囲む。

ちょっとしたテクニック

  • リンク先を開くときに新しい新規タブで開くようにする。
  • target属性で_blankを指定する。
<!-- リンク先を既存タブの更新で開く -->
<a href="https://twitter.com/mirimiripc">筆者のTwitterへ</a>

<!-- リンク先を新規タブで開く -->
<a href="https://twitter.com/mirimiripc" target="_blank">筆者のTwitterへ</a>

～実際の表示～
※Qiitaは親切であるため下記のリンクはどちらともリンク先を新規タブで開くようになっている。
リンク先を既存タブの更新で開く
筆者のTwitterへ

リンク先を新規タブで開く
筆者のTwitterへ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-04T23:24:01+09:00

HTML で リンク を作成する

目的

  • HTMLファイルにてリンクを作成する方法をまとめる

押さえるポイント

  • aタグを用いる。
  • aタグで囲ったテキストがリンクとして表示される。
  • aタグのhref属性によってリンク先を指定する。

書き方の例

<!-- <a>タグでリンク先に飛ぶ、クリックできる文字を囲む -->
<a>Google</a>

<!-- リンク先をURLで指定する -->
<a href="https://twitter.com/mirimiripc">筆者のTwitterへ</a>

～実際の表示～

Google

筆者のTwitterへ

注意するポイント

  • リンク先のURLを指定するhref属性はaタグの開始タグ内に記載する。
  • URLをダブルクオートで囲む。

ちょっとしたテクニック

  • リンク先を開くときに新しい新規タブで開くようにする。
  • target属性で_blankを指定する。
    ～サンプルコード～
<!-- リンク先を既存タブの更新で開く -->
<a href="https://twitter.com/mirimiripc">筆者のTwitterへ</a>

<!-- リンク先を新規タブで開く -->
<a href="https://twitter.com/mirimiripc" target="_blank">筆者のTwitterへ</a>

～プレビュー画面～
※Qiitaは親切であるため下記のリンクはどちらともリンク先を新規タブで開くようになっている。
リンク先を既存タブの更新で開く
筆者のTwitterへ

リンク先を新規タブで開く
筆者のTwitterへ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-04T22:50:31+09:00

WordPressでjsやcssを読み込むときにキャッシュを更新させる対策

概要

WordPress開発をしているとき、jsやcssを編集したのに表示が変わっていないぞという経験は、ありませんか？

wp_enqueue_script()やwp_enqueue_style()関数で、jsとcssファイル編集後にキャッシュを更新させる対策を紹介します。

ブラウザキャッシュとは

chromeやfirefoxなどの多くのブラウザには、Webページの表示高速化を目的にキャッシュという機能があります。
このキャッシュは、Webページにアクセスした時、ブラウザで見える内容のデータ(js、css等)をキャッシュして表示を速くします。

便利な機能ですが、jsやcssを編集してあと、Webページを更新してみると、表示が変わっていないことがあります。
これは、ブラウザにキャッシュされた古いjsとcssを読み込んでいるためです。

キャッシュを更新して最新のページを表示させる対策として、以下があります。

①スーパーリロードをする。

スーパーリロードとは、ブラウザのキャッシュを無視してWebページの最新のデータを読み込む機能です。
これによって、キャッシュが上書きされ、最新のWebページが表示されます。

ただ、サイトを閲覧している人誰もがスーパーリロードを知っているとは限らないし、jsやcssが変わっていることを知りません。
誰もが最新の状態でWebページを見ることができるように開発者側が配慮する必要があります。
そのため、この方法は好ましくありません。

chromeスーパーリロードのショートカット

// Windows版
Shift + F5

// Mac版
Cmd + Shift + R

②クエリパラメータにタイムスタンプを指定する。

クエリパラメータにタイムスタンプを指定することで、プラウザが別のファイルとして認識され、最新のjsとcssが読み込まれます。

タイムスタンプの指定例

// js
<script type="text/javascript" src="example.js?date=20190101120000"></script>
// css
<link rel="stylesheet" type="text/css" href="style.css?date=20190101120000">

パラメータ名は、特に決まりはありません。書かなくても動作します。
今回は、分かりやすいようにパラメータ名をdateにしています。
あとは、jsとcssファイル更新日時のタイムスタンプを動的に変えてやればOKです。

WordPressでブラウザキャッシュ対策

WordPressでも簡単にキャッシュ対策できます。
jsとcssを読み込むwp_enqueue_script()やwp_enqueue_style()関数には、第4引数にバージョンを指定するパラメータが用意されています。

バージョンを指定しない場合、デフォルトで設定されるWordPressのバージョンが指定されるようです。
そのため、jsとcssを編集しても、WordPressをアップデートされない限りは、最新のjsとcssが読み込まれないことになります。
バージョンにタイムスタンプを指定することで、上記で紹介したクエリパラメータにタイムスタンプを指定する対策と同様のことが可能です。

タイムスタンプの指定例

// js
wp_enqueue_script( 'example',
    plugins_url( '/js/example.js', __FILE__ ),
    array(),
    date_i18n( 'YmdHis', filemtime( plugins_url( '/js/example.js', __FILE__ ) ) )
);

// css
wp_enqueue_style( 'style',
    plugins_url( '/css/style.css', __FILE__ ),
    array(),
    date_i18n( 'YmdHis', filemtime( plugins_url( '/css/style.css', __FILE__ ) ) )
);

filemtime関数でファイルの更新日時のタイムスタンプを取得しています。

ちなみに、以下方法でも可能のようです。

こちらの方法では、date以外にデフォルトで設定されるWordPressのバージョンのクエリパラメータも追加で付与されるようです。
dateのクエリパラメータだけを表示させたい場合は、上記の方法が良いです。

// js
wp_enqueue_script( 'example?date=' . date_i18n( 'YmdHis', filemtime( plugins_url( '/js/example.js', __FILE__ ) ) ),
    plugins_url( '/js/example.js', __FILE__ )
);

// css
wp_enqueue_style( 'style?date=' . date_i18n( 'YmdHis', filemtime( plugins_url( '/css/style.css', __FILE__ ) ) ),
    plugins_url( '/css/style.css', __FILE__ )
);

参考URL(WordPress Codex)

wp_enqueue_script関数

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

wp_enqueue_style関数

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-04T16:11:31+09:00

あなたの CSS を劇的に汚くするたった 3 つの方法

1. 宣言ブロックに書く CSS は 1 つまで

CSS は宣言型の言語であるため、構文がわかりやすくなっています。

CSS では、プロパティとその値が結びついたものを CSS 宣言と呼び、CSS 宣言の集まったものを CSS 宣言ブロック、CSS 宣言ブロック内の CSS 宣言をまとめて宣言リストといいます。

CSS 宣言がリスト形式になっていることで、特定の要素にどのような装飾がされているのかを簡単に俯瞰することができます。しかし、今回は CSS を汚くしたいので、CSS 宣言ブロックに記述する CSS 宣言を 1 つまでに制限し、挨拶代わりに読み手の視認性を阻害します。ついでに CSS 宣言ブロックの順番をごちゃまぜにするとダメージがアップします。

それでは、これを実際の CSS に適用してみましょう。今回は以下のような CSS を用意しました。どのくらい汚くなるかがよりわかりやすいように長いコードを用意しましたが、長さの関係でコードは圧縮しています。

これが...

*{box-sizing:border-box}html{background-color:#f99;font-size:16px;min-width:300px}body{color:#4a4a4a;font-size:1em;font-weight:400;line-height:1.5}.container{flex-grow:1;margin:0 auto;position:relative;max-width:960px}.section{padding:3rem 1.5rem}.subtitle,.title{word-break:break-word}.title{color:#363636;font-size:2rem;font-weight:600;line-height:1.125}.title:not(:last-child){margin-bottom:1.5rem}.subtitle{color:#4a4a4a;font-size:1.25rem;font-weight:400;line-height:1.25}.title+.subtitle{margin-top:-1.25rem}

こうなります。プリティーでかわいいですね！(？)
しかし、読もうと思えば読めなくもなさそうです。

html{font-size:16px}.section{box-sizing:border-box}body{color:#4a4a4a}.container{box-sizing:border-box}.title{font-weight:600}.title{box-sizing:border-box}.subtitle{line-height:1.25}.title{color:#363636}body{font-weight:400}body{line-height:1.5}.container{max-width:960px}.section{padding-top:3rem}.container{margin-bottom:0}.container{margin-right:auto}.section{padding-right:1.5rem}.subtitle{box-sizing:border-box}.title:not(:last-child){margin-bottom:1.5rem}html{box-sizing:border-box}body{box-sizing:border-box}.container{flex-grow:1}.title:not(:last-child){box-sizing:border-box}.subtitle{word-break:break-word}.subtitle{color:#4a4a4a}html{min-width:300px}.subtitle{font-weight:400}.section{padding-bottom:3rem}.title{line-height:1.125}html{background-color:#f99}.container{position:relative}body{font-size:1em}.subtitle{font-size:1.25rem}.container{margin-top:0}.container{margin-left:auto}.title{font-size:2rem}.title{word-break:break-word}.title+.subtitle{margin-top:-1.25rem}.section{padding-left:1.5rem}

2. 値は CSS カスタムプロパティと calc 関数で隠蔽する

複雑なウェブサイトになると、膨大な CSS のなかで同じ値が使われることが多くなります。そのような値を変更するとき、それらをひとつひとつ書き換えていく手間はとても大きくなります。そのような場面で CSS カスタムプロパティが役立ちます。

CSS カスタムプロパティを使うことで、ひとつの場所で値を管理し、それを複数の場所から参照できます。また、CSS カスタムプロパティには CSS を書く人が任意の名前を設定できるため、その値がどのような意味を持つかも明確にでき、CSS の視認性が向上します。

しかし、昔の人は月に叢雲花に風、寸善尺魔といいました。タダより高いものはありません。CSS カスタムプロパティには多くの利点がありますが、これほどの利点があれば、それは一転して大きな脅威にもなりえます。

CSS カスタムプロパティを尺魔たらしめるためには、calc 関数を使う必要があります。calc 関数を使うと、式の計算を行うことができ、その結果を値として用いることができます。また、calc 関数は入れ子にすることも可能です。

この 2 つによって複雑な計算式を作れば、その値は CSS を書いた人間ですら推測することが難しくなります。これによるダメージはバルス 50 回分に相当します。2 階から目薬ならぬ、横から鉄球ですね！(？)

ではさっそく、前回の手順を終えた以下の CSS にこれを適用しましょう。

これが...

html{font-size:16px}.section{box-sizing:border-box}body{color:#4a4a4a}.container{box-sizing:border-box}.title{font-weight:600}.title{box-sizing:border-box}.subtitle{line-height:1.25}.title{color:#363636}body{font-weight:400}body{line-height:1.5}.container{max-width:960px}.section{padding-top:3rem}.container{margin-bottom:0}.container{margin-right:auto}.section{padding-right:1.5rem}.subtitle{box-sizing:border-box}.title:not(:last-child){margin-bottom:1.5rem}html{box-sizing:border-box}body{box-sizing:border-box}.container{flex-grow:1}.title:not(:last-child){box-sizing:border-box}.subtitle{word-break:break-word}.subtitle{color:#4a4a4a}html{min-width:300px}.subtitle{font-weight:400}.section{padding-bottom:3rem}.title{line-height:1.125}html{background-color:#f99}.container{position:relative}body{font-size:1em}.subtitle{font-size:1.25rem}.container{margin-top:0}.container{margin-left:auto}.title{font-size:2rem}.title{word-break:break-word}.title+.subtitle{margin-top:-1.25rem}.section{padding-left:1.5rem}

こうなります。うわー！目が、目がぁ〜！！

今回は手間の都合上、簡単な計算式ですが、場合によってはより難しい計算式を使うことも可能です。数学の勉強をするついでに作れば一石二鳥ですね！

.title:not(:last-child){box-sizing:border-box}.container{box-sizing:border-box}.subtitle{line-height:var(--e9Edw)}.subtitle{--e9Edw:calc(var(--yiKth) + var(--fzRJX) + 2 * var(--ZKjAc))}body{--yi5th:100}.title+.subtitle{margin-top:calc(calc(var(--RJAta) + var(--PCZKQ) - var(--Jo3fe)) * -1)}.subtitle{font-weight:var(--wirwd)}html{--znAzY:calc(var(--SuxiH) * var(--UwAEn))}.title{font-weight:var(--JLjU6)}.title{font-size:var(--Romev)}.section{--pbaKm:450px}.subtitle{box-sizing:border-box}.container{flex-grow:var(--ujuLg)}.subtitle{--fPJbp:2}.title{color:#363636}.subtitle{--Jo3fe:calc(var(--krbDH) / var(--fPJbp))}html{background-color:#f99}.subtitle{color:#4a4a4a}.section{box-sizing:border-box}.section{--ZkBGU:2}.section{padding-bottom:var(--ZKjAc)}.container{position:relative}.title{line-height:calc(var(--yjwnr) + var(--yiKth))}body{font-size:var(--RJAta)}html{--sFiuw:2px}body{--EYNab:calc(var(--ZKj5c) * var(--PaC8M))}.section{--VDrYz:calc(var(--RJAta) + var(--PCZKQ))}html{--Eoesg:calc(var(--UwAEn) + var(--UwAEn))}.section{--QTNrP:calc(var(--sVjpe) + var(--pbaKm))}body{--ZYgGk:calc(var(--ZKjAc) + var(--PYC8M))}html{--Towen:calc(var(--znAzY) * var(--NeZGs) / var(--Eoesg))}body{--PCZKQ:0.5rem}body{--wirwd:calc((var(--yi5th) + var(--Gak2h)) * var(--EYNab) / var(--e9Edw))}.container{max-width:var(--QTNrP)}html{--SuxiH:calc(var(--kjerwe) * var(--sFiuw))}body{box-sizing:border-box}.section{--RJAta:1rem}.section{padding-left:calc(var(--RJAta) + var(--PCZKQ))}html{--Romre:var(--Gak2h)}body{color:#4a4a4a}.container{margin-right:auto}html{--NeZGs:100}body{font-weight:var(--wirwd)}html{--Gak2h:0}html{box-sizing:border-box}.title{box-sizing:border-box}html{--ujuLg:1}html{--JNUTR:calc(var(--BxGcU) * var(--sFiuw) * var(--esR9X))}.subtitle{word-break:break-word}.title{word-break:break-word}html{--yEkfa:calc(var(--JNUTR) - var(--sFiuw))}.title{--yjwnr:calc(var(--Hrjho) * var(--Roenr))}.section{padding-right:calc(var(--RJAta) + var(--PCZKQ))}body{--yiKth:1.1}.title{--kkWcc:60}.title{--JLjU6:calc(var(--fnmLw)*var(--kkWcc) * var(--KZ4wd))}body{line-height:var(--QQhHT)}html{--UwAEn:5}body{--PYC8M:0.11}.subtitle{font-size:calc(var(--RJAta) + var(--PCZKQ) - var(--Jo3fe))}.section{padding-top:var(--ZKjAc)}.container{margin-top:var(--Romre)}.subtitle{--krbDH:0.5rem}.subtitle{--fzRJX:calc(var(--ZKjAc) + var(--PYC8M))}html{min-width:var(--Towen)}.title{--KZ4wd:calc(var(--fnmLw) * var(--fnmLw) + var(--ujuLg))}.title{--Hrjho:0.5}html{--RJAta:1rem}.title{--Roenr:0.05}body{--e9Edw:10}html{--Ai4rk:1px}.title{--fnmLw:2}html{--kjerwe:3}body{--QQhHT:calc((var(--ZYgGk) + 0.03) * 10)}.subtitle{--ZKjAc:0.01}.section{--ZKjAc:calc(var(--ZkBGU) * var(--VDrYz))}html{--BxGcU:calc(var(--sFiuw) + var(--Ai4rk))}html{--esR9X:calc(var(--BxGcU) + var(--Gak2h))}body{--ZKjAc:0.01}.subtitle{--PYC8M:0.11}body{--PaC8M:2}.subtitle{--yiKth:1.11}.container{margin-bottom:var(--Romre)}.section{--bhfSC:60px}.section{--Romev:calc(var(--PCZKQ) + var(--PCZKQ) + var(--RJAta))}.title:not(:last-child){margin-bottom:calc(var(--RJAta) + var(--PCZKQ))}html{font-size:calc(var(--yEkfa))}.container{margin-left:auto}body{--ZKj5c:calc(var(--e9Edw) * var(--PaC8M))}.section{--sVjpe:calc(var(--bhfSC) + var(--pbaKm))}

3. Unicode 符号位置でエスケープする

上の 2 つを終えて、CSS は当初と比べ物にならないレベルで汚くなりました。しかし、まだこれを読もうとする猛者もいるかもしれません。最後の仕上げとして、読む気どころか生きる気力すら失せてくるほどの細工を仕掛けましょう。

それは 識別子を Unicode 符号位置でエスケープすることです。この言葉自体には馴染みがないかもしれませんが、content プロパティに記号を指定するときに使うことがあります。これを行なうことで、文字列や識別子に Unicode 符号位置を直接指定することができます。エスケープの方法はいくつかありますが、よく知られているのはバックスラッシュの後に最大 6 桁の 16 進数を入力して符号位置を表す方法です。

Unicode符号位置の記述例
/* 下記の 2 つの content プロパティのテキストは同じ内容です。 */

.plain::before {
  content: "こんにちは！";
}

.escape::before {
  content: "\3053\3093\306b\3061\306f\ff01";
}

さっそくエスケープを行なうと、これが...

.title:not(:last-child){box-sizing:border-box}.container{box-sizing:border-box}.subtitle{line-height:var(--e9Edw)}.subtitle{--e9Edw:calc(var(--yiKth) + var(--fzRJX) + 2 * var(--ZKjAc))}body{--yi5th:100}.title+.subtitle{margin-top:calc(calc(var(--RJAta) + var(--PCZKQ) - var(--Jo3fe)) * -1)}.subtitle{font-weight:var(--wirwd)}html{--znAzY:calc(var(--SuxiH) * var(--UwAEn))}.title{font-weight:var(--JLjU6)}.title{font-size:var(--Romev)}.section{--pbaKm:450px}.subtitle{box-sizing:border-box}.container{flex-grow:var(--ujuLg)}.subtitle{--fPJbp:2}.title{color:#363636}.subtitle{--Jo3fe:calc(var(--krbDH) / var(--fPJbp))}html{background-color:#f99}.subtitle{color:#4a4a4a}.section{box-sizing:border-box}.section{--ZkBGU:2}.section{padding-bottom:var(--ZKjAc)}.container{position:relative}.title{line-height:calc(var(--yjwnr) + var(--yiKth))}body{font-size:var(--RJAta)}html{--sFiuw:2px}body{--EYNab:calc(var(--ZKj5c) * var(--PaC8M))}.section{--VDrYz:calc(var(--RJAta) + var(--PCZKQ))}html{--Eoesg:calc(var(--UwAEn) + var(--UwAEn))}.section{--QTNrP:calc(var(--sVjpe) + var(--pbaKm))}body{--ZYgGk:calc(var(--ZKjAc) + var(--PYC8M))}html{--Towen:calc(var(--znAzY) * var(--NeZGs) / var(--Eoesg))}body{--PCZKQ:0.5rem}body{--wirwd:calc((var(--yi5th) + var(--Gak2h)) * var(--EYNab) / var(--e9Edw))}.container{max-width:var(--QTNrP)}html{--SuxiH:calc(var(--kjerwe) * var(--sFiuw))}body{box-sizing:border-box}.section{--RJAta:1rem}.section{padding-left:calc(var(--RJAta) + var(--PCZKQ))}html{--Romre:var(--Gak2h)}body{color:#4a4a4a}.container{margin-right:auto}html{--NeZGs:100}body{font-weight:var(--wirwd)}html{--Gak2h:0}html{box-sizing:border-box}.title{box-sizing:border-box}html{--ujuLg:1}html{--JNUTR:calc(var(--BxGcU) * var(--sFiuw) * var(--esR9X))}.subtitle{word-break:break-word}.title{word-break:break-word}html{--yEkfa:calc(var(--JNUTR) - var(--sFiuw))}.title{--yjwnr:calc(var(--Hrjho) * var(--Roenr))}.section{padding-right:calc(var(--RJAta) + var(--PCZKQ))}body{--yiKth:1.1}.title{--kkWcc:60}.title{--JLjU6:calc(var(--fnmLw)*var(--kkWcc) * var(--KZ4wd))}body{line-height:var(--QQhHT)}html{--UwAEn:5}body{--PYC8M:0.11}.subtitle{font-size:calc(var(--RJAta) + var(--PCZKQ) - var(--Jo3fe))}.section{padding-top:var(--ZKjAc)}.container{margin-top:var(--Romre)}.subtitle{--krbDH:0.5rem}.subtitle{--fzRJX:calc(var(--ZKjAc) + var(--PYC8M))}html{min-width:var(--Towen)}.title{--KZ4wd:calc(var(--fnmLw) * var(--fnmLw) + var(--ujuLg))}.title{--Hrjho:0.5}html{--RJAta:1rem}.title{--Roenr:0.05}body{--e9Edw:10}html{--Ai4rk:1px}.title{--fnmLw:2}html{--kjerwe:3}body{--QQhHT:calc((var(--ZYgGk) + 0.03) * 10)}.subtitle{--ZKjAc:0.01}.section{--ZKjAc:calc(var(--ZkBGU) * var(--VDrYz))}html{--BxGcU:calc(var(--sFiuw) + var(--Ai4rk))}html{--esR9X:calc(var(--BxGcU) + var(--Gak2h))}body{--ZKjAc:0.01}.subtitle{--PYC8M:0.11}body{--PaC8M:2}.subtitle{--yiKth:1.11}.container{margin-bottom:var(--Romre)}.section{--bhfSC:60px}.section{--Romev:calc(var(--PCZKQ) + var(--PCZKQ) + var(--RJAta))}.title:not(:last-child){margin-bottom:calc(var(--RJAta) + var(--PCZKQ))}html{font-size:calc(var(--yEkfa))}.container{margin-left:auto}body{--ZKj5c:calc(var(--e9Edw) * var(--PaC8M))}.section{--sVjpe:calc(var(--bhfSC) + var(--pbaKm))}

こうなります！もはや読むものなのかすらわからなくなりました！一種の芸術作品ですね！！
読み手に与えるダメージはネクロノミコンに匹敵するといっても過言ではないでしょう！(？)

.\0074\0069\0074\006c\0065:\006e\006f\0074(:\006c\0061\0073\0074\002d\0063\0068\0069\006c\0064){\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}.\0073\0075\0062\0074\0069\0074\006c\0065{\006c\0069\006e\0065\002d\0068\0065\0069\0067\0068\0074:\0076\0061\0072(\002d\002d\0065\0039\0045\0064\0077)}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\0065\0039\0045\0064\0077:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0079\0069\004b\0074\0068) + \0076\0061\0072(\002d\002d\0066\007a\0052\004a\0058) + 2*\0076\0061\0072(\002d\002d\005a\004b\006a\0041\0063))}\0062\006f\0064\0079{\002d\002d\0079\0069\0035\0074\0068:100}.\0074\0069\0074\006c\0065+.\0073\0075\0062\0074\0069\0074\006c\0065{\006d\0061\0072\0067\0069\006e\002d\0074\006f\0070:\0063\0061\006c\0063(\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051) - \0076\0061\0072(\002d\002d\004a\006f\0033\0066\0065))*-1)}.\0073\0075\0062\0074\0069\0074\006c\0065{\0066\006f\006e\0074\002d\0077\0065\0069\0067\0068\0074:\0076\0061\0072(\002d\002d\0077\0069\0072\0077\0064)}\0068\0074\006d\006c{\002d\002d\007a\006e\0041\007a\0059:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0053\0075\0078\0069\0048)*\0076\0061\0072(\002d\002d\0055\0077\0041\0045\006e))}.\0074\0069\0074\006c\0065{\0066\006f\006e\0074\002d\0077\0065\0069\0067\0068\0074:\0076\0061\0072(\002d\002d\004a\004c\006a\0055\0036)}.\0074\0069\0074\006c\0065{\0066\006f\006e\0074\002d\0073\0069\007a\0065:\0076\0061\0072(\002d\002d\0052\006f\006d\0065\0076)}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0070\0062\0061\004b\006d:450px}.\0073\0075\0062\0074\0069\0074\006c\0065{\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\0066\006c\0065\0078\002d\0067\0072\006f\0077:\0076\0061\0072(\002d\002d\0075\006a\0075\004c\0067)}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\0066\0050\004a\0062\0070:2}.\0074\0069\0074\006c\0065{\0063\006f\006c\006f\0072:#\0033\0036\0033\0036\0033\0036}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\004a\006f\0033\0066\0065:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\006b\0072\0062\0044\0048)/\0076\0061\0072(\002d\002d\0066\0050\004a\0062\0070))}\0068\0074\006d\006c{\0062\0061\0063\006b\0067\0072\006f\0075\006e\0064\002d\0063\006f\006c\006f\0072:#\0066\0039\0039}.\0073\0075\0062\0074\0069\0074\006c\0065{\0063\006f\006c\006f\0072:#\0034\0061\0034\0061\0034\0061}.\0073\0065\0063\0074\0069\006f\006e{\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\005a\006b\0042\0047\0055:2}.\0073\0065\0063\0074\0069\006f\006e{\0070\0061\0064\0064\0069\006e\0067\002d\0062\006f\0074\0074\006f\006d:\0076\0061\0072(\002d\002d\005a\004b\006a\0041\0063)}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\0070\006f\0073\0069\0074\0069\006f\006e:\0072\0065\006c\0061\0074\0069\0076\0065}.\0074\0069\0074\006c\0065{\006c\0069\006e\0065\002d\0068\0065\0069\0067\0068\0074:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0079\006a\0077\006e\0072) + \0076\0061\0072(\002d\002d\0079\0069\004b\0074\0068))}\0062\006f\0064\0079{\0066\006f\006e\0074\002d\0073\0069\007a\0065:\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061)}\0068\0074\006d\006c{\002d\002d\0073\0046\0069\0075\0077:2px}\0062\006f\0064\0079{\002d\002d\0045\0059\004e\0061\0062:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\005a\004b\006a\0035\0063)*\0076\0061\0072(\002d\002d\0050\0061\0043\0038\004d))}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0056\0044\0072\0059\007a:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051))}\0068\0074\006d\006c{\002d\002d\0045\006f\0065\0073\0067:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0055\0077\0041\0045\006e) + \0076\0061\0072(\002d\002d\0055\0077\0041\0045\006e))}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0051\0054\004e\0072\0050:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0073\0056\006a\0070\0065) + \0076\0061\0072(\002d\002d\0070\0062\0061\004b\006d))}\0062\006f\0064\0079{\002d\002d\005a\0059\0067\0047\006b:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\005a\004b\006a\0041\0063) + \0076\0061\0072(\002d\002d\0050\0059\0043\0038\004d))}\0068\0074\006d\006c{\002d\002d\0054\006f\0077\0065\006e:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\007a\006e\0041\007a\0059)*\0076\0061\0072(\002d\002d\004e\0065\005a\0047\0073)/\0076\0061\0072(\002d\002d\0045\006f\0065\0073\0067))}\0062\006f\0064\0079{\002d\002d\0050\0043\005a\004b\0051:.5rem}\0062\006f\0064\0079{\002d\002d\0077\0069\0072\0077\0064:\0063\0061\006c\0063((\0076\0061\0072(\002d\002d\0079\0069\0035\0074\0068) + \0076\0061\0072(\002d\002d\0047\0061\006b\0032\0068))*\0076\0061\0072(\002d\002d\0045\0059\004e\0061\0062)/\0076\0061\0072(\002d\002d\0065\0039\0045\0064\0077))}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\006d\0061\0078\002d\0077\0069\0064\0074\0068:\0076\0061\0072(\002d\002d\0051\0054\004e\0072\0050)}\0068\0074\006d\006c{\002d\002d\0053\0075\0078\0069\0048:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\006b\006a\0065\0072\0077\0065)*\0076\0061\0072(\002d\002d\0073\0046\0069\0075\0077))}\0062\006f\0064\0079{\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0052\004a\0041\0074\0061:1rem}.\0073\0065\0063\0074\0069\006f\006e{\0070\0061\0064\0064\0069\006e\0067\002d\006c\0065\0066\0074:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051))}\0068\0074\006d\006c{\002d\002d\0052\006f\006d\0072\0065:\0076\0061\0072(\002d\002d\0047\0061\006b\0032\0068)}\0062\006f\0064\0079{\0063\006f\006c\006f\0072:#\0034\0061\0034\0061\0034\0061}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\006d\0061\0072\0067\0069\006e\002d\0072\0069\0067\0068\0074:\0061\0075\0074\006f}\0068\0074\006d\006c{\002d\002d\004e\0065\005a\0047\0073:100}\0062\006f\0064\0079{\0066\006f\006e\0074\002d\0077\0065\0069\0067\0068\0074:\0076\0061\0072(\002d\002d\0077\0069\0072\0077\0064)}\0068\0074\006d\006c{\002d\002d\0047\0061\006b\0032\0068:0}\0068\0074\006d\006c{\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}.\0074\0069\0074\006c\0065{\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}\0068\0074\006d\006c{\002d\002d\0075\006a\0075\004c\0067:1}\0068\0074\006d\006c{\002d\002d\004a\004e\0055\0054\0052:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0042\0078\0047\0063\0055)*\0076\0061\0072(\002d\002d\0073\0046\0069\0075\0077)*\0076\0061\0072(\002d\002d\0065\0073\0052\0039\0058))}.\0073\0075\0062\0074\0069\0074\006c\0065{\0077\006f\0072\0064\002d\0062\0072\0065\0061\006b:\0062\0072\0065\0061\006b\002d\0077\006f\0072\0064}.\0074\0069\0074\006c\0065{\0077\006f\0072\0064\002d\0062\0072\0065\0061\006b:\0062\0072\0065\0061\006b\002d\0077\006f\0072\0064}\0068\0074\006d\006c{\002d\002d\0079\0045\006b\0066\0061:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\004a\004e\0055\0054\0052) - \0076\0061\0072(\002d\002d\0073\0046\0069\0075\0077))}.\0074\0069\0074\006c\0065{\002d\002d\0079\006a\0077\006e\0072:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0048\0072\006a\0068\006f)*\0076\0061\0072(\002d\002d\0052\006f\0065\006e\0072))}.\0073\0065\0063\0074\0069\006f\006e{\0070\0061\0064\0064\0069\006e\0067\002d\0072\0069\0067\0068\0074:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051))}\0062\006f\0064\0079{\002d\002d\0079\0069\004b\0074\0068:1.1}.\0074\0069\0074\006c\0065{\002d\002d\006b\006b\0057\0063\0063:60}.\0074\0069\0074\006c\0065{\002d\002d\004a\004c\006a\0055\0036:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0066\006e\006d\004c\0077)*\0076\0061\0072(\002d\002d\006b\006b\0057\0063\0063)*\0076\0061\0072(\002d\002d\004b\005a\0034\0077\0064))}\0062\006f\0064\0079{\006c\0069\006e\0065\002d\0068\0065\0069\0067\0068\0074:\0076\0061\0072(\002d\002d\0051\0051\0068\0048\0054)}\0068\0074\006d\006c{\002d\002d\0055\0077\0041\0045\006e:5}\0062\006f\0064\0079{\002d\002d\0050\0059\0043\0038\004d:.11}.\0073\0075\0062\0074\0069\0074\006c\0065{\0066\006f\006e\0074\002d\0073\0069\007a\0065:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051) - \0076\0061\0072(\002d\002d\004a\006f\0033\0066\0065))}.\0073\0065\0063\0074\0069\006f\006e{\0070\0061\0064\0064\0069\006e\0067\002d\0074\006f\0070:\0076\0061\0072(\002d\002d\005a\004b\006a\0041\0063)}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\006d\0061\0072\0067\0069\006e\002d\0074\006f\0070:\0076\0061\0072(\002d\002d\0052\006f\006d\0072\0065)}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\006b\0072\0062\0044\0048:.5rem}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\0066\007a\0052\004a\0058:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\005a\004b\006a\0041\0063) + \0076\0061\0072(\002d\002d\0050\0059\0043\0038\004d))}\0068\0074\006d\006c{\006d\0069\006e\002d\0077\0069\0064\0074\0068:\0076\0061\0072(\002d\002d\0054\006f\0077\0065\006e)}.\0074\0069\0074\006c\0065{\002d\002d\004b\005a\0034\0077\0064:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0066\006e\006d\004c\0077)*\0076\0061\0072(\002d\002d\0066\006e\006d\004c\0077) + \0076\0061\0072(\002d\002d\0075\006a\0075\004c\0067))}.\0074\0069\0074\006c\0065{\002d\002d\0048\0072\006a\0068\006f:.5}\0068\0074\006d\006c{\002d\002d\0052\004a\0041\0074\0061:1rem}.\0074\0069\0074\006c\0065{\002d\002d\0052\006f\0065\006e\0072:.05}\0062\006f\0064\0079{\002d\002d\0065\0039\0045\0064\0077:10}\0068\0074\006d\006c{\002d\002d\0041\0069\0034\0072\006b:1px}.\0074\0069\0074\006c\0065{\002d\002d\0066\006e\006d\004c\0077:2}\0068\0074\006d\006c{\002d\002d\006b\006a\0065\0072\0077\0065:3}\0062\006f\0064\0079{\002d\002d\0051\0051\0068\0048\0054:\0063\0061\006c\0063((\0076\0061\0072(\002d\002d\005a\0059\0067\0047\006b) + .03)*10)}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\005a\004b\006a\0041\0063:.01}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\005a\004b\006a\0041\0063:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\005a\006b\0042\0047\0055)*\0076\0061\0072(\002d\002d\0056\0044\0072\0059\007a))}\0068\0074\006d\006c{\002d\002d\0042\0078\0047\0063\0055:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0073\0046\0069\0075\0077) + \0076\0061\0072(\002d\002d\0041\0069\0034\0072\006b))}\0068\0074\006d\006c{\002d\002d\0065\0073\0052\0039\0058:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0042\0078\0047\0063\0055) + \0076\0061\0072(\002d\002d\0047\0061\006b\0032\0068))}\0062\006f\0064\0079{\002d\002d\005a\004b\006a\0041\0063:.01}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\0050\0059\0043\0038\004d:.11}\0062\006f\0064\0079{\002d\002d\0050\0061\0043\0038\004d:2}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\0079\0069\004b\0074\0068:1.11}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\006d\0061\0072\0067\0069\006e\002d\0062\006f\0074\0074\006f\006d:\0076\0061\0072(\002d\002d\0052\006f\006d\0072\0065)}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0062\0068\0066\0053\0043:60px}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0052\006f\006d\0065\0076:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051) + \0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061))}.\0074\0069\0074\006c\0065:\006e\006f\0074(:\006c\0061\0073\0074\002d\0063\0068\0069\006c\0064){\006d\0061\0072\0067\0069\006e\002d\0062\006f\0074\0074\006f\006d:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051))}\0068\0074\006d\006c{\0066\006f\006e\0074\002d\0073\0069\007a\0065:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0079\0045\006b\0066\0061))}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\006d\0061\0072\0067\0069\006e\002d\006c\0065\0066\0074:\0061\0075\0074\006f}\0062\006f\0064\0079{\002d\002d\005a\004b\006a\0035\0063:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0065\0039\0045\0064\0077)*\0076\0061\0072(\002d\002d\0050\0061\0043\0038\004d))}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0073\0056\006a\0070\0065:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0062\0068\0066\0053\0043) + \0076\0061\0072(\002d\002d\0070\0062\0061\004b\006d))}

まとめ

いかがでしたか！？(これが言いたかった)

「世の中にはこんなコードがあるかも」と思うと、怖くて夜もグッスリ眠れませんね！
皆さんはこのようなコードを見たことがありますか？見たことがあるという方は、コメント欄で教えてください！

「なるほどー」「面白かった！」と思った方はぜひ、高評価やチャンネル登録をお願いします。

それでは本日もご視聴、ありがとうございました！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-04T13:29:24+09:00

Fractal + CircleCI + Slackで効率よくスタイルガイドを構築する

TL;DR

  • スタイルガイドを構築するにあたりFractalを採用した経緯と導入方法について
  • CircleCIの設定について
  • 外部からのリソースを自分のプロジェクト内に格納するためにgit pre-commitを使った
  • CircleCIの結果をSlackに通知するようにした

なぜスタイルガイドを作ったか

  • 共通のパーツとパターンを使用したページを多く作成する必要があったため、認識共有のために導入した
  • コードを綺麗に保ちたかった
  • 追加修正や運用に耐えうる何かがほしかった

メリット

  • 認識を共有できるため、複数人での制作がスムーズになる。
  • cssが得意でなくてもそれなりにページを制作できる。
  • コードが綺麗に保たれる

デメリット

  • スタイルガイド分の工数がかかる
  • 仕様変更で条件が複雑になるにつれてつらくなる。

Fractalとは

デモページ

  • スタイルガイドを自動で生成してくれるスタイルガイドジェネレーター
  • デフォルトではテンプレートエンジンのHandlebarsで記述する（設定すれば他のテンプレートエンジンなども使える）
  • コンポーネントとドキュメントでディレクトリが分かれている。

導入例

都市が導入していたりするようで、以下の例だと結構モダンな手法を取り入れている。

City of Boston
Web Componentsのコンポーネントもある。

City of Ghent
Atomic Designを採用している。

参考

frctl/awesome-fractal#Showcase

なぜFractalを採用したか

  • 公式ドキュメントがわりとわかりやすかった。
  • ReactやVueのようなフレームワークであればStorybook等の選択肢があるが、マークアップによるページの作成であったためFractalでスタイルガイドを構築した。
  • 本番サイトやビルドツールと楽に連携できそうだった
  • UIが良いので使いやすくわかりやすい。
  • 導入が比較的簡単。
  • 構造やファイル構成がわかりやすい。

実際に導入する

セットアップ

# グローバルにインストール
$ npm i -g @frctl/fractal
# プロジェクトを作る
$ npm init -y
# プロジェクにインストール
$ npm install --save @frctl/fractal

設定

fractal.js
'use strict'

const fractal = module.exports = require('@frctl/fractal').create()

const mandelbrot = require('@frctl/mandelbrot');

// skinの設定
const myCustomisedTheme = mandelbrot({
    skin: "navy"
});

fractal.web.theme(myCustomisedTheme);

// タイトル
fractal.set('project.title', 'Component Library')

// コンポーディレクトリ
fractal.components.set('path', __dirname + '/components')
// ドキュメントディレクトリ
fractal.docs.set('path', __dirname + '/docs')

// 開発サーバー
fractal.web.set('server.sync', true)
fractal.web.set('server.syncOptions', { open: true })

// 書き出し先ディレクトリ
fractal.web.set('builder.dest', __dirname + '/dist')

// 静的ファイル読み込み
fractal.web.set('static.path', __dirname + '/assets')

ディレクトリ構成

設定ファイルで設定したディレクトリ構成は以下のようになる。

├── assets
│   └── css
├── components
├── dist
├── docs
│   └── index.md
├── fractal.js
└── package.json

使い方

# 開発サーバーが立ち上げる
$ fractal start --sync
# 静的ファイルとして書き出し
$ fractal build

コンポーネントの追加方法

fractal.jsで設定したcomponentsの中に追加する。

例：
components/button/button.hbs

外部プロジェクトのcssをassetに追加する

ガイドの元となるcssが別プロジェクトのディレクトリにある場合、そのプロジェクトのディレクトリをfractal.jsで設定して読み込むか、ガイドプロジェクト内にファイルを追加する必要がある。
また、注意点として、静的ファイル読み込みディレクトリ直下にindex.htmlが存在するとそちらが反映されスタイルガイドの画面が出てこなくなる。
今回の場合、CIを回すためGitのPre-commit Hookでスタイルガイドプロジェクト内に元となるcssを生成することにした。

$ node-sass --include-path scss [元のscss] ./assets/css/style.css --output-style compressed

CIを設定する

config.yaml
version: 2
jobs:
  build:
    docker:
      - image: circleci/node:9.3.0-stretch
    steps:
      - checkout
      - restore_cache:
          keys:
            - npm-{{ checksum "package.json" }}
      - run:
          name: npm install
          command: npm install
      - run:
          name: Build
          command: npm run fractal:build
      - run:
          name: apt-get update
          command: sudo apt-get update
      - run:
          name: Install lftp
          command: sudo apt-get install lftp
      - run:
          name: Deploy
          command: lftp -c "set ftp:ssl-allow no; open -u $FTPUSERNAME,$FTPPASS $FTPHOST; mirror -R $LOCALPATH $SERVERPATH --parallel=10"
      - save_cache:
          paths:
            - node_modules
          key: npm-{{ checksum "package.json" }}

workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build

基本的にnodeのイメージを持ってきて、ビルドさせてデプロイするだけ。

環境変数

ftpでアップしなければいけない制限があったためlftpで同期するために以下の環境変数をCircleCI上で設定する。

  • FTPUSERNAME(ftpのユーザーネーム)
  • FTPPASS(ftpのパスワード)
  • FTPHOST(ftpのホスト名)
  • LOCALPATH(ローカルのアップ対象のパス)
  • SERVERPATH(サーバー上のアップ先のパス)

Git

外部プロジェクトのcssをassetに追加する

今回の場合、CIを回すため、スタイルガイドプロジェクト内に元となるcssを生成することにした。

これを行うためにGitのPre-commit Hookを使用した。

git pre-commitとは

コミット前に特定の処理を実行できるもの。
今回は常に最新版のcssが反映されるようにコミット前にscssのコンパイルの処理を走らせた。

git/hooks内にpre-commitというファイルを作成する。
その中にシェルスクリプトを記述する。他のスクリプトでも可能。

#!/bin/sh

node-sass --include-path scss [元のscss] ./assets/css/style.css --output-style compressed
sleep 5
git add assets/css/style.css

これでコミット前に外部プロジェクトのscssをコンパイルし、スタイルガイドプロジェクトの静的ファイルディレクトリに格納してステージングに上げるという処理が完了する。その後、pushすればCIがまわる。

Slackに通知する

Slackの設定

https://my.slack.com/apps/A0F7VRE7N-circle-ci

ここからインストールする。

1d009ec2be50a854df2feb5877f57c4b.png
ここから設定を追加をクリック。

79d0b483626774667936ed3b9998ef04.png

通知したいチャンネルを選択肢、CircleCIインテグレーションの追加をクリックする。
webhook.png

CircleCIの設定

通知したプロジェクトの設定画面からChat Notificationsを開く。
chat_notice.png

SlackのWebhook URLのところに控えておいたURLを貼り付けてSaveで完了。
gitにpushして通知がくればOK。

おまけ

GitHubにCircleCIのバッジをつける

スクリーンショット 2019-05-10 18.06.03.png
↑これ。

通知したプロジェクトの設定画面からStatus Badgesを開きEmbed CodeからMarkdown用のコードをREADME.mdに追加する。
Badge.png

プライベートリポジトリの場合

Branchから任意のものを選択し、API Tokenのadd one with status scope.からTokenを取得する。
api_token.png

まとめ

  • だいぶ見通しがよくなった。特に複数人で作業する場合。
  • 認識を共有できる
  • 修正に強くなった。cssがごちゃつかなくなった。

参考

Fractal User Guide
Fractal デザインスタイルガイド 導入
githubでREADME.mdにCircleCIのバッジを表示する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-04T00:52:17+09:00

商品投稿するときのファイル送信フォームをアイコンにする方法

実行環境

  • html(今回、slimで書いています）
  • scss

行いたいこと

このUIから...
スクリーンショット 2019-07-04 00.23.56.png

こっちのUIみたいに装飾をして使いやすくしたい。
(グレーのところどこ押しても反応する）
スクリーンショット 2019-07-04 00.22.07.png

実際にしたこと

example.html.slim
.service_page_r_form_image
  = f.label :image
     i.far.fa-file-image
  = f.file_field :image
  small 写真を１枚アップロードしてください。

html（slim)ではlabelとinput(file_field)を記述しています。

example.scss
&_image{
    height: 300px;
    label{
         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
         height: 300px;
         width: 100%;
         background-color: #D3D3D3;
         cursor: pointer;

        input{
            display: none;
        }
      }
    }

すごく長々と書いていますが、やるべきことはinput(file_field)をdisplay: none;して隠すことです。
隠しても、labelと紐づいているので、labelの部分を押せばinputの挙動が発動します。
あとはlabelの部分を自分の好みのように記述していけば、完成します。

まとめ

今回は、ファイル送信フォームの見た目の部分を装飾して改善をしました。
まだまだプレニュー表示など改善点はございますが、一旦はこれで以上になります。では。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧