canvasに長方形を描く


こんにちは。櫻井です。
今回はcanvasに長方形を描くJSを作ってみました。
canvas内でマウスを押したところを起点にして、マウスを離したところを終点にして長方形を描きます。

See the Pen drew rect in canvas by knap_develp (@knap_develp) on CodePen.

変数の定義

はじめに変数を定義していきます。
cvs はHTMLからcanvasを取得する変数です。
ctx はcanvasに図形などを描画できるようにするための変数です。
長方形を描画するときはcvsでcanvasに直接JSで描くのではなくctxでgetContext(“2d”)を挟んでから描きます。
canvasProps はcanvasの大きさを保管しておくためのオブジェクトです。初期値ではwidth、height共に0にしています。
drawRectPropsは描く長方形の情報を保管しておくためのオブジェクトです。xとyが起点、widthとheightが大きさ、styleが線の色、lineWidthが線の太さです。
初期値ではx、y、width、heightは0。styleは#000。lineWidthは4にしています。

関数の定義

次に関数を定義します。
マウスを押したところを起点に、離したところを終点にするので
addEventListenerでmousedown、mousemove、mouseupの時に発火する関数をそれぞれ用意します。
今回はmousedownの時がgetDrewRectStart、mousemoveの時がgetDrewRectPos、mouseupの時がgetDrewRectEndという名前で関数を発火するようにしました。

ついでにcanvasの初期設定も行います。
まず
canvasPropsのwidthとheightをそれぞれwindow.innerWidthとwindow.innerHeightに変更します。
次に
cvs.width = canvasProps.width;
cvs.height = canvasProps.height;

canvasの大きさをcanvasPropsのwidthとheightにします。
ctxの線の色と太さを設定しておきます。
ctx.strokeStyle = drawRectProps.style;
ctx.lineWidth = drawRectProps.lineWidth;

マウスを押した時と離した時のイベントを設定します。
cvs.addEventListener(‘mousedown’, getDrewRectStart, false);
cvs.addEventListener(‘mouseup’, getDrewRectEnd, false);

マウスを押した時の処理

関数の詳細を詰めていきます。
まずはマウスを押した時の処理から
はじめに
e.preventDefault();
e.stopPropagation();
でデフォルトの処理を破棄させます。
drawRectPropsのxとyを設定します。
xとyの設定にはoffsetXとoffsetYを使います。
pageXとかscreenXとかclientXとか色々ありますが今回はoffsetXです。
こちらの説明がサンプルもあってわかりやすいので参考にしてみてください。
https://qiita.com/yukiB/items/cc533fbbf3bb8372a924

ctx.clearRect(0, 0, canvasProps.width, canvasProps.height);
で押したタイミングでcanvasを一度綺麗にします。

最後にマウス押してる間だけmousemoveイベントを発火させたいので
cvs.addEventListener(‘mousemove’, getDrewRectPos, false);
を入れます。

マウスを動かした時の処理

次にマウスを動かした時の説明をしていきます。
マウスを押した時と同様にデフォルトの処理を破棄します。
次にdrawRectPropsのwidthとheightを設定していきます。
widthはcanvasのoffsetXの位置からdrawRectPropsのxを引いた値
heightはcanvasのoffsetYの位置からdrawRectPropsのyを引いた値
に変更します。
マウスを動かすたびにcanvasを綺麗にしないとcanvasが長方形で塗り潰されちゃうので
ctx.clearRect(0, 0, canvasProps.width, canvasProps.height);
で綺麗にしてから
ctx.strokeRect(drawRectProps.x, drawRectProps.y, drawRectProps.width, drawRectProps.height);
で描画します。

マウスを離した時の処理

最後にマウスを離した時の処理です。
マウスを押した時、動かした時と同様にデフォルトの処理を破棄します。
次に
cvs.removeEventListener(‘mousemove’, getDrewRectPos, false);
マウスを動かした時の処理がそのままなのでイベントの登録を解除して出来上がりです。

まとめ

今回はcanvasに長方形を描くJSを作成しました。
次は書いた長方形を動かせるようにしたいな。

jQueryで簡単なおみくじを作ってみた!


こんにちは。櫻井です。
今回はjqueryでおみくじを作ってみました。
おみくじボタンを押すとモーダルが出現して結果が表示される簡単な内容のものですが、できあがりは以下になります。

See the Pen omikuji by knap_develp (@knap_develp) on CodePen.

内容の説明

js-omikuji_btnをクリックするとまず始めにjs-omikuji_resultを削除します。
js-omikuji_resultは後におみくじの結果を表示するdiv要素です。
これはボタンを複数回クリックしたときに前回の結果が残らないようにするための処理です。

必要な情報を変数に格納していきます。
まずはrandomNumという変数におみくじの結果を決めるランダムな数を格納します。
Math.floor()は小数点以下を切り捨てる関数で、中に入っているMath.random()は0以上1未満のランダムな数を返します。その数字に5を掛けることでrandomNumに格納される数字を0〜4の5つにしています。

resultContentという変数には$(‘<div class=”l-omikuji_result js-omikuji_result”></div>’)という空のdiv要素を格納しています。
randomNumから得た数字をもとにswitchで条件分岐させ、resultという変数に結果を格納していきます。
最後にresultDomにresultの値を入れた結果を格納します。

これで必要な情報は揃ったのであとは表示させるための処理をしていきます。
まずはresultContent.append(resultDom)でここまで空のままだったresultContentに先ほど結果を格納したresultDomを入れます。
次にresultContent.appendTo(‘.js-omikuji_content’);でjs-omikuji_contentにresultContenを挿入します。
最後に$(‘.js-omikuji_modal’).addClass(‘is-active’);でis-activeを付与することで結果が入ったモーダルを表示させます。

これだけだと一度表示したら最後戻すことができなくなってしまうので非表示にするためにjs-omikuji_close_btnをクリックしたらjs-omikuji_modalからis-activeを外す処理を書いてできあがりです。

まとめ

今回は確率の調整は入れませんでしたがrandomNumの値を0~99にしてif文で0~9までは大吉とかってやれば各2つの調整付きの物もできます。
複数分岐させる時、僕は比較式がA === Bの形になる時はswitch文を使うようにしています。A>B とかA!=Bになる時はif文を使います。

VueとjQueryでアコーディオンを作ってみた!


こんにちは。櫻井です。
久々のブログ投稿です。
最近Vueを勉強していて、今回は初めはjQueryでアコーディオンを作ってその後Vueでアコーディオンを作ってみます。

まずはjQuery

See the Pen jQuery Accordion by knap_develp (@knap_develp) on CodePen.

js-accordion内のjs-accordion_btnをクリックしたら同じjs-accordion内のjs-accordion_itemの親要素の高さを取得します。
js-accordion_itemの高さが0の場合はjs-accordion_item_wrapperにjs-accordion_itemの高さを渡します。
js-accordion_itemの高さが0ではない場合はjs-accordion_item_wrapperの高さを0にします。
js-accordion_item_wrapperにはcssでoverflow: hiddenとtransitionを設定してます。

続いてVue

See the Pen Vue Accordion by knap_develp (@knap_develp) on CodePen.

methodsにaccordionBtnという関数を作成してjs-accordion_btnをクリックした時に発火するようにしておきます。
accordionBtnでやっていることはjQueryと同じです。

最後に

jQueryの場合、アコーディオンが1つしかない場合はeachを噛ませないようにしたりしているせいもありますが、Vueは実際のアコーディオンを動作させている部分がjQueryに比べてかなりコンパクトに感じます。
例えば、ちょっとしたところですがjQueryではjs-accordionまで戻る時に$(this).closest(‘.js-accordion’)と記述しないといけないのに対してVueではthis.$elだけで済みます。
ただコンパクトなのはいいんですが現状の僕の技術力だとjQueryの方が汎用性が高く感じました。
jQueryはjs-accordionの中にjs-accordion_btnとjs-accordion_item_wrapperに囲まれたjs-accordion_itemがあればどんな構造になっていても問題ないのに対してVueではtemplateで定めた構造以外にはできないからです。
今後はVueでもjQueryと同程度の汎用性を目指して改良して行けたらと思います。

Shopifyのデフォルトテーマ Debut でカートボタンに現在のカート内の商品の合計数を表示する方法


こんにちは。櫻井です。
ネットショップでお買い物するときに、今いくつ商品カートに入れたっけ?ってなるときありませんか?
スーパーとかで買い物するのとは訳が違ってネットではどれくらい買っているのか目で見てわかりにくいところがあります。
あれもこれもとカートに入れていって気付いたらとんでもない量になっていたなんて経験がある人もいるのではないでしょうか?
なので最低限カートボタンの横に今何品カートに入っているかわかるとユーザーにとって親切だと思うんです。
そこで今回はShopifyでカートボタンにカート内の商品の合計数を表示する方法を説明したいと思います。

まずはliquidを構築

まずはベースとなるliquidを構築します。いろいろ調べると{{ cart.item_count }}でカートないの商品の数を取得できることがわかりました。
以下のソースを商品の合計個数を表示したい場所に書き込んでください。


  <div class="l-header_cart_count"><span class="cart-item-count">{{ cart.item_count }}</span></div>

しかしこれだけだとカートに商品を追加した直後や商品を削除したり下手したときにすぐに反映されません。
なので次はtheme.liquidを開き以下のソースを加えてJSを読み込ませます。


  {{ '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' | script_tag }}
  {{ 'api.jquery.js' | shopify_asset_url | script_tag }}

ここからはJSを書き加えます。liquidの準備はこれで終わりです。

JSを書き加える

まずはカートに商品を追加したとき、カート内の商品の数量を変えたときのJSです。
theme.jsを開き「_setCartCountBubble: function(quantity)」を検索してください。
2箇所あるので両方に


  $('.cart-item-count').text(quantity);

を追加します。これでカートに商品を追加したときとカート内で数量を変更したときにもカート全体の商品の個数を変更することができます。
続いて「_onRemoveItem: function(evt) 」を検索し、中にあるdone()の中に


  $('.cart-item-count').text(state.item_count);

を追加します。これで商品をカートから削除したときにもカートないの個数を反映することができます。

まとめ

今回はShopifyのデフォルトテーマ Debut でカートボタンに現在のカート内の商品の合計数を表示する方法を説明しました。本当はデフォルトで読み込まれているJSをいじりたくなかったんですが。新たにJSを追加して行おうとするとバッティングしてしまいうまくいかず止むを得ずこういった形になりました。しかし商品がしっかりユーザーのアクションに合わせて更新できるなんてShopifyってすごいですね。

jpgやpngより軽いwebPの話し


こんにちは。櫻井です。
今日はjpgやpngよりもずっと軽いwebpについてお話ししようと思います。
まず、webPはGoogleが開発した静止画像フォーマットで、拡張子に.webpとつきます。

webPのいいところ

webPはとにかく軽いんです。ものによってはpngをwebpに変えただけで4分の1くらい軽くなるものもあります。正直いいところっていうとこのくらいなんですが、この軽くなり方がすごいんです。
1.2mbのものが400kbくらいに落ちると思うとすごいと思いませんか?
元々webサイトの読み込みが遅くなる理由に画像の読み込み速度はかなり大きい部分をしめていると思います。
だって全体の読み込ませているファイル量の割合でみると大半が画像なんだもん。。
例えば、KNAPのホームページだとページ下まで全て読み込ませるとトータル5.7mbファイルを読み込んでいます。そのうち画像は1.8mbです。動画が一番大きくて2.5mb。合わせたら4.3mbです。KNAPのホームページはwebpを読み込ませているのでjpgかpngで書き出していたらおそらく画像は3.6mb~7.2mbくらいになると思います。
こうして考えるとかなり読み込む量を減らせているのがわかっていただけると思います。
webPは軽いくらいしか利点が思い浮かびませんが画質もほとんど落とさずにものすごく軽くできるすごい子なんです。

webPのダメなところ

webPは軽いのはいいんですが、ダメなところもあります。webPが悪いというより主にブラウザが悪いんですが。
まずは対応していないブラウザがある点です。ie11とsafariが対応してません。safariは近々対応するみたい?してる?みたいですが。このせいで対応していないブラウザのために面倒な書き方をしなければいけません。これが二つ目です。
webPを使うときは対応してないブラウザのことも考えて以下のような書き方をします。

 
<picture>
  <source srcset="/img/example.webp" type="image/webp">
  <img src="/img/example.png" alt="example">
</picture>

webPを使うためだけにこんな書き足さないといけないのはちょっと億劫ですよね。ただ軽くなる量を考えたらこのぐらい大したことはないんですが。
webPのダメなところは次が最後ですが最後が一番問題でwebPの生成が面倒な点です。
jpgやpngのようにPhotoshopでそのまま書き出せればそれが一番いいんですが、Photoshopでは書き出せません。なので一度jpgやpngで書き出してからSquooshなどのwebPを生成できるツールを使って書き出す必要があります。全部の画像がまとめてできればそれが一番ですがそうもいきません。Gulpを使えばまとめてできますが、みんながみんなGulpを扱える訳でもありません。webPを使って更新や差し替えになると新たにwebPを作る必要がでます。製作者と同じ人が作業するならいいですが別の人がやるとなるとwebPの作り方をわかっている人じゃないとできなくなります。大変です。
ブラウザが対応してないせいで面倒な書き方をしないといけないことと、生成が面倒なところがwebPの欠点です。

まとめ

今回はwebPについてお話ししました。画像にwebPを使うかどうかのポイントは更新の頻度といかにサイトの重さが気になるかだと思います。これはお客さん次第ですね。後は公開まであまり時間がない時も僕はwebPを使うのは避けてます。管理と記述が大変なので。ただやはり画像の重さがあれだけ軽くなるのを知ってしまうと極力使いたくなります。早くsafariがちゃんと対応してie11が消えて無くなってくれればいいんですが。

while文の特徴とfor文との違いを考えてみる


こんにちは。櫻井です。
最近for文について色々記事を書いてますが、wordpress使ってるとfor文よりwhile文をよく見かける気がします。JSだとfor文を多く見かける気がしますがこの違いはなんなのでしょうか?
なのでまずはwhile文について調べていきたいと思います。

while文

while文は

  
    while(条件式) {
      // 処理する内容
    }
  

基本的にこのような感じで書きます。()の中がtrueの間はずっと{}の中の処理をし続けます。
なので処理する内容のところに条件式の値が変わるようなものが必ず必要になります。
ないと永遠にループし続けて大変なことになります。なので例えばこんな感じになります。

  
    var target = document.querySelector('#js-txt');
    var i = 0;
    var dataItem = [{
      "id": 1,
      "name": "りんご"
      }, {
        "id": 2,
        "name": "みかん"
      }, {
        "id": 3,
        "name": "イチゴ"
      }
      ];
    var i = 0;
    while(i < dataItem.length) {
      // 処理する内容
      target.innerText += `${dataItem[i].id}:${dataItem[i].name}\n `;
      i++;
    }
  

この例だとiがdataItemの中の{}の数より小さかったらtargetにテキストを入れ込んでiに1を足してというのを繰り返してます。
なので結果は

  
    1:りんご
    2:みかん
    3:イチゴ
  

こうなります。for文と一緒ですね。

まとめ

正直for文との違いを調べてもあまりほとんど無そうな感じがしています。
色々読んで見ると
何回処理するか決まっているものはfor文、決まっていないものはwhile文っていう感じで書かれているものをいくつか読みましたが何回処理するかなんて変数で決めればfor文でもwhile文でも一緒では?って思ってしまいます。
あえて違いをあげるとしたら条件式のiの値を好きなタイミングで変えられることでしょうか?使い所を聞かれると困ってしまいますが。あとはfor文よりwhile文の方がif文に似ていてとっつきやすそうな感じがします。
ちなみに処理速度だとほとんど変わらないそうですが若干whileの方が早いみたいです。たくさん処理するものはwhileの方がいいのかも知れませんね。

便利そうで使いづらいfor in


こんにちは。櫻井です。
今回は一見するとシンプルで使いやすそうに見えるけど実はちょっと扱いづらいfor in文について説明したいと思います。

for in文

for in文はfor文と同じくループ処理を行うためのもので、以下のような記述の仕方をします。

    
      for(var a in b){
        // なんか処理
      }
    
  

普通にfor文書くよりシンプルになりました。
for文は「iがdataItem.lengthより小さい間は{}の中の処理をして終わったらiに1を足すっていうのを繰り返してね。iがdataItem.lengthと同じかそれ以上になったら終わっていいよ。」って感じのことが書かれてますが、for in文は「bの中の数の文だけ{}の中の処理をしてね」感じのことが書かれてます。aはどこに行った?ってなりますがaには{}のなかの処理がされるごとに異なるものが入ります。
例えば

    
      var target = document.querySelector('#js-txt');
      var dataItem = [{
        "id": 1,
        "name": "りんご"
        }, {
          "id": 2,
          "name": "みかん"
        }, {
          "id": 3,
          "name": "イチゴ"
        }
        ];

      for(var property in dataItem) {
        target.innerText += `${dataItem[property].id}:${dataItem[property].name}\n `
      }
    
  

この場合だと

    
      1:りんご
      2:みかん
      3:イチゴ
    
  

こんな形で表示されます。aはfor文でいう初期化式といつまでループ処理をするかを決める評価式が足されたようなものだと考えるとわかりやすいかも知れません。

for in文の問題点

ここまでの説明だと楽にできていいじゃんって思えますがそうもいかなくて、for in文は処理する順番を元からある配列を上から処理してくれる保証がないみたいなんです。
僕がテストした感じだと一度も順番が狂ったことはなかったのですが絶対ではないとなると順番通りに流し込まなければならないものなどを扱いづらくなります。
なので順番通りにしたいときは結局for文が一番良さそうです。

まとめ

今回は便利だけど使いづらいfor in文について説明しました。
DOMの生成で順番通りにしたいときには使えそうにないですが、純不動でいいものにはすっきりしていていい気がします。
DOMの生成にはfor文を使いますが、wordpressではwhile文を使うケースが多いのでwhileでもできそうですが、どちらの方がいいんでしょうね?今度検証してみます。

GulpのWebページビルドツール


こんにちは。櫻井です。
今回は僕が普段コーディングで使っているWebページビルドツールを紹介したいと思います。GitHubにあげてあるので使ってみてください。
https://github.com/Sakurai-Yuki/myWebPageBuilder

依存環境

node.jsとnpmは必須です。バージョンによっては動かないこともあるので個人的にはnodebrewを使ってnodeのバージョン管理をすることをおすすめします。
僕が普段使っている環境は
・node v8.10.0
・npm v6.13.6
この環境なら動くと思います。

インストール

プロジェクトごとにコーディングファイルの管理場所は違うと思いますのでそのプロジェクトの位置にmyWebPageBuilderを丸ごと移動させてターミナルでその位置まで移動してください。その後以下を入力してEnterを押せば必要なファイルがインストールされます。

  
    npm install
  

設定ファイル

インストールが終わればそのままでも使えますが、プロジェクトによってcssファイルを置く位置やjsファイルを置く位置が変わると思います。
細かい設定は全て
/gulp/config.js
で行います。

使い方

開発ファイルはsrcディレクトリ内に入れてください。まずは設定の仕方から説明していきます。

設定の仕方

ejsを使う場合は ejsFlag を true にしてください(デフォルトは true )。
sassを使う場合は sassFlag を true にしてください(デフォルトは true )。
sassを使う場合でsourcemapを使う場合は ‘sourcemapFlag’ を true にしてください(デフォルトは true )。
画像を圧縮する場合は imgMinFlag を true にしてください(デフォルトは true )。
画像を圧縮する場合でwebpを使う場合は imgWebPFlag を true にしてください(デフォルトは true )。
JSの圧縮を行いたい場合は jsMinFlag をtrue にしてください(デフォルトは false )。
ローカルサーバーを使用する場合は localServerFlag を true にしてください(デフォルトは true )。
ローカルサーバーを使用する場合を使用する場合でSSIを使用する場合は serverMode を SSI にしてください(デフォルトは normal )。
ローカルサーバーを使用する場合を使用する場合でPHPを使用する場合は serverMode を PHP にしてください(デフォルトは normal )。

ejsの使い方

htmlの吐き出し元となる、ejsファイルをhtmlフォルダの中にいれて開発してください。監視中、ejsフォルダのファイルが更新されると、distフォルダに吐出されます。
共通テンプレートは _include に入れてください。_ から始まるejsファイルはhtmlに書き出されません。
各ページのパス情報やmeta情報は _json フォルダ内の meta.json に記載してください。
ejsのみを書き出したい時はターミナルでgulp ejsと打ち込みEnterを押すと書き出されます。
ejsを使わずにhtmlで開発する場合はdist内に直接htmlファイルをおいてください。

scssの使い方

cssの吐き出し元となる、scssファイルを_scssフォルダの中にいれて開発してください。監視中、scssフォルダのファイルが更新されると、distフォルダに吐出されます。
scssのみを書き出したい時はターミナルでgulp sassと打ち込みEnterを押すと書き出されます。
scssを使わずにcssで開発する場合はdist内にcssファイルをおいてください。

jsの使い方

jsファイルを_jsフォルダの中にいれて開発してください。監視中、jsフォルダのファイルが更新されると、distフォルダに吐出されます。
jsのみを書き出したい時はターミナルでgulp jsと打ち込みEnterを押すと書き出されます。
jsの圧縮する処理が不要の場合はdist内にjsファイルをおいてください。

imgの使い方

imgファイルを_imgフォルダの中にいれて開発してください。監視中、imgフォルダのファイルが更新されると、distフォルダに吐出されます。
webpを生成したい場合も同様に_imgフォルダにimgファイルを入れてください。imgの圧縮やwebpを使用しない場合は、dist内にimgファイルをおいてください。

まとめ

今回は僕が普段使いしているWebページビルドツールをご紹介しました。
自作なのでまだまだ不完全なところがあり、まだ使い勝手に改善の余地はありますが、現状でも充分使えるツールになっていると思っているのでよかったら使ってみてください。

Liquidって何?


こんにちは。櫻井です。
Shopifyの環境構築の仕方について調べれば調べるほどShopifyのテーマに使われているLiquidという言語について理解しないと話にならなのがわかってきました。でも、日本語のドキュメントがまじで全然ないんです。しょうがないので自力でGoogle先生とか周りの人に意味を聞きながらどうにか訳しながらある程度理解できたので今日はLiquidって何?ってところから説明していこうと思います。

Shopifyで使われているLiquidって何?

LiquidはShopifyがRUbyで作成したテンプレート言語でGitHubのオープンソースプロジェクトとして公開されています。shopifyテーマの根幹となっていて動的コンテンツの読み込みに使われます。

Liquidって何ができるの?

Liquidはshopifyストアに入力されたデータを入手してWebページに使用することができます。つまりCMSみたいなことができるってことです。(多分。。)

Liquidの構文

LiquidにはPHPなど、他のプログラミング言語と同様に変数のやり取りやif文のようなロジックや制御、データの出力などができる仕組みがあります。Liquidの構文はHTMLとの区別がつきやすいように区切り文字に囲われています。
{{ }}が変数などのデータの出力を表し、{% %}がif文のようなロジックや制御の流れを表します。
Liquidのコードには主に三つの機能があります。
・Objects
・Tags
・Filters
です。順に説明していきます。

Objects

ObjectsはShopify admminからのデータを出力します。記述の仕方は{{ }}で出力したいデータのオブジェクトを囲む形になります。例えば次のように書きます。

  
    {{ product.title }}
  

この例ではproductというオブジェクトのtitleプロパティを出力します。projectオブジェクトのプロパティについて詳しく知りたい場合はLiquid referenceを読んでみてください。
ちなみに、{{ product.title }}というLiquidオブジェクトはShopifyテーマの商品を登録する箇所の商品のタイトルに当たります。なので、コードがコンパイルされ、商品ページに表示される時、{{ product.title }}には商品のタイトルが入ります。product以外にもLiquidで元から用意されているオブジェクトは他にもありますので詳しく知りたい方は<Liquid objectsのページをみてください。

Tags

Tagsはif文などのロジックやコンテンツの制御をするために使います。Tagsは{% %}で囲って表します。{% %}で囲まれたテキストは{{ }}で囲んだ時のように実際のWebページで表示されるたりはしません。
なので、表品が売り切れていた時と商品がある時で異なる内容を表示させることができます。

  
    {% if product.available %}
    <h2>Price: $99.99</h2>
    {% else %}
    <h2 class="sold-out">Sorry, this product is sold out.</h2>
    {% endif %}
  

この例だと、商品がある場合は「Price: $99.99」が表示され、ない場合は「Sorry, this product is sold out.」が表示されます。
tagsは様々なタイプに分かれているので詳しく知りたい場合はこちらをみてください。
Control flow tags
Iteration tags
Theme tags
Variable tags
Deprecated tags

Filters

filtersはオブジェクトや変数の出力の内容を変更するために使います。filtersはオブジェクトと同じく{{ }}を使いますが、filtersはさらに|を使って表します。例えば次のように表します。

  
    {{ 'hello, world!' | capitalize }}
  

capitalizeは単語の一文字目を大文字に変えてくれるfiltersです。なので出力は「Hello, world!」になります。複数のfiltersを使用することもできます。例えば

  
    {{ 'hello, world!' | capitalize | remove: "world" }}
  

removeは:の後に続く文字列を削除してくれるfiltersです。なので出力は「Hello, !」になります。複数のfiltersを使用する場合は左から右に処理がされて行くので注意してください。
filtersは以下の8つのタイプに分類されます。詳しく知りたい場合はこちらをみてください。
Array filters
Color filters
HTML filters
Math filters
Money filters
String filters
URL filters
Additional filters

まとめ

今回はLiquidって何?っていう根本的なところからお話ししました。どういうものなのか、何ができるものなのかがわかっていただけていたら幸いです。

無料写真素材サイトの紹介


こんにちは。櫻井です。
先日ちょっと無料の素材を探してたんですけど僕が知ってるサイトだとあまりこれといった素材が見当たらなくて困っていた時に他のスタッフに教えてもらった無料素材のサイトが僕の知らないサイトばかりだったので今回は無料写真素材サイトを紹介しようと思います。

O-DAN(オーダン)

https://o-dan.net/ja/
O-DANは複数のサイトから無料写真素材をかき集めてきてくれるサイトです。
ライセンスはそれぞれで違うみたいなのでその都度確認が必要ですが商用利用可の無料写真素材のみにチェックを入れて検索すれば実務で利用できるものも見つけやすそうです。複数のサイトに訪れて探す手間が省けるのがいいですね。

ぱくたそ

https://www.pakutaso.com/
ぱくたそは人物の画像が多めのサイトです。
人が写っている素材が欲しい時にはこちらで探してみるのがいいかも知れません。

Foodiesfeed

https://www.foodiesfeed.com/
食べ物写真しか取り扱っていませんがクオリティの高い画像がたくさんあります。

写真AC

https://www.photo-ac.com/ メールアドレスの登録が必要です。

Unsplash

https://unsplash.com/
海外のものですがfreeみたいです。
海外ってだけで素敵に見える。

先頭に戻る