ECのウェブ担当者のメモ

ECサイトを運営管理している、WEB担当プログラマのメモ

スポンサーリンク

Shopify のテーマを Theme Kit で作るための環境構築

f:id:jun9632:20201225174707p:plain

Shopify のテーマを Theme Kit で作るための環境構築です。 本当に最初の最初

Macに Theme Kit を install

公式 shopify.github.io

brew tap shopify/shopify
brew install themekit

インストールの確認

theme help

Usageが表示されればinstall 成功。

Complete documentation is available at https://shopify.github.io/themekit/

Usage:
  theme [command]

Available Commands:
  configure   Create a configuration file
  deploy      deploy files to shopify
  download    Download one or all of the theme files
  get         Get a theme and config from shopify
  help        Help about any command
  new         New will generate a new blank slate theme in the same directory where it gets called from and create a new theme on Shopify with those files.
  open        Open the preview for your store.
  publish     publish a theme
  remove      Remove theme file(s) from shopify
  update      Update Theme kit to the newest version.
  version     Print the version number of Theme Kit
  watch       Watch directory for changes and update remote theme

Flags:
      --allow-live                 Will allow themekit to make changes to the live theme on the store.
  -c, --config string              path to config.yml (default "/Users/jimai/workspaces/MyProject/shopify/config.yml")
  -d, --dir string                 directory that command will take effect. (default current directory)
  -e, --env stringArray            environment to run the command (default [development])
  -h, --help                       help for theme
      --ignored-file stringArray   A single file to ignore, use the flag multiple times to add multiple.
      --ignores stringArray        A path to a file that contains ignore patterns.
      --no-ignore                  Will disable config ignores so that all files can be changed
      --no-update-notifier         Stop theme kit from notifying about updates.
  -p, --password string            theme password. This will override what is in your config.yml
      --proxy string               proxy for all theme requests. This will override what is in your config.yml
  -s, --store string               your shopify domain. This will override what is in your config.yml
  -t, --themeid string             theme id. This will override what is in your config.yml
      --timeout duration           the timeout to kill any stalled processes. This will override what is in your config.yml
      --vars string                path to an file that defines environment variables
  -v, --verbose                    Enable more verbose output from the running command.

Use "theme [command] --help" for more information about a command.

Access keyを生成する

shopify.github.io

shopify管理画面からAPIAccessキーを生成します。

アプリ管理 > プライベートアプリを管理する をクリック

f:id:jun9632:20201225142944p:plain

諸々同意しならが、アプリを作成

アプリ名と連絡先emailを設定

f:id:jun9632:20201225143211p:plain

テーマを 読み書きできるようにアクセス権を変更

f:id:jun9632:20201225143240p:plain

保存すると、キーやパスワードが生成されます。

f:id:jun9632:20201225143315p:plain

テーマを新規作成

shopify.github.io

mkdir my-theme
cd my-theme
theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]
[your-password]  => 管理画面で生成されたパスワード
[your-store.myshopify.com]  => 自分のshopify の ドメイン部分 (xxxxx.myshopify.com)
[theme name] => テーマ名 任意の名前

これで、ベースのファイルが生成されるので開発に取りかかれます。

開発中に使うコマンド

ブラウザで開発中の内容を確認する場合

theme open

変更をすぐアップロードしてくれる

theme watch

ファイルを全部アップする場合

theme deploy

関連記事

Railsからvueへpropsへデータの受け渡し方法

f:id:jun9632:20200412132324p:plain

下記の例では、Rails側のテンプレートで items/show.html.slim の id="recommend-category" の dataに code と item-group-codeを設定しています。(ケバブケースが良い様です)

items/show.html.slim

#recommend-category(data-code="#{@item_group.code}" data-item-group-code="#{@item_group.code}")

= javascript_pack_tag 'item'

recommend-category に vueを反映しつつ、propsにdataセットを渡しています。 app/javascript/packs/item.js

import RecommendCategories from './components/category/RecommendCategories'

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: '#recommend-category',
    render: h => h(RecommendCategories, { props: document.getElementById("recommend-category").dataset})
  })
})

vueのコンポーネント側では、propsで受け取ります。

app/javascript/packs/components/category/RecommendCategories.vue

`export default {
  props: ['itemGroupCode', 'code'],
}

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

Rails x Vue x Graphql x webpackerの IE11対応

自分用のメモ

f:id:jun9632:20200410163537p:plain

Graphql (Apollo) の実行に 下記が必要。 たぶん fetch するため

isomorphic-unfetch

yarn add isomorphic-unfetch

app/javascript/packs/application.js に下記を追加

import "core-js/stable";
import "regenerator-runtime/runtime";
import 'isomorphic-unfetch'

async / await で import "regenerator-runtime/runtime"; が必要らしい

babel.config.js

presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          },
          useBuiltIns: 'usage',
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ]

感想

IE対応はそろそろ終わりにしたい。

関連記事

marketing-web.hatenablog.com

これからはじめるVue.js実践入門

これからはじめるVue.js実践入門

key must be 32 bytes | ActiveSupport::MessageEncryptor

f:id:jun9632:20200408095434p:plain

Rubyをバージョンアップしたら key must be 32 bytes と怒られました

下記の様な複合化の処理が合った時に、

def self.decrypt(password)
   secret_key = 'your-key_1234567890123456789012345678901234567890'
   ActiveSupport::MessageEncryptor.new(secret_key, 'aes-256-cbc')
    crypt.decrypt_and_verify(password
end

32バイトにしないといけないんですね。 上記のように先頭から32バイトで成功します。

def self.decrypt(password)
   secret_key = 'your-key_1234567890123456789012345678901234567890'
   ActiveSupport::MessageEncryptor.new(secret_key[0..31], 'aes-256-cbc')
    crypt.decrypt_and_verify(password
end

どうやら、もともと、頭の32バイトしか使わずに暗号/複合しているっぽい。

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

undefined method `raise_in_transactional_callbacks=' エラー

f:id:jun9632:20200408093920p:plain

Rails のバージョンアップ(5.0 => 6.0)したら、下記のエラーが発生しました。

ERROR NoMethodError: undefined method `raise_in_transactional_callbacks=' for

対処方法

config/application.rb の下記をコメントアウトしたらエラー出なくなりました。

- config.active_record.raise_in_transactional_callbacks = true

+ #config.active_record.raise_in_transactional_callbacks = true

raise_in_transactional_callbacksについては下記

railsguides.jp

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

Rails の Activerecordで is null かつ empty をselect したい時

f:id:jun9632:20200127111026p:plain

RailsActiverecord で is null かつ empty(空文字)でセレクトした時。

結論は以下です。

User.where(name: [nil, ''])

そうすると

SELECT  users.* FROM  (users WHERE users.name = '' OR users.name IS NULL)

のようなSQLが発行されます。

最初は

User.where("user.name is null OR users.name = ''")

を書いていましたがだいぶ無駄でした、、、

関連記事

marketing-web.hatenablog.com

Rails x Vue 環境に Buefyをinstall する

yarn で buefyをinstall

$yarn add buefy

app/javascript/packs/application.js に下記を追加

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)

以上です

参考サイト

buefy.org

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

  • 作者:mio
  • 出版社/メーカー: シーアンドアール研究所
  • 発売日: 2018/05/29
  • メディア: 単行本(ソフトカバー)