仕事」カテゴリーアーカイブ

Shopifyのテーマをローカルで開発するのに超絶便利なTheme Kitの使い方

Theme Kitとは?

Shopifyが提供している、開発者用のコマンドラインツールです。

https://shopify.github.io/themekit/

Theme Kitをダウンロード

「Installation」のセクションから、お使いの環境に合ったTheme Kitをダウンロードします。
コマンドラインに慣れている素敵な貴方はコマンドラインから。
お願いだからexeファイルください…とヨボヨボな貴方と私は「Manual Installation」しましょうね。

Theme Kitのインスコ

管理人はWindowsユーザーなので、Windowsの解説しますよー。

  1. program filesフォルダの中に「Theme Kit」フォルダ作ります。名前はなんでも大丈夫だよ。
  2. さっきダウンロードしたtheme.exeを作ったフォルダにぶち込みます。
  3. パスを通します。環境変数ってやつだね。英語だけどここがスクショ付きで説明しているのでわかりやすいです。
    pathのところに「C:\Program Files\Theme Kit」が追加されれば大丈夫!
  4. Powershell(かコマンドプロンプト)を立ち上げて、下記コマンドを打ってみましょう。
    theme
    theme kitの説明がずら~と表示されればインスコ成功です!

macやlinuxの方は下記を参照にがんばって。

Linux & macOS

Download the themekit binary that works for your system.
Compare checksums of the binary by running md5 theme
Put the binary on your path. We recommend somewhere like /usr/local/bin
Ensure that it works as expected by running theme version

APIアクセス権をもらうよ

Shopifyの管理画面から、APIでアクセスするための設定をします。
Theme Kitのページに、すんごいわかりやすいgifがあるので参考にしてね。

  1. 管理画面から「Apps > Manage private apps」
  2. 「Create a new private app」をクリック、下の方に小さくあるよ。
  3. Private App Name(なんでもいいです。Theme Kit Accessとかでいんじゃない。)と自分のメアドを入力。
  4. 「Theme templates and theme assets」の権限を「Read and write」に設定
  5. 「Save」を押下。

Shopifyとローカルをつなげちゃうよ

  1. Shopifyのテーマを保存したい場所にフォルダを作ります。
  2. そのフォルダでPowershellを立ち上げます。フォルダ上で「shift+右クリック>この場所でpowershellを開く」で開けるよ。
  3. つなげてみましょう。下記コマンドを打つよ!
    theme configure --password=[APIのパスワード] --store=[shopifyストアのURL(hoge.myshopify.com)] --themeid=[テーマのID(※)]
    ※ テーマのIDは管理画面でテーマのカスタマイズ開いたときのURLでわかります。数字が並んでいる箇所がテーマIDだよ。
  4. config.ymlファイルができているはずです。

Shopifyからテーマをダウンロードしてみよう

  1. 下記コマンドを打つよ。
    theme download
  2. テーマのダウンロードが始まります。
  3. パーセンテージが100%になったらフォルダを確認してみよう。Shopifyからテーマファイルがダウンロードされているはず。

Shopifyと同期してみよう

この機能がマジ神です。
ローカルでファイルを変更すると、Shopifyにダイレクトに反映されます。

  1. 下記コマンドを打つよ。
    theme watch
  2. ローカルでなにかファイルを変更してみましょう。
  3. ファイルを保存すると、自動でファイルがアップロードされます。Powershellにもログが出ているよ。
  4. Shopify上で表示を確認してみましょう。変更されたかな?
  5. 同期の終了は「ctrl+c」です。

神動画

イケメンがShopify Theme Kitの使い方を手取り足取り教えてくれます。
この人若いっぽいのに有能…すごい…!!

【なんてこった】FlickrとWordPressの連携機能が3/25で終わるらしい

詳細:[Official Thread] Welcome back HTML Embeds! Goodbye to some sharing options.

Flickrのこの機能、かなり便利に使わせてもらってたのですが、まさかの打ち切り。
まいったぞー。
代替機能探さないと…。

25日過ぎたら、きっとエロい人たちが代わりになるような機能をまとめてくれると思うので、それに期待してひとまず放置。

IE11のデベロッパーモードでブラウザモードを変える方法

まさかこんなところで引っかかるとは。
以下手順。

  1. F12を押してデベロッパーモードにする
  2. 左ペインの一番下(もしくはctrl+8)を押してエミュレーションの設定を開く
  3. ユーザーエージェント文字列からブラウザを選ぶ
  4. ユーザーエージェント文字列の中にブラウザが表示されていない場合、「カスタム」を選択しユーザーエージェント文字列を手入力する

自分の場合、なぜか最初はユーザーエージェント文字列の中にブラウザ一覧が表示されていなかったので、わざわざカスタムで手入力した。
でも別のタイミングで見たらばっちり表示されてて、あの苦労は何だったんだ状態。

もしブラウザ一覧が表示されていなかったら、IE Testerでテストするほうが楽だと思うよ。

プラグインを使わず、テーマも変更せず、WordPressでコメントを受け付けない設定にする方法(過去記事も)

  1. ダッシュボードから設定>ディスカッション を開く
  2. 投稿のデフォルト設定の「新しい投稿へのコメントを許可する」を外す
  3. 他のコメント設定の「X日以上前の投稿のコメントフォームを自動的に閉じる」のチェックをオン
  4. 「X日以上前の投稿のコメントフォームを自動的に閉じる」のXを1に設定
  5. 変更を保存

備忘録的に。
WordPress全体に適用される、コメント設定って無いんだね。

CloudFlare使ってるWordPressサイトをいじるときに気をつけること

備忘録。

CloudFlare使ってるとき、WordPress(Webサイトも?)いじる場合は要下記設定。
プラグインにW3 Total Cache入れてる前提で。

  1. WordPressの管理画面から、Performance > グローバル設定 へ。
  2. 下の方にある「Network Performance & Security powerd by CloudFlare」を見つける
  3. Development mode をオンに
  4. Purge cacheをポチッとな

これやんないと、うまい具合に変更がサイトに反映されなくてパニクるので注意をば。
W3 Total Cacheを入れていない場合、CloudFlareのWebサイトからログインして、設定画面で上記と同じ場所をゴニョゴニョすればおk。

ロリポップの大量乗っ取りに学ぶ、WordPressのセキュリティ設定

この前、ロリポップがクラッカーから大規模攻撃受けましたね。
自分のサイトもお客さんのサイトも、たくさんのサイトがロリポに置いてあったので、正直冷や汗モンでしたw
自分には幸運にも直接的に影響ありませんでしたが、念のための確認作業やらで時間取られました。

ロリポが行った対策は色々あるのですが、今後WordPressで構築する際にためになりそうな箇所をメモっておきます。

  • wp-config.phpのパーミッションを400に
  • install.phpのパーミッションを000に
  • .htaccessのパーミッションを604に

いやーしかし、CGIのフルパスとデータベースパスワード変更された時にはどうしたもんかと思いましたぜ…
事態は沈静化してきていますが、うーん、セキュリティは気をつけても気をつけても足りないなあ。

要素をプルプルプルプル動かせるjRumbleが楽しい

まずは何も言わず、デモサイトを見てみるんだ。

http://jackrugile.com/jrumble/

な!!楽しいだろう!!

あまりにプルプルプルプル動くから楽しくって、開発しながら笑ってしまうのよ、このプラグイン。

使い方

まずはjQueryを読み込むのと、プラグインを読み込む。
こんなかんじね

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script>

プルプルプルプルさせたい要素に対してスクリプトを書くよ

$('#要素id').jrumble();
$('#要素id').hover(function(){
    $(this).trigger('startRumble');
}, function(){
    $(this).trigger('stopRumble');
});

これで動くはず。
上記サンプルはマウスオーバー時の処理なのだけれど、クリック時やずっと動きっぱなしな処理も出来るよ。
詳しくは公式サイトにゴー。

ライセンス

MIT Licenseです。やったあ。

使い所

なにせ目立つので、強調したいリンクや、ドッキリ的な仕掛けに使えそうだね。
うーん、楽しい。

いろんな言語への対応について考える

昨日新しく適用させてみた、Twenty Thirteen
一日ちょい使ってみて、やっぱりどーも慣れないので、前のテーマ(Twenty Twelve)に戻しました。

デザイン的には結構好きだったんですが、英語圏用に調整されているテーマって、日本語で見やすくするには修正が必要なんだよね…。
結構直さなきゃいけないところあります。
たとえば…

  • 文字の行間とか
  • フォントサイズとか
  • 日本語フォントと英語フォントの大きさが違うからその考慮とか
  • 英語フォントだと表示OKだけど、日本語フォントだとおかしくなる箇所とか
  • Webフォントとか…
    英語圏のひとたちは使えるWebフォントが大量にあって羨ましいなあ。

そういえば最近良く見るのが、右から左に読む言語に対応しているフレームワークやテーマ。
日本語と英語の違いでだってこんなにやることあるのに、右から左に読む言語とかだともう何をどうしていいのかまったく頭が回りませぬ。
デザイン正反対にすればいいってわけでも無さそうだし…うむむ。
その言語を全く知らないゆえに、対応が難しそうだ。

Web屋、勉強することありすぎワロタ…
いやワロエナイ…

Twenty Thirteenがキタ━(゚∀゚)━!

WordPressを3.6にしたら、Twenty Thirteenがやってきていましたよ!
早速当ブログにテーマ適用してみたのですが…

なんていうか…
うん…

日本語フォントってアレだよね?

Winの明朝体って、ディスプレイで表示するとなんでこんなアレになるんだろう…

しばらく機能を色々使ってみて、しっくりこなかったら前のテーマに戻そうと思います。
なんかなあ、最近のWEBのトレンドと日本語フォントが合ってない気がするのよね…。
もやもやする…

WordPressの鯖移転は、とても簡単だった。

ここ半月の間に、サーバー移転やらMTOS→WPへの移管やらがたくさんありました。
ちなみに、このブログも鯖移転したてホヤホヤです。
今なら自信を持って鯖移転もWP化もできまっせ!
というわけで、今後のために備忘録。

  1. まずは移転元サーバーのファイル群を全てバックアップ。
  2. MYSQLの管理画面から、データベースの当該テーブルをまるごとエクスポート。
    どのデータベース使ってるかなんかはwp-config.phpに書いてあるよ!
    テーブルは接頭辞でわかるお!
  3. wp-config.phpを開いて、移転先サーバーのMYSQL接続情報に書き換える。
  4. 移転先サーバーにファイル群を全てアップロード。
  5. 移転先サーバーのMYSQL管理画面から、データをインポート。
  6. ドメインのDNSネームサーバーを移転先サーバーに変更。
  7. DNSが移転先サーバーに切り替わるまでしばし待つ…。
    切り替わったかどうかは、自分はコマンドプロンプトのnslookup使って調べてるよ。
  8. DNSが切り替わったら、いつもどおりWPの管理画面へログイン。
    これで通常通り動いていればおk!

こっから先はプラグインの設定なので、ひとによっては要らないよ。

  1. WP-DBManagerとWP Backup(by BTE)使ってる場合、設定の変更が必要だよ。
    WPの管理画面におおきくエラーが出るので分かるはず。
  2. それぞれの管理画面に行って、移転先サーバーに合うようにパスの設定を合わせるだけでおk。

以上!
DNSの切替に時間かかるから、この間もやもやするけど、拍子抜けするくらい簡単です。
ある程度知識がある方向けにだいぶ端折っているので、初心者のかたはエロい人がまとめてくれたもっと詳しいまとめを見てやるのがいいよ。