Shopifyのカートにお届け指定日の項目を追加する方法


こんにちは櫻井です。
今日は商品ページで商品一つずつにお届け指定日を選択してもらうのではなく、カートページで全商品をまとめてお届け日を選択してもらう方法を説明したいと思います。

cart-template.liquid

まずはカートページから編集していきましょう。
Sectionsフォルダからcart-template.liquidを開いてください。
お届け日の選択項目を表示させたい箇所に以下のソースを貼ってください。
この段階ではまだカートページにinput枠が出現するだけです。

<div style="width:300px; clear:both;">
   <p>
     <label for="date">お届け日を指定してください。:</label>
     <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" placeholder="{{ "now" | date: "%s" | plus: 86400 | date: "%Y/%m/%d" }}"/>
   </p>
</div>

上のソースを少し解説します。
inputのnameに入っているattributes[date]とvalueに入っている{{ cart.attributes.date }}は会計後の注文完了メールに値を表示させるためのものです。placeholderの中の{{ “now” | date: “%s” | plus: 86400 | date: “%Y/%m/%d” }}には明日の年月日が入ります。
より細かく知りたい方はこの辺りを読んでもらえればわかるかと思います。英語なので大変ですが。。
https://shopify.dev/docs/themes/liquid/reference/objects/cart
https://shopify.github.io/liquid/filters/date/

theme.liquid

次に出現したinput枠にカレンダーから日付を選択できる機能をつけていきます。 今回はjQuery UIを使います。
Layoutフォルダからtheme.liquidを開いてください。
まずはCSSをhead内に読み込ませます。
以下のソースを書き加えてください。

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}

次にJSを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" defer="defer"></script>
// 日本語に対応しない場合は以下は不要
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js" type="text/javascript" defer="defer"></script>

JSを書き込むときは少し注意してほしいのがデフォルトで読み込まレテいるJSの後に書き込むことです。デフォルトで読み込んでいるものの中にjqueryを読み込ませているものがあるようなのでこれより前でJSを読み込ませるとjQuery UIが動かなくなってしまいます。

JS

必要なJSとCSSは読み込ませることができたので次はJSを記述します。
ファイル名はなんでもいいので新たにJSファイルを作成し
以下のソースを記述してください。

function datePicker() {
  $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
  // ↑このソースは日本語の対応が必要ない場合は不要です。
  $("#date").datepicker({
    minDate: +1,
    maxDate: +2
  });
}
datePicker()

記述したらshopifyでJSを読み込ませます。
テーマのソースの編集画面を開き、Assetsフォルダから「新しいassetを追加する」をクリックして先ほどのソースを書き加えたJSを追加します。
次に再びtheme.liquidを開きJSが読み込まれている箇所の一番下に以下のソースを追加してください。

<script src="{{ '〇〇.js' | asset_url }}" defer="defer"></script>

これでカートページにカレンダー機能付きのお届け指定日の項目を追加できました。
しかしこれだけだとメールにお届け指定日が記載されません。
なので次はメールと注文管理を編集していきます。

チェックアウト

まずは注文管理からです。設定からチェックアウトをクリックしてください。
下にスクロールしていくと「注文処理」のところに「追加スクリプト」という項目があります。そこに以下のソースを追加してください。

{{ attributes.date }}

これで注文管理に日付が表示されます。次はメールです。

メール

メールは設定から通知をクリックし、注文管理の「注文の確認」をクリックしてください。
お届け日を追加したい場所に以下のソースを加えてください。

{{ attributes.date }}

まとめ

今回はお届け指定日の項目をカートページに追加する方法を説明しました。最後のテスト配信でダミーでいいから日付が入ってくれるといいんですがそこまではわかりませんでしたが。。
基本的にメールなら箇所でも{{ attributes.date }}でお客さんが入力した日付が取れるはずなので他のメールで使いたい方は試してみてください。

便利そうで使いづらい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って何?っていう根本的なところからお話ししました。どういうものなのか、何ができるものなのかがわかっていただけていたら幸いです。

letとconstについて


こんにちは。櫻井です。
変数の定義に今まではvarのみを使っていたのですが。スコープについて調べていく過程でie11でも使えることがわかったのでこれを気に積極的に使っていこうと思い、今回はletとconstについて詳しく調べていこうと思います。

let

letは宣言されたスコープに限定した変数を宣言できます。
この辺りはvarと似たような感じです。
宣言したスコープの中に別のスコープがありその中でまた同じ宣言をした場合です。
varの場合は

  
    (function () {
      var x = 1;
      {
        var x = 2;
        console.log('x1:' + x);
        // x1:2 が出力される
      }
      console.log('x2:' + x);
      // x2:2 が出力される
    })()
  

letの場合は

  
    (function () {
      let x = 1;
      {
        let x = 2;
        console.log('x1:' + x);
        // x1:2 が出力される
      }
      console.log('x2:' + x);
      // x2:1 が出力される
    })()
  

値の出力のされ方が少し異なりますよね。varの場合は宣言されたスコープの中の別のスコープで再度宣言された場合は元から宣言されていたものが上書きされますが、letの場合は宣言されたスコープの中の別のスコープで再度宣言された場合は同じ変数名でも別の変数として扱われるみたいです。
ということはfor文の中にfor文を入れた場合にiをどちらでも定義できそうです。
ちょっとやってみましょう。

  
    (function () {
      var target = document.getElementById('js-txt');
      for(let i = 0; i < 3;  i++) {
        target.innerText += `x1:${i}\n`;
        for(let i = 0; i < 3;  i++) {
          target.innerText += `x2:${i}\n`;
        }
      }
    })()
  

実行すると

  
    x1:0
    x2:0
    x2:1
    x2:2
    x1:1
    x2:0
    x2:1
    x2:2
    x1:2
    x2:0
    x2:1
    x2:2
  

両方iでもちゃんと動きました。これなら、初期化式の変数名で悩むこともなくなりそうです。

const

constは一度定義すると値を変更することができず、再定義することもできません。
なので

  
    (function () {
      const x = 1;
      const x = 2; // エラーになる
      var x = 4; // エラーになる
      let x = 5; // エラーになる
      x = 3; // エラーになる
    })()
  

こんな感じでエラーになります。
なんだか使いずらそうに思うかもしれませんが、値が変わると困るものとかを入れておけば勝手に変わる心配はないし良さそうです。

IE11問題

ie11でも使えるということでletとconstについて調べたんですが困ったことにどうもie11だとletの値の取り扱いが違うみたいです。
Can I use で調べてみたところ
let variables are not bound separately to each iteration of for loops
と書かれています。
要するにループ処理を行うと他のブラウザとは違う処理するよってことみたいです。
ループ処理っていうのはfor文とかwhile文とかですね。
一番使いたいところで使えない。。

まとめ

今回はletとconstについて調べていきました。ie11で使えルトは思っていなかったので驚きです。取り扱いが微妙に異なるのが気になるところですが、これを気に少しずつ使い所を増やして行けたらと思います。

決算APIの違いを比較してみた


こんにちは櫻井です。
以前ネットショップ開設サービスの違いを比較してみましたがその時、色々みていくうちにネットショップの流れが色々省略すると商品を登録してお客さんに商品が見えるようにする。次にお客さんがボタンを押して支払いができればネットショップの機能としては充分成り立つことに気づいたんです。
商品の登録機能はwordpressの記事投稿機能のようなものだと思えばなんとなくですが理解できます。
残る支払い機能が問題で、クレジット情報とかを扱わなければならないとなるとセキュリティ面も完璧に構築しなければいけません。これが完璧にできればいいんですがそんな簡単なわけもなく、サーバー側の言語となると一から勉強しなければならず腰が引けます。
どうにかならないかなと探していたときに見つけたのが決算APIでした。
決算APIを使えばセキュリティ面をAPIが担当してくれるます。これならなんとかなりそうだということで、今回は決算APIの違いを比較していこうと思います。

PayPal

https://www.paypal.com/jp/webapps/mpp/home
月間のペイパルによる売上高
30万円以下:3.6 % + 40 円 / 件
30万円超 100万円以下:3.4 % + 40 円 / 件
100万円超 1,000万円以下:3.2 % + 40 円 / 件
1,000万円超:2.9 % + 40 円 / 件

PayPalは決済手数料の仕組みが少し複雑です。売り上げが増えれば増えるほど手数料が下がるのはいいんですが一見ごとに40円は高いように感じます。
またPayPalは決済時にPayPalのページに一度飛ぶ必要があるみたいです。

Stripe

https://stripe.com/jp
手数料:3.6%

Stripeは一律で3.6%です。PayPalに比べると安いですね。デベロッパー・ファーストを謳っているのは開発者側としてはありがたいですね。ただ、返金時に決済手数料が一切戻ってこないみたいです。

PAY.JP

https://pay.jp/
ベーシックプラン
月額費用:0¥
visa / master:3.0%
jcb / american express / dinersclub /discover:3.6%

プロプラン
月額費用:10,000¥
visa / master:2.59%
cb / american express / dinersclub /discover:3.3%

PAY.JPはプランやクレジットカードの種類によって金額が変わってきます。APIのドキュメントが日本語で書かれているのでとっつきやすいのがいいですね。

Square

https://squareup.com/jp/ja
3.6%(Visa/MasterCard/American Expressのみ)

Squareは実店舗向けのクレジットの差込の機械も取り扱ってるみたいです。ただ、JCBがないんですよね。。個人的に楽天カードを主に使っているのでJCBがないのは困ります。JCBってシェア率低いんですかね?

まとめ

今回は決算APIを比較してみました。
個人的には色々調べている感じだとStripeの記事がやたらと多かったのでStripeかドキュメントが日本語のPAY.JPで初めての決算APIは扱ってみたいです。Squareはクレジットの差込の機械も取り扱ってるのでお客さんからしたらまとめて契約できるからいい気もします。

KNAPのGit講座(2) コミットとプッシュ


第二回はコミットとプッシュについて説明します。
これはクローンしたあとファイルを追加したり、クローンしたファイルに変更した後にする必要のあることです。

コミットとは

コミットとは、ファイルを追加したり、変更したりした記録を一つのグループにしてリポジトリに登録(バージョン管理)しておくことです。コミットされた変更内容そのもののことも指します。
要するに「このファイルを追加して、あのファイルはここを変更したよ」っていうメモをとっておいてくれる便利な機能です。

プッシュとは

プッシュとは、ローカルリポジトリに登録されたコミットをリモートリポジトリにも反映させてあげることです。

コミットとプッシュの仕方

1. まずはファイルを追加したり、変更したら左上にあるコミットをクリックします。
2. コミットしたいファイルにチェックを付けます。
3. 何を追加したのか何を変更したのかがわかるようにコメントを入力します。(このテキストをコミットメッセージといいます。)※このコメントをちゃんと書かないと後々「あの頃のデータに戻したい」となったときに探すのが大変になります。
4. コミットした後すぐにプッシュしていい場合はコメント入力欄の下にある「コミットをただちに〇〇にプッシュする」にチェックを入れてください。※プッシュ後だとコミットメッセージが修正できなかったりするの気をつけてください。
5. 最後に右下にあるコミットをクリックしたらコミットの完了です。
6. 「コミットをただちに〇〇にプッシュする」にチェックを入れていなかった場合は右上のプッシュをクリックして出てきたダイアログの左下にあるOKをクリックすればプッシュ完了です。

コミットを取り消したい時(プッシュしている場合はNG)

コミットした後で「あのファイルをコミットするの忘れてた」ってことがあると思います。
別にそのファイルだけ再度コミットすればいい話しではあるんですが、そのファイルを含めて一つのコミットとしておきたい場合もあるはずです。
そんな時は一度コミットを取り消して再度コミットし直す必要があります。
ではコミットを取り消し方を説明していきます。(プッシュをすでにしてしまっている場合はこの方法は使えないので注意してください。)

1. まずは取り消したいコミットの一つ前のコミットの上で右クリック
2. 「〇〇をこのコミットまで戻す」をクリック
3. モードをsoftにする
4. OKをクリックしたらコミットの取り消しの完了です。

直前のコミットメッセージの修正(プッシュしている場合はNG)

「コミットメッセージに誤字が。。直したい。。」ってことがあると思います。そんな時はコミットしたすぐ後でならなおずことができます。こちらもプッシュしてしまっている場合は使えません。

1. まずはコミットをクリックします。
2. コミットオプションから「直前のコミットを上書き」をクリックします。
3. コミットメッセージを書き換えてコミットを押したら修正完了です。

プッシュを取り消したい時

ここまでの説明で一度プッシュすると修正できないように感じるかと思いますが一応プッシュしていても修正できないことはないです。プッシュしたこと自体をなかったことにすれば言い訳ですから。ただ、リモートリポジトリは自分以外にも作業を行っている人がいることが前提のリポジトリです。もし、プッシュしたデータを他の人がすでに取り込んでいてその後でプッシュしたことがなかったことになってしまった場合、データを取り込んでしまった人は取り込んだはずのデータが消えてしまって訳のわからないことになってしまいます。Gitはそういったことが起こらないようにプッシュを取り消した場合はプッシュを取り消したという履歴が残ります。photoshopのヒストリーでも取り消したりするとその履歴が残りますよね。そんな感じです。
ではやり方を説明していきたいと思います。

1. まずはプッシュを取り消したいコミットの一つ前のコミットの上で右クリック
2. コミット適用前に戻すをクリックします。
3. OKをクリックします。
4. コミットメッセージの前に「revert」というのがついていれば完了です。※この「revert」というのが取り消したという履歴です。

新サービスを作るときのURLはどうするべき?


こんにちは。櫻井です。
新しくサービス、ブランドを作るときサイトのURLはどうするべきなんでしょうか?
新しくルートドメインを作成するのがいいのか、サブドメインを作成するのがいいのか、サブディレクトリを作成するのがいいのか調べてみました。

ルートドメインとは?

ルートドメインというのはそのまんまなんですがrootにあるドメイン、つまり根元にあるドメインのことです。例えば以下のような形のものです。
https://example.com

サブドメインとは?

サブドメインはこれまたそのまんまですが、ルートドメインのサブに当たるドメインのことです。例えば以下のような形のものです。
https://aaa.example.com

サブディレクトリとは?

サブディレクトリはルートドメインの下に作成したディレクトリ、つまりルートドメインの下層のことです。例えば以下のような形のものです。
https://example.com/aaa/

SEOの観点からみて

SEOの観点から見るとルートドメインもサブドメインもサブディレクトリも変わりません。
インターネット上の情報を集めてくれるgoogleのクローラーは全て平等に集めてくれるそうです。
ただ、そうは言っても一度にクローラーが全ての情報を集めて持ち帰ってくれる訳ではないみたいであまりサブディレクトリの場合あまり階層が深いとなかなか集めてくれなかったり、重要度が低いと勝手に判断されてしまったりするそうです。

サブドメインにしようかなと思っている方の中には関連性のある外部リンクを得ることがSEOで有利に働くことを知っていて、ルートドメインにリンクさせて外部リンクを稼ごうと考えている方もいるかもしれませんがサブドメインをリンクさせても内部リンクを同じ扱いになるそうです。
ならルートドメイン新しく作ればいいじゃんって話しなんですが、それぞれメリット・デメリットがあります。

まず、サブドメインを新しく作った場合はルートドメインが得ているSEOの恩恵が引き継がれているかもしれないみたいです。つまり初めからある程度SEOで有利な状態で始められるかもしれないというメリットがあります。デメリットはルートドメインにリンクさせても内部リンクと同じ扱いにしかならないということです。デメリットってほどデメリットではないかもしれませんが。

ルートドメインを新しく作った場合は全く新しいドメインからのスタートになるのでSEOでも0からのスタートになります。つまり検索結果の上位に上げるのが大変なんです。メリットは外部リンクを付けられることくらいです。

結局どのURLがいいのか

結局どれがいいのかというと新しく作るサービス、ブランドの内容次第で変わってくるという答えになります。
googleはコンテンツの関連性を重視しています。
なので、ルートドメインと同じテーマ、コンセプトのことだったらサブディレクトリに。
ルートドメインとテーマは一緒だけどコンセプトは違うことだったらサブドメインに。
ルートドメインとテーマもコンセプトも違うことだったら新しいルートドメインに。
といった感じで分けるのが良いでしょう。

ネットショップ開設サービスの違いを比較してみた


こんにちは。櫻井です。
新型コロナの影響もあり昨今当たり前になりつつあるネットショップ。
今回はそんなネットショップ開設サービスにどんな違いがあるのか
BASE
Shopify
カラーミーショップ
STORES
の4つをみていきたいと思います。

BASE

https://thebase.in/

BASEかんたん決済手数料:3.6%+40円
サービス利用料:3%
振込手数料250円

CMでよくみるBASEは開設にかかる費用が無料です。
その代わり手数料が他に比べて高いです。
ネットショップの開設にはあまり予算を使いたくない方には良さそうです。

Shopify

https://www.shopify.jp/

ベーシック
$29月毎
日本のオンラインクレジットカード料金:3.4%
海外/AMEXのオンラインクレジットカード手数料:3.9%
Shopify ペイメントを有効にせず他の決済サービスを使用する場合の追加料金:2.0%

スタンダード
$79月毎
日本のオンラインクレジットカード料金:3.3%
海外/AMEXのオンラインクレジットカード手数料:3.85%
Shopify ペイメントを有効にせず他の決済サービスを使用する場合の追加料金:1.0%

プレミアム
$299月毎
日本のオンラインクレジットカード料金:3.25%
海外/AMEXのオンラインクレジットカード手数料:3.8%
Shopify ペイメントを有効にせず他の決済サービスを使用する場合の追加料金:0.5%

月額費用が円ではなくドルでかかるので毎月の時価によって金額が左右されそうですね。
デザインのテンプレート数に関しては今回紹介するもの中でもっとも充実してます。
見た目に拘りたい方に良さそうです。

カラーミーショップ

https://shop-pro.jp/

初期費用:3000円

エコノミー
月額費用:834円~
テンプレート:500円/月
FTPアップロード:500円/月

レギュラー
月額費用:3,000円

ラージ
月額費用:7,223円

決済手段・手数料
クレジットカード4.0%~
後払い4.0%~
コンビニ払い130円~
代引き決済280円~
AmazonPay月額2,000円 + 4%
楽天ペイ オンライン決済月額2,000円 + 5%

カラーミーショップは今回紹介する中で唯一初期費用がかかります。
ただ機能が充実していて名入れやギフト、会員限定でショップなんてこともできるみたいです。
いろいろなサービスを取り入れながらネットショップを開設したい方に良さそうです。

STORES

https://stores.jp/

フリープラン
月額費用:0
手数料:5%

スタンダードプラン
月額費用:1,980円
手数料:3.6%

独自ドメインをstores内で取得しないといけなくて外部に移したり、外部で発行した独自ドメインをstoresに使うことができないことがネックですが、個人が趣味の延長でやるにはちょうど良さそうな気がします。

まとめ

ネットショップと一括りにしてもサービスごとにそれぞれ特徴がありました。
自分がどういったネットショップを開設したいのか。それに合わせたサービス選びが必要ですね。

p5.js でマウスストーカーを作る


こんにちは。櫻井です。
この間マウスストーカーを作る機会があったのでその備忘録を兼ねてちょっと振り返りとこんなやり方もあったんだーっていうのを残したいと思います。

いつも通りに作る

自作した場合、やり方は色々あるとは思いますが基本的に
・マウスの座標を取得する
・マウスの動きに合わせて追従させたいものを動かす
って処理が必要になるはずです。

TweenMaxを使って作ったのがこちらです。

<div class="l-mousestalker">
  <div class="l-mousestalker_item_wrapper">
    <div class="l-mousestalker_item">
      <div class="l-mousestalker_item_img"></div>
      <h2 class="l-mousestalker_item_ttl">見出しが入ります</h2>
      <p class="l-mousestalker_item_txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
      <a href="" class="l-mousestalker_item_btn js-link_btn">リンクボタン</a>
    </div>
    <div class="l-mousestalker_item">
      <div class="l-mousestalker_item_img"></div>
      <h2 class="l-mousestalker_item_ttl">見出しが入ります</h2>
      <p class="l-mousestalker_item_txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
      <a href="" class="l-mousestalker_item_btn js-link_btn">リンクボタン</a>
    </div>
    <div class="l-mousestalker_item">
      <div class="l-mousestalker_item_img"></div>
      <h2 class="l-mousestalker_item_ttl">見出しが入ります</h2>
      <p class="l-mousestalker_item_txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
      <a href="" class="l-mousestalker_item_btn js-link_btn">リンクボタン</a>
    </div>
  </div>
</div>
<svg height="30" width="30" id="cursor" class="l-mousestalker_cursor">
  <circle cx="15" cy="15" r="12" stroke-width="1" stroke="#000" fill="none"></circle>
</svg>
$breakpoint: "screen and (max-width: 48em)";
html {
  font-size: 62.5%;
}
.l-mousestalker {
  padding: 10rem 2rem;
  &_item {
    width: calc(100% / 3 - 3rem);
    @media #{$breakpoint}{
      width: 100%;
      margin-bottom: 4rem;
    }
    &_wrapper {
      display: flex;
      justify-content: space-around;
      @media #{$breakpoint}{
        display: block;
      }
    }
    &_img {
      width: 100%;
      height: 25rem;
      background: #afafaf;
    }
    &_ttl {
      font-size: 2.4rem;
    }
    &_txt {
      line-height: 2;
      font-size: 1.6rem;
    }
    &_btn {
      display: block;
      height: 6rem;
      border: 1px solid #000;
      margin: 0 auto;
      line-height: 5.8rem;
      text-align: center;
      color: #000;
      font-size: 2rem;
      text-decoration: none;
    }
  }
  &_cursor {
    position: fixed;
    display: block;
    border-radius: 0;
    transform-origin: center center;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
  }
}
function mouseStalker() {
  var cursor = document.getElementById('cursor');
  var linkBtn = document.querySelectorAll('.js-link_btn');
  for (var i = 0; i < linkBtn.length; i++) {
      linkBtn[i].addEventListener('mouseenter', onMouseHover);
      linkBtn[i].addEventListener('mouseleave', onMouseHoverOut);
    }
  function onMouseMove(e) {
      TweenMax.to(cursor, 0, {
        x: e.clientX - 15,
        y: e.clientY - 15
      })
    }
  function onMouseHover() {
    TweenMax.to(cursor, .3, {
      scale: 4
    })
  }
  function onMouseHoverOut() {
    TweenMax.to(cursor, .3, {
      scale: 1
    })
  }
  document.addEventListener('mousemove', onMouseMove);
}
mouseStalker();

p5.jsを使って作る

最近少しp5.jsを勉強してるんですけどこの子あらかじめマウスの座標とかウィンドウの幅とか色々取得してくれていてマウスストーカーもっと簡単にできるんじゃない!?っと思ったんで先ほどのマウスストーカーと同じことを今度はp5.jsを使って作ってみます。

<div class="l-mousestalker">
  <div class="l-mousestalker_item_wrapper">
    <div class="l-mousestalker_item">
      <div class="l-mousestalker_item_img"></div>
      <h2 class="l-mousestalker_item_ttl">見出しが入ります</h2>
      <p class="l-mousestalker_item_txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
      <a href="" class="l-mousestalker_item_btn js-link_btn">リンクボタン</a>
    </div>
    <div class="l-mousestalker_item">
      <div class="l-mousestalker_item_img"></div>
      <h2 class="l-mousestalker_item_ttl">見出しが入ります</h2>
      <p class="l-mousestalker_item_txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
      <a href="" class="l-mousestalker_item_btn js-link_btn">リンクボタン</a>
    </div>
    <div class="l-mousestalker_item">
      <div class="l-mousestalker_item_img"></div>
      <h2 class="l-mousestalker_item_ttl">見出しが入ります</h2>
      <p class="l-mousestalker_item_txt">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</p>
      <a href="" class="l-mousestalker_item_btn js-link_btn">リンクボタン</a>
    </div>
  </div>
</div>
$breakpoint: "screen and (max-width: 48em)";
html {
  font-size: 62.5%;
}
.l-mousestalker {
  padding: 10rem 2rem;
  &_item {
    width: calc(100% / 3 - 3rem);
    @media #{$breakpoint}{
      width: 100%;
      margin-bottom: 4rem;
    }
    &_wrapper {
      display: flex;
      justify-content: space-around;
      @media #{$breakpoint}{
        display: block;
      }
    }
    &_img {
      width: 100%;
      height: 25rem;
      background: #afafaf;
    }
    &_ttl {
      font-size: 2.4rem;
    }
    &_txt {
      line-height: 2;
      font-size: 1.6rem;
    }
    &_btn {
      display: block;
      height: 6rem;
      border: 1px solid #000;
      margin: 0 auto;
      line-height: 5.8rem;
      text-align: center;
      color: #000;
      font-size: 2rem;
      text-decoration: none;
    }
  }
  &_cursor {
    position: fixed;
    display: block;
    border-radius: 0;
    transform-origin: center center;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
  }
}
var size;
var ds;
var linkBtn = document.querySelectorAll('.js-link_btn');
var easing = 0.05;
function setup() {
  var cnv = createCanvas(windowWidth, windowHeight);
  cnv.class('l-mousestalker_cursor');
  size = 30;
  ds = 30;
  noFill();
}
function draw() {
  for (var i = 0; i < linkBtn.length; i++) {
    linkBtn[i].addEventListener('mouseenter', function() {
      ds = 120;
    })
    linkBtn[i].addEventListener('mouseleave', function() {
      ds = 30;
    });
  };
  var ts = ds - size;
  size += ts * easing;
  clear();
  ellipse(mouseX, mouseY, size, size);
}

p5.jsを使って作ってみて

実際に作ってる途中で気づいたんですけど、あんまり変わらないしむしろめんどくさくなってる。。 というのもeasingは自作するか追加でTweenMax読み込ませるかしないといけないですし、p5.jsのdraw関数は常に走っているので結構重くなります。
そもそもp5.jsってProcessingをjsで使うために作られたものなんだからこういうことには向かないですよね。

今回p5.jsでマウスストーカーを作ってみて、大した量書いてないように見えますが実は結構苦戦してました。
p5.jsにmouseOverというホバーした時に実行される関数があるんですがそれだとうまくいかなかったりmouseenterとmouseleaveのイベントを始めはsetup関数の方に入れていたんですがうまくいかなかったりしてました。
ただ苦戦した甲斐あってだいぶp5.jsの扱いには慣れたような気がします。
経験大事。

先頭に戻る