Mixing It Up: Remix Joins Shopify to Push the Web Forward
Opens in a new windowOpens an external siteOpens an external site in a new window We are very excited to announce that the open-source web framework Remix and its team are joining Shopify. Why? The web is always evolving—and we’re entering a new era. First, we had the document web, and then we sprinkled in richer interactivity. Most recently, we entered the world of single page apps. We’ve learned
Bringing Javascript to WebAssembly for Shopify Functions
Opens in a new windowOpens an external siteOpens an external site in a new window At Winter Editions 2023 we announced a Local Developer Preview for JavaScript for Shopify Functions. That means that we’re adding JavaScript right next to Rust as our first-class languages for Shopify Functions (but you can still use anything that compiles to WebAssembly!). While you can’t deploy a Shopify Function w
Rails 7.1正式リリース。本番デプロイ用のDockerfile自動生成、遅いクエリの非同期化など新機能 Ruby言語によるWebアプリケーションフレームワークの最新版となる「Rails 7.1」正式版がリリースされました。 Rails 7.1: Dockerfiles, BYO Authentication, More Async Queries, and more!https://t.co/c32MdUifNs — Ruby on Rails (@rails) October 5, 2023 メジャーバージョンアップとなったRails 7の登場が2021年12月。 Rails 7は、フロントエンド開発環境が刷新されてNode.jsを用いない構成がデフォルトとなり、TurboとStimulusという2つのフレームワークを搭載したHotwireなどが搭載されるなど、大型のアップデートで
Shopifyサイトのデザイン作業を大幅に効率化！Adobe XDワイヤーフレームキットを無償配布します | non-standard world株式会社
こんにちは、アートディレクターの佐藤です。 このたび、Shopifyサイトのテーマ開発・デザインをする際に役立つ、Adobe XDワイヤーフレームキットを作成しましたので、無償配布します。 Shopify未経験の方がオリジナルテーマをデザインする際に、テーマ構造を把握する意味でも役立つかと思います。
GitHub - Shopify/hydrogen: Hydrogen is Shopify’s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications. Hydrogen is designed to dovetail with Remix, Shopify
Hydrogen is Shopify’s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications. Hydrogen is designed to dovetail with Remix, Shopify’s full stack web framework, but it also provides a React library portable to other supporting frameworks. Demo store 👇🏼
GitHub - backstage/backstage: Backstage is an open platform for building developer portals
Backstage is an open source framework for building developer portals. Powered by a centralized software catalog, Backstage restores order to your microservices and infrastructure and enables your product teams to ship high-quality code quickly without compromising autonomy. Backstage unifies all your infrastructure tooling, services, and documentation to create a streamlined development environmen
From Ruby to Node: Overhauling Shopify’s CLI for a Better Developer Experience
Opens in a new windowOpens an external siteOpens an external site in a new window The Shopify CLI (command line interface) is an essential tool for developers when building and deploying Themes, Apps, Hydrogen storefronts on the Shopify platform. It provides workflows to create new projects that follow best practices, integrate with the platform during development, and distribute the production ar
Opens in a new windowOpens an external siteOpens an external site in a new window Shopify is continuing to invest on Ruby on Rails at scale. We’ve taken that further recently by funding high-profile academics to focus their work towards Ruby and the needs of the Ruby community. Over the past year we have given nearly half a million dollars in gifts to influential researchers that we trust to make
Opens in a new windowOpens an external siteOpens an external site in a new window Shopify builds internet infrastructure for commerce to serve the needs of millions of merchants. Doing that requires building both flexible business logic and robust, high-performance systems. In addition to our commitment to Ruby for its flexibility and expressiveness, we have recently adopted Rust as our official s
TechCrunch
Whether you love or hate celebrity culture, the Met Gala is an event. Those less jaded among us get to see all of the biggest stars take their boldest fashion risks of the year; unlike an award show,
Opens in a new windowOpens an external siteOpens an external site in a new window Developers write tests to ensure correctness and allow future changes to be made safely. However, as the number of features grows, so does the number of tests. Tests are a double-edged sword. On one hand, well-written ones catch bugs and maintain a program’s stability, but as the code base grows, a high number of tes
Under Deconstruction: The State of Shopify’s Monolith
Opens in a new windowOpens an external siteOpens an external site in a new window Ruby on Rails is a great framework for rapidly building beautiful web applications that users and developers love. But if an application is successful, there’s usually continued investment, resulting in additional features and increased overall system complexity. Shopify’s core monolith has over 2.8 million lines of
Today we are excited to share that Remix has joined forces with Shopify! Shopify has been a long-time supporter of open source projects that push the web and commerce forward, and this pairing continues that tradition. It’s also great news for Remix, our community, our partners, and anyone who’s excited about building for the web. Remix adoption is growing at an incredible rate, and we regularly h
アソビューAdvent Calendar 2022の12日目のブログです。 本日の裏面はこちらになります。 tech.asoview.co.jp こんにちは！ アソビューでフロントエンドエンジニアをしている野口です。 今回は、Shopifyのテーマ上でReactのコンポーネントを描画する調査をしたのでその内容を紹介していきます。 はじめに 弊社では、アソビュー！に掲載されている遊びの中から厳選した体験を、家族や友人にプレゼントできるアソビュー！ギフトというサービスも展開しています。 そのアソビュー！ギフトはShopifyを利用してECサイトを構築しており、テーマはDawnを使っています。 アソビュー！ギフトのトップページ 今回、一部機能においてアソビューで管理している別のアプリケーションから情報を取得したいという要望が出てきました。 UIもテーマのスタイルを利用するのではなく独自でstyl
小売業者に電子商取引（EC）システムを提供するカナダのショッピファイが急成長している。2020年12月期の増収率は8割を超え、上場後初の営業黒字も達成した。19年末からの時価総額の伸びは3倍と米アマゾン・ドット・コムの1.7倍を大きく上回り、「アマゾンキラー」とも呼ばれる。躍進の秘訣を探ると、運転資金の融資といった金融サービスで稼ぐもう一つの側面がみえてくる。ショッピファイの20年12月期の連
最短1週間で販売開始して最速で売上向上を目指せる！ストア構築込みのスタートダッシュパッケージ「Growth Dash」をリリース
最短1週間で販売開始して最速で売上向上を目指せる！ストア構築込みのスタートダッシュパッケージ「Growth Dash」をリリース「Growth Dash」は、グロース施策に必要な機能が実装されたShopifyストアを最短1週間で構築し、グロース管理プラットフォームとグロースプログラムを活用して、最速での成長を目指すプランです。 「世界中のコマース事業者をヒーローにすること」をミッションに掲げShopify特化グロース支援サービスを提供する株式会社StoreHero（本社：東京都渋谷区、代表取締役：黒瀬淳一、以下StoreHero）は、Shopifyマーチャントの時間と予算をグロース施策に集中させ、最速での成長を目指すべく、ストア構築込みのスタートダッシュパッケージ「Growth Dash」の提供を開始しました。 Growth Dashとは Growth Dashは、グロース施策に必要な機能
We’ve open sourced shopify-ruby-definitions, which contains definitions to build the Ruby we use at Shopify in development, testing, and production. Our builds of Ruby are API compliant with the vanilla Rubies, but with additional bug fixes and performance improvements we’ve backported from the next major version. Why we use custom builds of Ruby Shopify has one of the largest and highest traffic
Year in Review 2022: Tenderlove's Ruby and Rails Reflections and Predictions
Opens in a new windowOpens an external siteOpens an external site in a new window Hi everyone! How are you doing? It's me, Aaron (some people know me on the internet as Tenderlove)! I hope you're doing well. ❤️ Since we're coming up on the end of the year, I thought it might be a good idea to take a moment to reflect on cool stuff that's happened or is happening in the Ruby community right now. Ac
Shopifyに様々な独自機能やデザインを組み込めるShopifyアプリとShopifyテーマ。この記事はそんなShopifyアプリとテーマの開発に必要な基本情報と役に立つTIPSを日本の開発者向けにまとめたものです。初心者の方からすでに開発に着手されている方にまで必要な情報を簡単に幅広く網羅してあります。全ての情報は公式サイト（英語）に記載されています。 アプリ開発 テーマ開発 カスタムストアフロント（旧ヘッドレスコマース） マーケットプレイス（モールなどの外部の販売場所の構築） APIドキュメント アプリ開発の流れ アプリ開発の基本的な流れは以下になります。 [パートナーアカウントの登録] > [開発ストアの追加] > [アプリの作成と資格情報の取得] > [開発ストアへのインストール] > [APIを使った処理の作成] > [Polarisを使ったUIの作成] >（埋め込みアプリにし
Ruby Style Guide Ruby is the main language at Shopify. We are primarily a Ruby shop and we are probably one of the largest out there. Ruby is the go-to language for new web projects and scripting. We expect all developers at Shopify to have at least a passing understanding of Ruby. It's a great language. It will make you a better developer no matter what you work in day to day. What follows is a l
TechCrunch
The savvy marketers at Boston Dynamics produced two major robotics news cycles last week. The larger of the two was, naturally, the electric Atlas announcement. As I write this, the sub-40 second vide
. ├── Makefile configuration to compile the shared library and native tests ├── Rakefile configuration to compile the native extension and run the Ruby tests ├── bin │ ├── lex runs the lexer on a file or string, prints the tokens, and compares to ripper │ ├── parse runs the parse on a file or string and prints the AST │ └── prism a CLI for development and debugging ├── config.yml specificati
はじめにこんにちは、HushTug COOの髙橋です。 このパートでは検索で流入してくるユーザーのCVRを0.78%(測定期間：7月1日〜14日)から2.02％(11月1日〜14日)まで上げた方法を解説します。 ECサイトのCVRを上げることが出来れば同じPV数でもより効率よく売上を伸ばすことが出来るため、 ①広告の費用対効果が向上し、 ②利益を更に広告に投資し、 ③更に売上を伸ばす という、最高のサイクルに入ることが出来るようになります。 逆にいえばCVRが低い状態だと貴重な資金をドブに捨ててるのと同じなので、広告をガッツリかける前に必ずCVRの向上施策に取り組みましょう。 (※PCで見た画面を中心に解説を進めますが、SPへの最適化も同じような考え方で実践しています。PC版の方が見やすいかと思いこちらを採用しました) 全体的に意識したことは主に2つ・実物を見て吟味したかのような納得感をE
Over the last year, I’ve been working on a new Ruby application server called Pitchfork. In most regards it’s extremely similar to the venerable Unicorn, from which it originates, but with one major extra feature: Reforking, which reduce memory usage of Ruby applications. For most of last year, we couldn’t enable reforking on our application because of an incompatibility with one of our dependenci
高速、セキュア、スケーラブルな次世代EC技術「ヘッドレスコマース」でShopifyサイトを作っての学び | non-standard world株式会社
こんにちは。代表兼CTOの高崎です。 この前、自社運営の出版レーベルのECを高速、セキュア、スケーラブルな次世代EC技術「ヘッドレスコマース」形式でリニューアルしました。 ヘッドレスコマースとは 海外のD2Cと呼ばれるテクノロジーを重視した製造小売で標準となっている次世代型のEC技術で、 データ（バックエンド）とデザイン（フロントエンド）の分離が特徴的なECサイトの作りです。 メリット 1.高速 以下は海外ECサイトがヘッドレス化する前と後で速度がどのように変わったかの例です。 左がShopifyを使ってヘッドレス化したサイトの映像で、右が旧来のECサイトです。 ご覧いただければスピードの差が一目瞭然かと思いますが、「サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する。」と言われる通り、高速であることはECサイトの売上に直結します。 また、高速なサ
Shopifyテーマの構造解説。各ディレクトリとファイルの役割を知る | non-standard world株式会社
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/ ※自身で追加する
GitHub - Shopify/ruby-lsp: An opinionated language server for Ruby
The Ruby LSP is an implementation of the language server protocol for Ruby, used to improve rich features in editors. It is a part of a wider goal to provide a state-of-the-art experience to Ruby developers using modern standards for cross-editor features, documentation and debugging. Want to discuss Ruby developer experience? Consider joining the public Ruby DX Slack workspace. The Ruby LSP featu
ShopifyとGatsbyJSでヘッドレスコマースサイトを作る方法 | non-standard world株式会社
こんにちは、代表兼エンジニアの高崎です。 寒くなってまいりましたが、皆様お体の調子は大丈夫でしょうか。 私達の会社では「世界観を作ってモノが売れるを、すべての人へ。」をミッションに主に製造小売のお客様のECサイトを制作しているのですが、現在、高速で開発効率の高い次世代のECサイトの作り方「ヘッドレスコマース�」を研究しています。 この記事では基本を共有できればと思います。 ヘッドレスコマースとは 従来型のECサイトが「デザイン（フロントエンド）」と「データ（バックエンド）」が一体化していたのに対し、ヘッドレスコマースは、「デザイン」と「データ」がきれいに分離したコマースサイトの作りです。 ヘッドレスを採用する理由 主にサイトの動作速度と開発効率を上げることができることから海外のD2Cブランドのサイトで採用が進んでいます。 とくにサイトの表示速度が２秒遅くなるだけで直帰率は50%増加すると言
Is my host fast yet?
Real-world server response (Time to First Byte) latencies, as experienced by real-world users navigating the web. Leaderboard: March 2024 Sort by Host Client Websites Fast (p75 < 800ms) Average Slow (p75 >= 1800ms) See a missing hosting provider? Please help us identify how to surface them here. How do you measure real-world Time to First Byte? This report is powered by Chrome User Experience Repo
短時間で大量注文が入っても落ちない強靭なサーバーを持つShopify コマースメディア株式会社 代表取締役／Shopifyエバンジェリスト 井澤孝宏さん 森野（運営堂） 今日は、ここ数年で急速に注目を集めているShopifyについてお聞きしたいと思います。まずは、Shopifyの強みについて教えてください。 井澤（コマースメディア） Shopifyの強みのひとつは、SEO設定の容易さです。これは私がShopifyを積極的に採用するきっかけにも大きく影響しています。トップページはもちろん、カテゴリーページ、商品ページというECサイトで最も重要な項目の設定画面で、ページタイトルやディスクリプションが個別に設定できるのです。WordPressで言うところの「All in One SEO Pack」の機能が入っているイメージですね。ECサイト運営でネックとなる重複ページのSEO対策についても、自動
この記事の所要時間：12分 Shopifyは、ノーコードのオンラインショップ構築サービスを提供しています。 また、Shopifyは外部開発者向けのAPIも提供しており、”アプリ”と呼ばれる拡張機能を開発できます。 shopify app storeには、Shopify APIを使った多様なアプリが一般に公開されています。 Shopifyが対象とする事業領域は複雑ですが、洗練されたAPIや、それを活用した多様なアプリによって、柔軟なニーズに応えています。 この記事では、Shopify GraphQL APIの設計から、5つの設計プラクティスを導きます。 各章の最後に、設計プラクティスが1つずつ書かれています。 コネクションとページネーション グラフ理論では、オブジェクトをNode(ノード)といい、オブジェクト同士のつながりをEdge(エッジ)といいます。 GraphQLでは、NodeとEdg
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（各種ナビゲーションカスタマイズ編） | ガリガリコード
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。 Swiperとはなんぞやという方はこちらをご参照ください。 というわけで、早速カスタマイズしてい … 投稿 サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（各種ナビゲーションカスタマイズ編） は ガリガリコード に最初に表示されました。
「shopify」でECサイトを制作したときの備忘録
最近「shopify」というサービスでECサイトを作る機会があったので、その時に調べたことや使ったテクニックを備忘録として記事にします。 何回かに分けて書いていきますので、気長に付き合ってください〜。 今回はやろうとしてできなかったこと、テーマファイルの構造などを書いていきたいと思います。 その他shopify関連記事はこちら shopifyの簡単な説明 カナダ発のECサービスで、世界175カ国で利用されている世界最大のECサービスです。詳しい説明は公式サイトをご確認ください shopifyで制作されている国内サイト例 ゴーゴーカレー 公式通販 【公式】tokyo grapher ｜iPhone用 高性能アタッチメントレンズ FUMIKODA 公式サイト＆オンラインブティック【フミコダ】 国内ECサービスと違って自由なデザインで制作されているように感じます。 テーマファイルの構造 shop
Opens in a new windowOpens an external siteOpens an external site in a new window During the past five years I’ve worked on a lot of different parts of Shopify’s payment infrastructure and helped onboard dozens of developers in one way or another. Some people came from different programming languages, others used Ruby before but were new to the payments space. What was mostly consistent among new
Shopifyテスト環境の構築方法。複製テーマおよび開発用ストアへのインポート手順まで | non-standard world株式会社
本記事は私達の会社で作ったShopifyテーマ開発入門書『Hello Shopify Themes Shopifyテーマ開発ガイド』からの抜粋です。 こんにちは、エンジニアの川島です。 Shopifyテーマ開発を行うにあたって、必要不可欠なのがテスト環境です。 Shopifyは（WordPressなどと異なり）ローカルサーバーを構築できないため、開発時の確認も基本的にはテスト環境で行います。 ただ、一口に「テスト環境」と言っても、Shopifyで構築できるテスト環境はひとつではありません。 ストア規模や開発体制によって適切なテスト環境が異なるため、「Shopify staging」や「Shopify development workflow」などで検索すると、記事によって全く別の構築フローが紹介されていたりします。 （情報を調べ始めた当初はなかなか困惑しました…笑。） そこで本記事では、私
GitHub - Shopify/ruvy
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ブランドの世界観が伝わるShopifyで構築されたハイクオリティなECサイト｜FRACTA ｜トータルブランディングパートナー
おはようございます、こんにちは、こんばんは。アートディレクター / デザイナーとして、先月FRACTAにジョインしました、間部と申します。 これまでのキャリアでは、BtoB企業の案件を中心にWebサイトを起点としたデジタル領域のブランディングを行ってきました。その知見を生かし、今回はFRACTAとは切っても切り離せない関係である、ECプラットフォーム "Shopify” の活用事例の中でも、特にブランドの世界観の作り込みが素晴らしいなと思ったWebサイトを中心に集めました。 最後までお付き合いいただけると嬉しいです。 BRANCHÉ CHOCOLAT | ブランシェ・ショコラhttps://branche-chocolat.jp/“食のリテラシーを磨く”をコンセプトに、カリナリープロデューサーとしても活動する薬師神陸シェフを起用した、カレ・オ・ショコラという、高級チョコレートスイーツブラン
Shopify×グロースに特化したスタートダッシュパッケージ Shopify×グロースに特化した スタートダッシュパッケージ グロースプラットフォームStoreHeroを活用し、 時間と予算をグロース戦略に集中させて最速での売上向上を実現します グロースプラットフォームStoreHeroを活用し、 時間と予算をグロース戦略に集中させて最速での売上向上を実現します StoreHero GrowthDashとは 最短１週間でグロースに必要な機能を備えたストアを構築し 立ち上げたその日から時間と予算をグロースに集中して 最速で売上向上を実現します
How Shopify Manages API Versioning and Breaking Changes
Opens in a new windowOpens an external siteOpens an external site in a new window Earlier this year I took the train from Ottawa to Toronto. While I was waiting in line in the main hall of the station, I noticed a police officer with a detection dog. The police officer was giving the dog plenty of time at each bag or person as they worked and weaved their way back and forth along the lines. The do
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails 7.1正式リリース。本番デプロイ用のDockerfile自動生成、遅いクエリの非同期化など新機能
Shopify Invests in Research for Ruby at Scale
Shopify Embraces Rust for Systems Programming
Spark Joy by Running Fewer Tests
Remixing Shopify
ShopifyテーマにReactのコンポーネントを描画する - asoview! Tech Blog
「アマゾンキラー」shopify、EC躍進のカギは金融にあり 秦野貫 - 日本経済新聞
Open Sourcing Shopify’s Ruby Builds
Shopifyアプリとテーマの開発方法 - Shopify 日本
Ruby Style Guide
「Shopify」のEC連携POS機能、「BASE」からの移行ツール、JCB・PayPay決済など新サービスまとめ | ネットショップ担当者フォーラム
GitHub - ruby/prism: Prism Ruby parser
ECサイトのCVR向上施策編｜HushTug College｜note
Effects of Pitchfork reforking on Shopify’s Monolith
Shopifyの強みって何ですか？ Shopifyエバンジェリストの井澤さんに聞いてみた
Shopifyに学ぶ！GraphQL API設計5つのポイント
10 Tips for Building Resilient Payment Systems
StoreHero GrowthDash - Shopify×グロースに特化したスタートダッシュパッケージ