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」というのが取り消したという履歴です。

KNAPのGit講座(1) リモートリポジトリのクローンの仕方


前々から社内で使いたいねーとは言っていたんですがなかなか実際に導入できていなかったGitですがなんで導入できていなかったかというと使い方が難しいっていうのがいちばんの理由だった訳です。
使い方がわからない、難しいっていうなら取説作るしかないじゃないですか。ということでSourcetreeを使ったGit講座の始まりです。
初回はリモートリポジトリのクローンの仕方です。

リポジトリとは

リポジトリとは、GItで管理されたファイルなどが保管してある場所のことをいいます。
自分の使っているPCの中にあるものローカルリポジトリ、サーバーなどPCの外にあるものをリモートリポジトリといいます。

クローンとは

クローンとはリモートリポジトリを自分のPC内に複製してローカルリポジトリを作成することをいいます。

クローンの仕方

クローンしたい時はリモートリポジトリに対象となる案件がある場合とない場合でやり方が少し変わってきます。

リモートリポジトリに対象となる案件がある場合

リモートリポジトリに対象となる案件がある場合はクローンしたいリモートリポジトリの右にあるクローンをクリックしてください。 画像の1の箇所です。クリックしたら続きは「リポジトリをクローン」で続きを解説します。

リモートリポジトリに対象となる案件がない場合

リモートリポジトリに対象となる案件がない場合は左上にある新規のボタンをクリックして出てくる「URLからクローン」をクリックします。
画像の1の箇所です。クリックしたら続きは「リポジトリをクローン」で続きを解説します。

リポジトリをクローン

リモートリポジトリに対象となる案件がある場合でもない場合でも「リポジトリをクローン」というダイアログが表示されたかと思います。
リモートリポジトリに対象となる案件がない場合は「ソースURL」の箇所が空欄になっているのでここにリポジトリのURLをコピペします。リモートリポジトリに対象となる案件がある場合は「ソースURL」の箇所にURLが既に入っていると思うのでそのままにしてください。画像の1に当たります。

次に「保存先のパス」を入力してください。この時指定したディレクトリはからの状態にしてください。(まだ存在しないディレクトリを指定する)
「名前」になんの案件か把握できるものを入力してください。
最後にクローンをクリックしたらクローンは終わりです。

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


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

ルートドメインとは?

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

サブドメインとは?

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

サブディレクトリとは?

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

SEOの観点からみて

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

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

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

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

結局どのURLがいいのか

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

Facebook広告について調べていたら怖くなった話し


こんにちは。櫻井です。
この間個人のPCでちょっと調べものをしてたんですよ。大方調べ終わって一息つく感じでなんとなくスマホでもうほとんど使ってないFacebookを開いたんです。
そしたらついさっきPCで調べていた内容に関連した広告がたくさん表示されまして、その時は「Facebookめっちゃ情報抜き取ってくるじゃんw」くらいの感じだったんですが、それで少し興味が湧いてFacebook広告について調べてみました。

Facebook広告とは?

まず、Facebook広告はSNS広告の一種で、ユーザー数の多さとそのユーザーが登録した個人情報を利用したパーソナルマッチ広告です。
個人情報が登録されているので、「東京に住んでいる30歳~40歳までの経営者に限定して広告を表示させる」ということもできます。
また、低単価なので、とりあえず数日だけやってみるということもできます。(1日の予算設定は最低でも500円~1000円以上が良いそうです)
さらにInstagramにも出せます。

ここまでは別に怖くなかったんです。むしろ興味がある分野とかの広告出してくれるなら情報収集にもなるしありがたいぐらいに思ってたんです。

類似オーディエンス

Facebook広告を実際に出稿するときにターゲットを絞るんですが。類似オーディエンスというものがあるんですが、これ何をやっているかっていうと、出稿する側がFacebookにお客さんのメールアドレスとか電話番号を渡すんです。するとFacebookがその情報を参照してアカウントがあるかを調べ、その人と似たような趣味趣向の人に広告を出してくれるといったものなんですが、この内容を知ったときにFacebook怖いってなったんです。

何が怖いか

何が怖いって出稿する企業側から知らぬ間にメールアドレスが渡されていて、Facebook側にこの人はこのサービスを使っているということが知られるわけじゃないですか。
ということは、自分が何に興味があって何を調べて何を登録して何を登録しなかったのかっていう行動が全てみられているんですよ。で、その情報を元にならこれも興味あるよね?って広告を出してくるんです。なんだかストーカーからプレゼント贈られるみたいで恐くないですか?

最後に

もしこれを読んで情報抜かれるの嫌だなと思ったらiphoneなら[設定]から[プライバシー]を押して一番下にある[広告]をタップ[追跡がた広告を制限]をONにすると抜かれなくなるみたいですよ。

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


こんにちは。櫻井です。
新型コロナの影響もあり昨今当たり前になりつつあるネットショップ。
今回はそんなネットショップ開設サービスにどんな違いがあるのか
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の扱いには慣れたような気がします。
経験大事。

社員旅行2019


だいぶと外の空気が秋めいてきましたね。
今年もKNAPメンバーで社員旅行に行ってまいりました。

今年の行き先は埼玉県の長瀞でぶらり電車の旅となります。
寒いかと思いきや暑いくらいの気温で旅日和のお天気でした。

最近ipadでのお絵かきにはまっているので旅のハイライトシーンをすごろくにしてみました。

秩父鉄道に初めて乗ったんですがレトロな雰囲気でまだSuicaに対応していなく駅員さんに切符を渡す、風情のある鉄道でした。

上長瀞に集合して、まずはお蕎麦屋さんでくるみそばを食べ腹ごしらえ。
手打ち感溢れるそばでおいしかったです。

次のラフティングの時間まで少し間があったので、近くのかき氷屋さんでかき氷を食べました。雰囲気のあるかき氷屋さんでかき氷の山具合に思わず写真を撮りたくなるかき氷でした。

そしてメインのラフティングへ、暑くてよかった!
社長のタックルにより何度も落とされる社員。
飛び込みでバク宙を決めたりアクティブっぷりを発揮する社員。
ラフティングのお兄さんに社長が一番やんちゃだと言われたりと
皆の性格が出ていて楽しかったです。2時間ぐらいの長丁場で筋肉痛。

その後宿につき晩御飯。ちょうどお誕生日が近かったので社長と女性社員の誕生日会をしました。
入社4ヶ月の新人君がつっこみだということがわかり、これまでボケが放置状態だったKNAP内のボケを次々ひろい回収して行きます。新しいキャラ登場です。
部屋に戻って、スマブラ、人狼ゲームして就寝。
翌朝の部屋からの眺めが荒川一望で素晴らしかったです!

2日目は電車とバスで農園に行き、釣り堀でマス釣。
なかなか釣れず、魚たちの餌やり状態となってましたが、苦労して釣った魚はおいしかったです。

子どもづれが多く平和な農園でした。ヤギに会いにまた行こう。
そしてぶどう狩りしている間に、最終のバスがすぐ来る時間になり最後はバタバタ走って終わりましたが楽しい旅となりました!

来年はどこかしら。

てぬぐい2019



社内のプロジェクトで、制作しているオリジナルの手ぬぐいが
今年もいい具合に仕上がりました。

 

今年のネーミングは
お風呂でばける 「ばけばすてぬぐい -BAKE BATHE-」

こちらは手ぬぐいとして汗も拭ってくれますが、
実は、お風呂でも遊べちゃうんです!

皆さん、子供の頃にお風呂の中でタオルに空気をいれて、
膨らませる遊びをした事がありますか??

おふろクラゲって言うみたいなのですが、
あのポコッと膨らんだ頭に、顔がついてたらかわいいんじゃないかと思い、
おふろクラゲ専用の手ぬぐいを作ってみました。

 


パッケージに入れた表面はこんな感じです。

 


手ぬぐいを包む帯も、オリジナルで制作しています。

 


手ぬぐいと一緒に、オリジナルのメッセージカードも制作しました。

 

表(右)は、ばけばすてぬぐいのおばけのキャラクターを漫画に、
裏(左)は、KNAPメンバーが山頂からの景色を眺めている一コマをイラストにしました。

「ばけばすてぬぐい」は販売方法、販売時期は未定ですが、数量限定で販売できたらいいな〜と現在企画中です。
ご興味がある方がいらっしゃいましたら、こちらまでお気軽にお問い合わせください。

来年のてぬぐいはどんなデザインになるのかな〜

Notoがfont-feature-settingsが効かない理由を調べてわかった意外な事実


こんにちは櫻井です。
先日、Notoが字詰め(font-feature-settings)効くか検証してほしいと依頼があったので今回はそれを検証していきたいと思います。

早速検証

早速検証していきます。まずはGoogle FontsからNoto Sans JPを拝借してfont-feature-settingsを当てていきましょう。
今回は太さは「font-weight: 400」で字詰めを
・字詰めなし
・halt
・palt
・pkna
・pwid
・hkna
・kern
の7つを比較していきます。

イメージ

全く詰まってないですね。やる気を微塵も感じられないレベルです。Noto Sans JPには字詰めは効かないみたいです。ですがGoogle Fontsには「Noto Sans」はいくつかありました。
ここでひとつ疑問が生じます。字詰めが効かないのはNoto Sans JPだからなのか?それともNoto Sansは全部効かないのか?
今度はこれを検証していきましょう。

他のNoto Sansを検証

今回調べる他のNoto SanはGoogle Fontsで調べた際に出てくる「Noto San TC」、「Noto San SC」、さらにNoto San JPがGoogle Fontsに追加される前に出回っていた「Noto San CJK」この3つを調べていきましょう。

イメージ

まずはNoto San TCです。Noto Sans JPと同じく全く詰まってないですね。次はNoto San SCを見ていきましょう。

イメージ

こちらも全くダメですね。最後にNoto San CJKを見ていきましょう。

イメージ

CJKもダメでした。Noto Sanはこれで全滅です。Noto Sansはどういうわけか字詰めは効かないようですね。

ちょっと待った

これで検証を終わりにしようかと思ったんですがこんな記事を発見しました。

https://qiita.com/sutara79/items/7f0c6365e5935311b1f8

この記事のデモページを見てみたらNoto Sans CJKが詰まっていました。

イメージ

なぜ??このままでは検証を終われません。詰まっている理由を突き止めていきます。

違いはなにか?

なぜ詰まったのか違いを調べていきます。例のでもページはローカルにフォントが存在する場合とあります。ここで考えられるのはローカルに存在するNoto Sans CJKと読み込ませているNoto Sans CJKに違いがある場合です。まずは僕が検証用に読み込ませたファイルを見ていきます。

イメージ

読み込ませていたのは「NotoSansCJKjp-Regular.eot」、「NotoSansCJKjp-Regular.ttf」、「NotoSansCJKjp-Regular.woff」の3つのフォントファイルでした。続いてfont bookに入っているフォントを見ていきます。

イメージ

入っていたのは「NotoSansCJKjp-Regular.otf」でした。拡張子が違いますね。僕が読み込ませていないものです。読み込ませて詰まるのか見ていきましょう。

イメージ

詰まりました!ここまでNotoが詰まらなかった理由はこれです。Google Fontsが読み込ませているフォントファイルの拡張子は「.woff2」というものです。「.otf」ではありません。ちなみに字詰めが効く「游ゴシック」や「ヒラギノ」も「.otf」で入っています。ではなぜ「.otf」以外の形式だと字詰めが効かないのでしょうか?ここでfont-feature-settingsについて調べてみましょう。

font-feature-settingsの機能

font-feature-settingsはOpenTypeフォントの機能の有効・無効を指定するプロパティです。つまりOpenTypeフォント以外の「.eot」、「.ttf」、「.woff」はそもそもOpenTypeフォントの機能を兼ね備えていないので指定したところで効くわけがないんです。

最後に

字詰めが効かない理由はわかったかと思いますが「じゃあ、字詰め効かせるためにOpenTypeフォントを読み込ませよう」と思う方もいると思います。ですがオススメしません。Noto Sans CJKのOpenTypeフォントをサーバーに入れて表示させようとしたところ読み込みが完了するまでに3秒ほどかかりました。その間、文字は何も表示されず画面は真っ白のままです。会社のWifiでこれなので移動中の電車の中などではさらに表示に時間がかかるでしょう。これではサイトが表示される前にユーザーが離脱してしまいます。Googleが「.woff2」というファイル形式で読み込ませているのには訳があります。その方が高速だからです。どうしても字詰めをしたいなら游ゴシックやヒラギノを使う、Notoを使うなら字詰めは諦めるなど取捨選択が必要です。

Scroll to top