はてなブックマーク

本記事は私達の会社で作ったShopifyテーマ開発入門書『Hello Shopify Themes Shopifyテーマ開発ガイド』からの抜粋です。 こんにちは、エンジニアの川島です。 Shopifyテーマ開発を行うにあたって、必要不可欠なのがテスト環境です。 Shopifyは（WordPressなどと異なり）ローカルサーバーを構築できないため、開発時の確認も基本的にはテスト環境で行います。 ただ、一口に「テスト環境」と言っても、Shopifyで構築できるテスト環境はひとつではありません。 ストア規模や開発体制によって適切なテスト環境が異なるため、「Shopify staging」や「Shopify development workflow」などで検索すると、記事によって全く別の構築フローが紹介されていたりします。 （情報を調べ始めた当初はなかなか困惑しました…笑。） そこで本記事では、私

本記事は、ヘッドレスコマースサイトの実装解説、第二回です。 第一回をお読みでない方は、こちらからご確認ください:) こんにちは、エンジニアの川島です。 前回の解説記事投稿から三週間ほど経ちましたが、皆様いかがお過ごしでしょうか。 私は三月下旬からリモートワークに移行し、自宅より本記事を執筆しています。以前から週に一度はリモートで勤務していたので、業務環境そのものは整っているのですが、二週間以上ぶっ通しで続くとなかなか大変ですね……。オフィスでのちょっとした雑談が、コーディングにかなり役立っていたのだなぁと感じています。 さて、前回の記事では、ヘッドレスコマースサイトの実装環境を構築しました。 さっそく実装……といきたいところですが、本記事では、実装着手前に検討しておくべきポイントをまず解説します。ECサイトのWebデザインについても、補足的に言及しています。 本工程を飛ばして実装に入ると、

このリニューアルで、ヘッドレスコマース構築に関する多くの知見が得られました。 ヘッドレスコマース構築のメリットとデメリット、技術スタックについては、弊社代表の高崎が以下の解説記事を公開しています。 高速、セキュア、スケーラブルな次世代EC技術「ヘッドレスコマース」でShopifyサイトを作っての学び 記事内でも言及されているように、2020年3月現在、ヘッドレスコマース構築の日本語情報はまだあまり多くありません。 そこで本特集では、実装に携わったエンジニアの立場から、ヘッドレスコマース構築の概要と、実装時に躓きがちなポイントを、連載形式でお伝えしてゆきたいと思います:) ヘッドレスコマース構築の情報を探している方の一助となれば幸いです。 連載内容は下記を予定しています。 第一回：イントロダクションと環境構築　※本記事です 第二回：ヘッドレス実装前に検討すべきこと、ECサイトのWebデザイン

こんにちは。代表兼CTOの高崎です。 この前、自社運営の出版レーベルのECを高速、セキュア、スケーラブルな次世代EC技術「ヘッドレスコマース」形式でリニューアルしました。 ヘッドレスコマースとは 海外のD2Cと呼ばれるテクノロジーを重視した製造小売で標準となっている次世代型のEC技術で、 データ（バックエンド）とデザイン（フロントエンド）の分離が特徴的なECサイトの作りです。 メリット 1.高速 以下は海外ECサイトがヘッドレス化する前と後で速度がどのように変わったかの例です。 左がShopifyを使ってヘッドレス化したサイトの映像で、右が旧来のECサイトです。 ご覧いただければスピードの差が一目瞭然かと思いますが、「サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する。」と言われる通り、高速であることはECサイトの売上に直結します。 また、高速なサ

ShopifyのInstagramフィード表示方法が変わります。API変更（2020.3.31）以降の代替アプリ導入手順をご紹介 2月28日追記 Instagramの旧API廃止は、以前アナウンスされていた2020年3月2日から、3月31日に延期されました。 https://developers.facebook.com/blog/post/2019/10/15/launch-instagram-basic-display-api/ February 20, 2020 Update: To provide you with more time to make changes, we will now be shutting down the Instagram Legacy API Platform on March 31, 2020 instead of March 2, 2020 as

こんにちは、エンジニアの川島です。 前回の記事にて、Shopifyのテスト環境構築についてご紹介しましたが、Shopify開発において特に悩ましいのが各環境の同期とバージョン管理ではないでしょうか。 管理画面上のコードエディタ・テーマエディタから誰でも編集できること、そしてTheme Kitのdeploy機能でShopifyサーバーへ容易にファイルを反映できることは、長所でもあるのですが、複数人で開発を行う場合には先祖返りのリスクにもなります。 そこで本記事では、複数人でのShopifyテーマ開発を安全に進めるために、私たちが行っているバージョン管理の工夫について、ご紹介したいと思います。 ※本記事では下記を前提とします。 Shopifyストアの管理画面にアクセスできる Shopifyテーマ開発において、本番環境に加えテスト環境を利用している Shopify Theme Kitをインストー

こんにちは、アートディレクターの佐藤です。 このたび、Shopifyサイトのテーマ開発・デザインをする際に役立つ、Adobe XDワイヤーフレームキットを作成しましたので、無償配布します。 Shopify未経験の方がオリジナルテーマをデザインする際に、テーマ構造を把握する意味でも役立つかと思います。

Shopifyテーマの基本構造 Theme Kitを利用して新規テーマを作成すると、内部構造は下記のようになっています（2019年10月現在）。 Shopifyテーマに必要最低限なファイルで構築されているため、オリジナルのテーマ作成時は、これらのファイルを足掛かりとして開発を進めてゆきます。 なお、Theme Kitの作成内容には含まれていないものの、一般的なテーマではsectionsディレクトリやsnippetsディレクトリも利用する機会が多いため、手動で追加しておくと良いでしょう。 theme ├assets/ ｜├application.js ｜└application.css.liquid ├config/ ｜├settings_data.json ｜└settings_schema.json ├layout/ ｜└theme.liquid ├（sections/ ※自身で追加する

Shopifyテーマカスタマイズの始め方。ローカル構築〜複数環境への反映まで【2021春Update】 こんにちは、エンジニアの川島です。技術記事ではお久しぶりですね:) 私たちの会社では、現在、Shopifyを活用したECサイトのコンサルティング＆開発案件を多く進めています。 「Shopify」って？　という方は、弊社代表の高崎と、デザイナー佐藤による、Shopify解説記事もぜひ合わせてご覧くださいませ。 マーケター＆エンジニア視点から見たShopify導入のメリット デザイナー視点でみる「Shopify」：デザインのカスタマイズでできることと留意点 Shopifyは世界175カ国80万店舗以上に利用されているECプラットフォーム（※2019年2月時点）ですが、日本法人立ち上げから2年経っていないこともあり、開発者向けの日本語情報はまだまだ少ないです。 本記事では、Shopify開発を

こんにちは。アートディレクターの佐藤です。 先日、Googleの旅行プランニングツール「Googleトラベル」のPC版がリリースされました。個人的に旅行の計画を立てていたので使ってみたところ、こういうの欲しかった！と思える秀逸なサービスでした。 新しくなったGoogleトラベル（PC版）で旅行の計画立ててるんだけど正直便利すぎる。 リアルタイムに情報更新されるガイドブックに、予約ボタンが付いた感じ。 行き先を迷ってる段階でも、世界地図見ながらフライトの料金比較できるので、色んな所に行きたくなる秀逸なUX。https://t.co/4bpPQrs5rN pic.twitter.com/r9laYJp4t8 — 佐藤昭太 / non-standard world (@shotasato_nsw) 2019年6月5日 Googleトラベルは、フライト／ホテル／観光スポット／レストランのリサーチか

こんにちは。エンジニアの川島です。 先日から、弊社ではマーケティング支援ツールであるHubSpot（Starterプラン）の利用をはじめました。 HubSpotの特徴と機能、導入して感じた実務上のメリットとデメリット、導入前に知りたかったことを、まとめてお伝えします:) HubSpotとは HubSpotとは、web上のマーケティングプロセス（集客・接客・追客）をワンストップで行うことができるwebサービスです。 インバウンドマーケティング*の支援に特化したツールなので、オウンドメディアやSNSでコンテンツを発信している企業であれば、よりHubSpotを活用することができます。

こんにちは、CSR広報の大浦です。 ウェブサイトを作りたいけれど、お金がかかりそう……そんな悩みをもっている方にお知らせです。9月12日から第三次公募がスタートした、IT導入補助金についてご存知ですか？ 当社では、ウェブサイト制作をご依頼いただいく場合、IT導入補助金の制度を使っていただくことが可能です。それに加え、申請のお手伝いもさせていただいていますので、まとめた情報をお届けします。 IT導入補助金とは？ 中小企業・小規模事業者等がITツール（ソフトウエア、サービス等）を導入する経費の一部を補助することで、中小企業・小規模事業者等の生産性の向上を図ることを目的とされた補助金です。 対象となる経費区分はソフトウェア、クラウド利用費、導入関連経費等。下限額は15万〜上限額は50万円、補助率は1/2です。 （例）総額50万円の案件の場合、25万円が補助対象。 URL：https://www.

zipファイルがあれば3分！ Local by Flywheelで既存サイトをさくっとインポートする方法 こんにちは。エンジニアの川島です。 WordPressのサイト作成において、なかなか厄介なのがローカル環境の構築ではないでしょうか。特に既存サイトでは、設定や固定ページの内容を揃えたりと、新規サイトの環境構築よりも必要な手間が多くなります。 とはいえ、転職や異動などで新しいチームに加わった場合、環境構築が必要なのは既存サイトであることがほとんど。一つ一つに時間を掛けていたら大変です……。 そこで、ノンスタでは、WordPressのローカル環境構築にLocal by Flywheelというツールを利用しています。 Local by Flywheelが使いやすいことに加え、既存サイトのインポートが容易であることがその理由です。 本記事では、Local by Flywheelで既存サイトをイ

こんにちは、non-standard worldの佐藤です。 WordPressで構築したサイトで「問い合わせフォーム」を設置している場合、メールの送信方式についてデフォルトの方式を利用していませんか？ 実はこの方式、メールがユーザー側で「迷惑メールフォルダ」に振り分けられしまう可能性がある方式なのです。もしかすると、フォーム送信完了時にユーザー側に送られる「自動返信メール」が不達になっているかもしれないので、注意が必要です。 デフォルトの方式でメールの不達が発生する理由 デフォルトのメール送信方式は、php mail()関数（Sendmail）という方式ですが、この場合、メール受信側のサーバーによっては「送信元を偽装した不正なメール」として認識され、迷惑メールフォルダに入ってしまう可能性が出てくるのです。 メール送信方式は「SMTP方式」に このような不達問題を防ぐためには、メール送信方

こんにちは、エンジニアの高崎です。 Nuxt.jsとFirebaseを使って簡単なメモを取るWEBサービスを作るこの特集、前回は導入のためのセットアップをしました。今回はNuxt.jsとFirebase Authentication（ログイン認証）を使ってGoogleアカウントでログインする機能を実装します。 Googleのログイン認証を有効にする １．Firebaseのコンソールにログインします。 ２．プロジェクトを選択し、表示されるトップページの赤枠をクリックします。 3.Nuxt.jsのプロジェクトをフォルダに戻って/pluginsフォルダの中に下記のようなfirebase.jsを作ります。 4.２の画面で表示される画面を参考にapiKey〜messagingSenderIdまでをご自身のプロジェクトのものに変更します。 apiKey: "ここにAPIキーが入ります", authDo

こんにちは、non-standard worldの佐藤です。 WordPressは、2018年リリースのバージョン5.0より、投稿・固定ページ編集画面のデザインが大きく変わりました。新しいデザインのエディターの名前は「Gutenberg（グーテンベルグ）」。 大幅なデザイン変更のため、驚かれるWeb担当者さんも多いはず。 ということで、今日は新エディターの特長や注意点について、見ていきたいと思います。 早速、旧エディターと新エディター「Gutenberg」を並べて見てみましょう。 どうでしょうか？かなりシンプルなUIデザインに変更されています。 大きな特長は「ブロック」という新機能。本文入力欄で、段落や見出し、画像など様々なコンテンツを、ブロック単位で直感的に追加、並び変えができるようになります。リッチなレイアウトの投稿や固定ページの作成を簡単にする、という狙いで開発されたとのこと。 その

静的なWebサイトを無料・独自ドメイン、常時SSLでgoogleのクラウド「Firebase」に公開する方法 こんにちは、エンジニアの高崎です。 Twitterで以下のようにつぶやいたところ、 Googleのクラウドサービス「Firebase」を使うとWebサイトを「無料で、独自ドメイン使用可能、SSL証明書付きでhttp/2のCDN付きの超高速な環境」にホスティングでき、更新も更新したファイルを一々FTPで上げることなくコマンド一発で上げることができる。最高かよw。 https://t.co/TqYUSFVmgd — 高崎健司 / non-standard world (@nplusone) 2018年7月30日 思いかけず反響をたくさん頂いたので、具体的な方法を記事にしたいと思います。 Firebaseって？ Googleの提供するクラウドサービス。サーバーレスと呼ばれ、サーバーやデー

こんにちは。エンジニアの高崎です。 突然ですが、Webサービスをもっと気軽に作れたらいいのになと思ったことはありませんか？ 本格的にWebサービス構築の投資をする前に、需要確認のための動くプロトタイプを作りたい フルスクラッチで作るほどの予算はないんだけど、Webサイトにちょっとした会員限定機能をつけたい など、私達のクライアント様にもそのような課題を抱えている方がたくさんいます。調査した結果、そんな場合の最適解が「Nuxt.js」というフロントエンドのフレームワークと「Firebase」というGoogleが提供しているクラウドサービスを組み合わせて作ることでした。 この記事では「Nuxt.jsとFirebaseを使って簡単なWebサービスを作る」と題して、ハンズオンで簡単なノートを取るWebサービスを作る方法をお送りしたいと思います。 Nuxt.jsって？ SPA＊フレームワーク。Vue

DeployBotとは gitリポジトリと連携し、pushされたファイルを指定サーバーに公開（デプロイ）してくれるサービスです。 特徴は下記のとおり。DeployBot公式サイトはこちらです。 git pushされたファイルを、自動もしくは管理者の承認で、指定サーバーにデプロイする デプロイ後、ワンクリックで以前の状態に戻すことができる デプロイ時のエラー有無を、チャットツールに通知してくれる 本番環境、テスト環境ごとに異なるブランチを紐づけられるので、開発を進めやすい 1リポジトリまでは無料。最安利用プランは15ドルから DeployBotの設定画面紹介 各リポジトリは、DeployBotでは下記のように表示されます。 本番とテスト環境を別々に作成することができ、設定も分けられます。ノンスタでは、テスト環境は完全自動デプロイ、本番環境は管理者がワンクリックで承認してデプロイしています。

XDのデザインファイルとデザインスペック共有リンクを受け取り、（起動時の軽さに感動しながら）開く デザイン意図、レスポンシブ調整、アニメーションなどに関して、デザイナーとコミュニケーションを行う XD上で各画像を規約どおりに命名し、書き出し、圧縮する ブラウザ上のデザインスペックを参照しながらコーディングを行う。要素を選択すれば必要な情報が表示されるため、こちらで計測するものはあまりない デザインに修正があった場合は、デザインスペックを更新してもらう デザインスペックのおかげで、XD導入後は、デザインどおりの実装がぐんと作りやすくなりました。加えてXDは軽いので、MacBook環境で作業を行うときでもストレスを感じません。 エンジニアの強い味方。デザインスペック（β版） 上記工程で触れた「デザインスペック」について、もう少しご紹介します。 XDといえば、簡単にモックアップが作成できるプロト

こんにちは。代表の高崎です。 私達の会社では半年前からチームで知的生産物を作るためのチーム術「スクラム」という仕組みを取り入れて仕事しています。 スクラムはもともとはソフトウェア開発のために生まれましたが、「チームで働くこと」に悩んでる全ての人に有効だと思っています。 私自身も今までのキャリアで人に雇われる側、人を雇う側、プロジェクトを発注する側、受注する側と色んな立場で仕事してきて、育って来た環境も違えば、背負っている利害、正しいと信じているものも違う大人同士が、チームで働くことの難しさを痛感してきましたが、その経験からこの「スクラム」という枠組みがメンバーの自主性を尊重しながら組織として一つの目標に向かっていくための最適解だと感じています。 この記事では、そんなスクラムについての解説と、導入したい人のための導入マニュアルをお送りしたいと思います。 また、なるべく専門用語は平易な言葉に置

こんにちは。スタッフの川島です。 ここ数年で、動画コンテンツを大胆に使ったコーポレートサイトやランディングページが随分と増えましたね。本記事をお読みのみなさまも、きっとどこかで、動画を使ったWebサイトを目にしたことがあるのではないかと思います。 実は先日から、ノンスタのWebサイトでもトップページの背景に動画を表示するようになりました。その際、スマートフォンからアクセスしても、再生可能な環境ならば背景動画が自動再生されるように実装しています。 スマートフォンでの動画自動再生が可能になってからまだ一年と少しということもあり、情報をお探しの方向けに、実装時の知見を本記事にまとめてみました。 コンテンツ企画を行うディレクターさんや、実装例を探しているエンジニアの方の一助になれば幸いです。 目次 - 概要 - スマートフォンと動画コンテンツの関連について - Webサイトで動画コンテンツを使うと

OGP（Open Graph Protocol）は、FacebookやTwitterなどのSNS上で、外部サイトの情報を表示するための規格です。 これがきちんと設定されていることで、SNS上で外部サイトのURLがシェアされた時、そのサイト（ページ）の情報が、サムネール画像付きで表示されます。 SNSからのサイト流入が増えている昨今、OGPをきちんと設定しておくことはとても重要。今日は、サイトのOGPがきちんと設定されているか、確認する方法をご紹介します。 Facebookデバッガー使用を使用して、OGP設定を確認 Facebookデバッガーとは、OGP情報が正しく設定されているかを確認できる、Facebook公式のツールです。このツールを利用して、OGP設定を確認していきます。 Facebookデバッガー の使い方 1. Facebookデバッガーにアクセスします。 ＊このツールを使用する

お花のある暮らしを提案する、 ARTE-flower&others-のウェブサイトを制作しました。 テーマは「日常を自然のアートと共に楽しむ。 そんな楽しみを提案できるECサイト」。 花屋の店主が書き留めた、日記を眺めているような。 道端に咲く花を、じっくり見つめたくなるような。 「お元気ですか？」と、誰かに花を贈りたくなるような。 そんな気持ちがじんわり沸き上がってくる “居心地”を作り出すことを目指しました。 イラストは、天野佐江華さんが描いた、 柔らかな表情をした花と植物たちの水彩画。 それらは、花と植物という存在が まさに“ARTE”（イタリア語で芸術という意味）で あることを伝えてくれています。 季節の花の話を聞きながら、 のんびりと美しい植物を眺めて、お買い物もできる、 ここは自然というアートを楽しむお花屋さん。 ぜひ、ふらりとお立ち寄りください。 URL: http://ar

「WEBサイトを作りたいけれど、お金がかかるから作れない。」そんな悩みをもっている方へ。小さな会社や個人がWEBサイトをつくるためにもらえる補助金の話。 ※2017年7月、IT導入補助金について追記。 ※2018年7月、URLを最新のものに更新。 「WEBサイトを作りたいけれど、お金がかかるから作れない。」そんな悩みをもっている方に、ぜひお伝えしたいのが、小さな会社や個人がWEBサイトをつくるためにもらえる補助金について。今日はこれまで事例のあった補助金や情報収集方法についてご紹介したいと思います。 全国向けに配布している補助金 小規模事業者持続化補助金 URL：http://h29.jizokukahojokin.info この補助金は、小規模事業者が、商工会議所・商工会の助言等を受けて経営計画を作成し、その計画に沿って販路開拓に取り組む費用の2／3が補助されます。補助上限額は５０万円。