Shopify のテーマを Theme Kit で作るための環境構築
Shopify のテーマを Theme Kit で作るための環境構築です。 本当に最初の最初
Macに Theme Kit を install
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管理画面からAPIのAccessキーを生成します。
アプリ管理 > プライベートアプリを管理する をクリック
諸々同意しならが、アプリを作成
アプリ名と連絡先emailを設定
テーマを 読み書きできるようにアクセス権を変更
保存すると、キーやパスワードが生成されます。
テーマを新規作成
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へデータの受け渡し方法
下記の例では、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'],
}
関連記事
Rails x Vue x Graphql x webpackerの IE11対応
自分用のメモ
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対応はそろそろ終わりにしたい。
関連記事
- 作者:山田 祥寛
- 発売日: 2019/08/22
- メディア: 単行本
key must be 32 bytes | ActiveSupport::MessageEncryptor
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バイトしか使わずに暗号/複合しているっぽい。
関連記事
プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)
- 作者:伊藤 淳一
- 発売日: 2017/11/25
- メディア: 大型本
undefined method `raise_in_transactional_callbacks=' エラー
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については下記
関連記事
Rails の Activerecordで is null かつ empty をselect したい時
Rails の Activerecord で 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 = ''")
を書いていましたがだいぶ無駄でした、、、
関連記事
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)
以上です
参考サイト
関連記事
- 作者:mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本（ソフトカバー）