めも」カテゴリーアーカイブ

Shopifyに独自の入力項目を追加する方法(フォーム項目、ファイルアップロード機能)

記事を読む前に…。
実はこの記事の文章書いたの、一年以上前でした。
ずっとEvernoteに眠っておりました…。
少し情報が古いかもしれないけど、まぁ使えるんじゃないかな。
アップデートすることもあるかも。

Shopifyの商品に、独自で入力欄を追加して欲しいという要望があったので忘備録だよー。
今回は通常のテキストボックスなんかのフォーム項目と、ファイルアップロード機能を追加しています。
ファイルアップロードが曲者だけど、意外となんとかなる。
さあいってみましょう。

まずは商品ページ用にオリジナルのテンプレートを追加。

  1. テーマのtemplates/product.liquidを複製
  2. 複製したファイル名をproduct.hoge.liquidに変更
  3. 作ったファイルを開いて、「{% section ‘product-template’ %}」を検索
  4. 「{% section ‘product-hoge-template’ %}」に変更して保存
  5. テーマのsections/product-template.liquidを複製
  6. 複製したファイル名をproduct-hoge-template.liquidに変更

追加するフォーム項目を作るよ。

  1. Line Item Property – Shopify UI Elements Generator にアクセス。Shopify公式のフォーム項目生成ツールだよ。ここで生成できるのは通常のフォーム項目のみ
  2. Set your form field のところで作成したい部品を生成。右のPreviewで実際の表示が確認できるよ
  3. 出来たら下部のGrab your codeにあるコードをコピー

作ったフォーム項目をテンプレートに入れるよ。

  1. さっき作ったsections/product-hoge-template.liquidを開きます
  2. 「type=”submit”」を検索。これがある箇所が「カートに追加」ボタンの場所
  3. ↑より前に、コピーしたコードを追加
  4. (これはオプション)ペーストされたコードはpタグで囲まれてるので、気になる人はdivタグなどに直しておこう

ファイルアップロード機能を追加したい人はさらに下記をどうぞ。

  1. さっき作ったsections/product-hoge-template.liquidを開きます
  2. 「form ‘product’, product, class: form_class 」を検索、テーマによってはHTMLのformタグになってるかも
  3. コード内に「, enctype: ‘multipart/form-data’」を追加。HTMLのformタグになってる場合は「 enctype=”multipart/form-data”」って入れてね。
  4. もしコード内に「novalidate」がある場合はとっておいたほうが良いみたい…。自分が触ったコードにはnovalidateなかったので未確認。
  5. 「type=”submit”」を検索。これがある箇所が「カートに追加」ボタンの場所
  6. ↑より前に、下記のコードを追加。
<div class="line-item-property__field">
    <label for="custom_photo">ほげ</label>
     <input required class="required" id="custom_photo" type="file" name="properties[ほげ]" class="product-form__input">
</div>

上記は必須入力項目になってるので、必須にしなくていい人はinputタグから「required class=”required”」を抜いてちょ。

ここまで出来たら、商品に独自のテンプレートを適用させてみよう。

  1. 修正したテーマをtheme kitなりなんなりでShopifyにアップロードしとく
  2. Shopify管理画面の商品管理から、独自の入力項目を表示させたい商品をクリック
  3. ページ右下の「テーマテンプレート」のドロップダウンから、「product.hoge」を選択
  4. 実際の商品ページに追加した項目が表示されていればOK!

※ファイルアップロードが出来ない場合は記事の最後の方にヒントを書いてみたよ。確認してみてね。

どうせならカートにもカスタマイズ項目の内容を表示したいよね。
さあやってみよう。既に表示されてる人は下記抜かしてOK!

  1. sections/cart-template.liquid を開くよ。ない場合はtemplates/cart.liquidかも。
  2. 「{{ item.product.title }}」で検索。
  3. 検索したコードの下に、下記をコピペしてね
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
  {% for p in item.properties %}
    {% assign first_character_in_key = p.first | truncate: 1, '' %}
    {% unless p.last == blank or first_character_in_key == '_' %}
      {{ p.first }}:
      {% if p.last contains '/uploads/' %}
        <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
        {{ p.last }}
      {% endif %}
      <br>
    {% endunless %}
  {% endfor %}
{% endif %}

修正したテーマをアップロードして表示確認してみよう。
これでカートにも入力した項目が表示されているはず。やったね!

さらにさらに、お客さんとスタッフに送られる購入通知メールにもカスタマイズした内容を表示させちゃうよ!

  1. 管理画面から「設定>通知」を開く。
  2. 注文管理の注文の確認(一番上)を開くよ。これがお客さんに送られるメール。
  3. メール本文 (HTML)内を「{{ line.title }}」で検索。表示されない場合はカギカッコをとってみたりしてみてね。 
  4. 検索したコードの下に、下記をコピペしてね。
<span class="order-list__item-variant">
{% for p in line.properties %}
    {% unless p.last == blank %} / {{ p.first }} :
        {% if p.last contains '/uploads/' %}
            <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
        {% else %}
            {{ p.last }}
        {% endif %}          
    {% endunless %}
{% endfor %}
</span><br/>

保存して、もう一つスタッフに送られるメールも直すよ。

  1. 管理画面から「設定>通知」を開く。
  2. スタッフ注文通知の新しい注文を開くよ。
  3. 上記同様メール本文 (HTML)内を「{{ line.title }}」で検索。みつけたらすぐ下に同じコードをコピペしよう。

保存したら、実際にテスト注文をしてみよう。
メール内にカスタムで追加した内容が表示されてればおっけー!

ちなみに、Shopifyにファイルアップロード機能を追加しても、特に追加料金はかからないみたい。
有料アプリで対応するとなると結構な月額費用が取られちゃうので、できればコードで解決してあげれると良いよね。

ファイルアップロードが出来ない場合

ファイルアップロードの項目は表示されているのに、アップロードされていないっぽい場合。商品をカートに入れる動作がajaxで制御されていないかな?
ajaxだとファイルアップロードがうまく動かないみたいなので、ページ遷移の方法に変更しよう。
ページ遷移への変更方法はテーマによってまちまちだと思うけど、管理人の使っていたテーマは管理画面のテーマカスタマイズから変更できた。
theme.js内のajax制御をコメントアウトしたら出来たって報告も見つけたので、参考にしてみてー(この記事最後で紹介している参考サイト一覧の、最後のサイトだよ)。

参考にさせていただいたサイト

日本語で画像つきで詳しく解説してくれているサイト。ほんっとありがとうございます!
Shopifyの商品ページにカスタム内容の入力フォームを追加する | グラフィックデザイナー奮闘記
Shopifyの商品ページにデータアップロード用のボタンを用意する | グラフィックデザイナー奮闘記

Shopify公式が解説しているカスタマイズ方法、懇切丁寧
Product pages – Get customization information for products – Shopify Community

ファイルアップロードでひっかかったときに参考にしたShopify Communityのスレ
Customers to upload image – Shopify Community
Solved: Custom File Upload Not Showing In Cart – Shopify Community

【LastPassユーザー向け】Heartbleedの脅威から簡単に身を守る方法

Heartbleed、IT関連の方ならご存知でしょう。
過去最大級と言われるセキュリティ災害です。

詳しい内容と対策はこちらが詳しいです。
ウェブを襲った最悪のセキュリティ災害「Heartbleed」から自分の身を守る方法

おそらくインターネットを使用する大多数のユーザーに影響がある、この事件。
もしパスワード管理にLastPassを使っている場合、あなたはラッキーかも。
LastPassの機能で、Heartbleed対策ができてしまうのです。

その機能というのは、昔からある「LastPassセキュリティチェック(セキュリティチャレンジ)」。
パスワードの強度やセキュリティレベルを調べてくれる機能なのですが、これにHeartbleed対策も追加されました。
さすがLastPass、ユーザーの要望分かってるわあ。

やり方は以下のとおり。

  1. ブラウザのツールバーにある、LastPassのアイコンをクリック
  2. 出てくるメニューから「ツール>セキュリティチェック」を選択
  3. 新しいタブが開くので、ページ内下部に何故かめちゃくちゃひっそりとある「チャレンジを開始」リンクをクリック。目立たないのでご注意。

これでセキュリティチェックが開始されます。

チェックがひと通り終わると、ページ上部にこんな情報エリアが表示されます。

Heartbleed対応状況

これがLastPassが自動で調べてくれた、Heartbleed対応状況です。
図にあるように、一番右側に3種類のステータス(You are safe!、Wait、Go Update!)が表示されています。

  • You are safe!だった場合はそのサービスに対する対応は必要なし。
  • WaitはサービスのHeartbleed対応待ち状態。
  • Go Update!はサービス側がHeartbleed対応済みなので、リンクをクリックしてパスワードを変更しましょう。

図にもあるように、かなりの大手サイトがHeartbleedの脅威にさらされています(いました)。
なるべく早い対応を心がけたいもんですね。

Chromeの標準機能で、動画や音楽が勝手に再生される広告を表示させない方法

結構知らない人がいそうなので共有しておきます。

マウスを乗せると買ってに再生が始まる動画広告、めちゃうざいですよね。
その場で再生されるならまだしも、画面いっぱいに広がってきたり、思いもよらない大音量で再生されたり。
タブをいくつか開いていたりすると、どのタブから音楽が流れているのかを突き止めるのも大変だったりします。

こういった広告を流さないようにするには、広告ブロックのアドオンを入れるのも解決法の一つですが、それよりももっと手軽な方法があるのでご紹介します。
管理人はメインブラウザがGoogle Chromeなので、Chromeユーザーの方向け記事です。

Chromeの設定画面を表示し、「詳細設定を表示>プライバシー>コンテンツの設定>プラグイン」まで遷移。
プラグインの設定を「クリックして再生」にします。

これだけ!

いままで好き勝手に再生されていた動画広告が、クリックしないと再生されない仕様になるので、非常に快適になりますよー。
ちなみにクリックされるまでは、灰色のレゴブロックのような画像に置き換えられます。

あ、ちなみにこの設定をすると、Youtubeなどのサイトもクリックしないと再生されなくなります。
気になる人は「例外の管理」ってところでYoutubeを設定してあげれば良い…はず。(未確認)

Win8クリーンインストールで躓いた箇所

Win8、クリーンインストールしました。
現在ごりごり環境設定中です。

いやあ、クリーンインストール後の「何も余計なものが入っていない」感さいこーですな。
サクサク動くしねー。

ちなみに、Win8にしたところ、Thunderbirdは無事動くようになりました。
はーよかった…

Win8にダウングレードするにあたり、いくつか躓いた箇所があったのでメモっときます。

Win8.1起動中に、Win8インストールディスクを入れてもインストールがうまくいかない

途中まではうまく動くんですが、アップグレードアシスタントの途中で変なバグが起きて進まなくなってしまいました。
インストールプログラム内に表示されなきゃいけないウインドウが、なぜか外部プログラムで開いてしまい、どうしても先にすすめないのです。
再起動やらデバッグのまねごとやらしてみたけど原因わからず。断念。

CDからのブートがうまく動かない

通常BIOSの設定って、起動の優先順位CD、HDDってなってるじゃないですか。
CD入れて立ち上げてもCDからブートせず。
BIOS確認したら自分の環境はHDDが先になっていたので、CDを優先に設定して再起動しました。
…でもやっぱりだめ、通常通りHDDから起動してしまいます。
再度BIOS見てみると、CDの中でも優先順位があるんですね。
うちはCD/DVDドライブが2つついていて、インストールディスクが入っていないほうが優先的にブートされる設定になっていました。
これを別のドライブに設定してあげると、無事CDからブートできました。

さーて残りの設定も、やったるどー。

Windows8に戻すことにした。

突然のThunderbirdテロからはや一週間。
結局いまだ未解決で、メールチェックはサブPCで行っている毎日です。
何をしてもどうにもならないのと、Win8.1にしてから不具合が大杉のため、Windowsのクリーンインストールすることにしました。
ついでにWin8.1からWin8へのダウングレードもね。
Win8.1、どうも自分とは相性が悪いようで…

昨日辺りからファイルのバックアップや、各ソフト設定のエクスポートなど細かい作業をゴニョゴニョしています。

基本的にバックアップできるものはクラウドに上げているとはいえ、全部が全部クラウドにあるわけではないので、地味に面倒な作業です。
とはいえPC内の余計なファイルが一気に整理できるので、クリーンインストール、嫌いじゃないです。

忘れがちなのがAdobe製品のシリアルナンバーの認証を解除しておく事。
先ほど認証解除したので、もう大丈夫でしょう。

そういえばWindowsのライセンス認証は解除しなくてもいいのかしら。
…と思って調べたけれど、有力な情報が見つけられず。
一節には「リカバリなどでクリーンインストールする場合は3回までは認証可能、それ以降は電話認証」とか書いてあった。
どちらにしろ使用中のライセンスを認証解除する方法は見つけられなかったので、このまま作業に入りやす。

Windows8に戻したい

Win8をWin8.1にアップグレードしてから、もうほんとにろくなことが起きていません。
Windows8自体はいいOSだったので、Win8に戻したいよぉ…

ちらっと調べてみたところ、簡単にダウングレードする選択肢はなし。
クリーンインストールしか手は無さそうです。

クリーンインストール自体は面倒なだけでそんなに苦じゃないのです。
心配なのは、もうご老体のメインPC(4歳)。
毎日ガンガン仕事やらゲームやらに使いまくっているので、そろそろぽっくり逝ってしまってもおかしくはないのです…。

メイン機はBTOのデスクトップ型なので、中開けてハード掃除したり、ソフトもそれなりに労ってはきました。
でも、PCって結局消耗品。
4年も使ってりゃあ…ねぇ…。

とはいえ、今のままではWin8.1にイライラするばかり。
Win8.1にしてからできなくなったことが多すぎます。
はぁ、どうしよう。
老体に鞭打ってクリーンインストールしてしまったほうがいいのかな…。

管理人、迷っています。

【困った】Thunderbirdでメール受信できない現象 その2

昨日から始まったThunderbirdテロ。
一晩寝かしたものの、小人さんが働いてくれなかったので引き続き対応。
結論から行くと結局直ってねええええ!!

試したこと

システムの復元
→ だめだろうなぁと思ったけどやっぱりだめだった

システムの復元で削除されたWindowsUpdateを再度インストール
→ まぁダメだよね

開発版(64bit)のインスコ
→ Thunderbirdが32bit、OSが64bitだからいけないんじゃね?というごもっともな指摘を受けたので開発版(64bit)入れたけどダメ

使用するネットワークの変更
→ 自宅のADSL2+回線のせいかもしれないので、携帯のテザリング経由でネットに繋ぐ。やはりダメ。

Firewallとセキュリティソフトを無効に
→ 何も変わらず。

もうメーラー変えちまえよ
→ OperaMailPortable入れてみたけれどダメ。でもSSL通さないと受信できた。これはThunderbirdも同じ。

SSL通さないで送受信する設定にすればいいんじゃないの?
→ 8個あるアカウント中、独自ドメインのものはSSLなしで使えるようになった。けど、GmailやYahooはSSLなしでも受信不可。

エラーメッセージの「chrome://messenger/content/mailWindowOverlay.js」の最初のchromeって字が気になる
→ 絶対関係ないと思うけどChromeを再インストール。やっぱり関係なかった。

セーフモードとか…
→ セーフモードで起動したけどだめー

タイムアウトの時間伸ばしてみたら?
→ 基準値の100から300にしたけどだめ。

いやもうほんとお手上げ。
どうしたら良いのかさっぱり分からん。

しかし、多分原因はThunderbirdではない気がする。
OSか、セキュリティまわりか、ワイヤレスLANアダプタまわりか…
Win8.1にしてからホントろくなことないお(´;ω;`)

【困った】Thunderbirdでメール受信できない現象

Thunderbirdのテロが突然はじまり困っています。

現象

Windows8.1のThunderbirdでメール受信不可。
(送信は可能…?)

前提

Thunderbirdでは複数アカウントを管理。
アカウントは全てIMAP、SSLを通しての接続。

試したこと

しばらく再起動していなかったPCを再起動したらメール受信不可になった。
→ なんらかのアップデートが当たった?とはいえWindowsUpdateは今回は当ててない。

全く同じプロファイルを使用している、Windows7は普通に送受信可。
→ プロファイルをWin7からコピってきたけど、やはりダメ。

プロファイル壊れた?
→ 新規プロファイル作ったけどダメ。でも接続にSSLなしだと受信可。

ルータまわりは?
→ 再起動数回試したけれど、ダメ。

PCの再起動は試したよね?
→ なんどもやったさ…

Thunderbird入れなおしてみたら?
→ アンインスコ&再インスコしたけど変わらず。

Windowsの権限周りは?
→ Thunderbirdを管理者権限で起動したけどダメ。

アドオン無効やセーフモードは?
→ アドオン無効&セーフモードでもダメったらダメ。

メールサーバー側が落ちてるなんてことはないよね?
→ Webメールからは確認可。Win7のThunderbirdからもログインできるのでその線は無さそう。そもそもGmailやYahoo、独自ドメイン全部受信できないから、全部が一気に落ちるってことは考えにくい。

気になるところ

接続のエラーメッセージが出ない。
→ 出る時がたまにあるんだけど、その時はタイムアウトのメッセージ。

スクリプトエラーが出ることがある
→ 「スクリプト: chrome://messenger/content/mailWindowOverlay.js:1374」がどうのって出るんだけど、これも出る時と出ない時がある。

結局、今日のところは万策尽きた。
夜中に小人さんが働いてくれることを祈って、一晩寝かします。

んもー困るわー。

無料で読めるWebマンガがアツい

マンガ大好きです。
豪に来てからというもの、なかなか連載中のマンガをリアルタイムで追うのは厳しくなってしまいました。

…が、嬉しい事に近年はWebマンガブーム。
去年出版大手各社がWebマンガサイトをリリースし、質の高いWebマンガが無料で読めるようになってしまいました。
最近だとスマホアプリで無料のマンガを配信してることもあり、かなり手軽に読めてしまいます。
いや素晴らしい。

紙面で連載中の漫画も、最新作一話だけはWebで読めてしまったりして。
毎月サイトにアクセスして、ちゃっかり読んでしまったりしています。

自分の守備範囲の問題なのか、Webマンガで展開しているのは少年向けばかりなような気が…?
そういえば少女/女性向けのWebマンガって知りません。
どなたかご存知でしたら教えて下さいませ~