2018-02-26

Visual Studio Codeのターミナル設定を少し変えた

Visual Studio Codeを使い始めているのですが、Visual Studio Codeの統合ターミナルを開こうとする時に shift ctrl @ となっているので、US配列を使っている場合ややつらみがありました。

とりあえず統合ターミナルを開くショートカットキーを shift ctrl 2 に変更しました。

キーボードのショートカット変更は ⌘ k s を押すと表示されます。

f:id:yuji0602:20180226112019p:plain

また、ターミナルを開いた時にoh-my-zshの設定で表示されなかったので ⌘ , で設定を開いてユーザ設定に以下を追加しました。

"terminal.integrated.shell.osx": "zsh"

元々は /bin/zsh だったので /bin を取ったら行けるかなと思ったので取ったら具合良くできました。

これでターミナルで実行する時に普段通りに使えるのかなと思いつつ、試行錯誤しながらもう少し試してみようと思います。

2018-02-19

Shopifyでテンプレートの開発環境を構築する

これはなに？

最近Shopifyでサイトを最近オープンしました。（が、まだ手直しもあるのでURLは公開しません・・）
テンプレートを操作するのは本番環境のエディタしか無いため、ちょっとカスタマイズしたいという場合はtypoなどの失敗をするとHTML崩れやJSエラーが発生するので胃に穴が空きそうなので開発環境の作り方を調べてみました。

開発環境を構築するための調査

shopify stagingで検索するとそれっぽいものが出てきました。

どうやらやり方としては、現在利用しているテンプレートをコピー（メニュー上はDuplicate）すると良いとのことでした。実際にコピーするとテンプレート一覧のようなところに表示されるので、そこからEdit Codeするとテンプレート開発を行えて、本番サイトに影響しないようです。

ツールを使って開発する

SlateというShopifyが出しているツールなのですかね、開発環境からデプロイ出来たりテンプレート表示確認出来るようなので使ってみます。

環境構築については以下のサイトの通りに実行してみました。

Shopifyのテーマを作ってみた #01

簡単に手順をまとめると、以下のようになります。

npmでslateをインストール
テーマ作成
configファイルの設定
slate watchで表示確認
slate deployでデプロイ

config.ymlについて

config.ymlを何も考えずに本番と同じテーマIDを使ってしまったら、実際に本番に反映されてしまったので以下の点に注意して設定すると良さそうでした。

development:
  password: <API_PASSWORD>
  theme_id: <DEVELOP_THEME_ID>
  store: <YOUR_SUB_DOMAIN>.myshopify.com
  ignore_files:
    #- settings_data.json # Uncomment this line to avoid resetting theme settings

production:
  password: <API_PASSWORD>
  theme_id: <PRODUCTION_THEME_ID>
  store: <YOUR_SUB_DOMAIN>.myshopify.com
  ignore_files:
    #- settings_data.json # Uncomment this line to avoid resetting theme settings

<API_PASSWORD>
- private appsで発行したパスワード
- Theme templates and theme assetsがRead and writeになっている必要があります
<DEVELOP_THEME_ID>
- 本番のテンプレートIDからテンプレートをコピーした時のID
<PRODUCTION_THEME_ID>
- 本番のテンプレートID
<YOUR_SUB_DOMAIN>
- Shopifyの管理画面のドメイン

Slateにする利点

Slateにすることにより、開発する時のメリットが多いと思います。 * テンプレートをgitで管理可能 * 表示確認が可能 * デプロイが容易

まとめ

liquidというテンプレートファイルをどうやって表示するのか今日一日探した結果、ツールを見つけることが出来たので収穫でした。他の業務で使えるかと行ったら難しいところですが、Shopifyを使うとECサイト構築が容易だったりとか売上情報とかデータをShopify側が管理してくれたりとかで便利なんじゃないかと思いました。