2月 21, 2026

アプリデザインガイドラインの改訂版（2024年夏）

2月 21, 2026

アプリデザインガイドラインの改訂版 (2024年夏)

Shopifyのアプリ開発者の皆さま、Shopifyのアプリデザインガイドラインが改訂されました。新たな変更点を理解し、それをアプリ開発に役立てることで、よりユーザーフレンドリーなShopifyアプリを作成することが可能となります。

技術的課題と現状分析

以前のガイドラインでは、アプリのデザインや構造について多少の曖昧さがありました。特に、FullscreenBarの使用や文法の正確さ、Contextual Save Bar APIの適用、そしてサブスクリプションアプリの要件などが具体的には明示されていませんでした。

技術的ソリューションの提案

今回の改訂により、以下の4つの重要なガイドラインが明確にされました。

最大モーダル内でのFullscreenBarの使用は禁止とされました。FullscreenBarセクションは、もはやサポートされていないため、アプリデザインガイドラインから削除されました。
適切な文法の使用が「必須」とされました。
適用可能な場合、App BridgeのContextual Save Bar APIの使用が「必須」とされました。
サブスクリプションアプリに対する具体的な要件が新たに追加されました。

実装手順とコード例

App BridgeのContextual Save Bar APIを使うことで、ユーザーが行った変更を保存するためのコンテキストバーを提供することができます。以下はその実装例です。


import { ContextualSaveBar } from '@shopify/app-bridge/actions';

const saveBar = ContextualSaveBar.create(app, {
    message: 'Unsaved changes',
    saveAction: {
        onAction: () => console.log('Save button clicked'),
    },
    discardAction: {
        onAction: () => console.log('Discard button clicked'),
    },
});
saveBar.subscribe(ContextualSaveBar.Action.SAVE, () => console.log('Save button clicked'));
saveBar.subscribe(ContextualSaveBar.Action.DISCARD, () => console.log('Discard button clicked'));