Evlopには強力なノーコードブロックが標準搭載されています。さらに特定のニーズがある場合は、独自のカスタムブロックを追加できます。スキルやユースケースに合わせて、アプリ内で動作するReact Nativeブロック、またはHTML・CSS・JS・Tailwind・Liquidで構築しWebViewで表示するHTMLブロックのいずれかを選択できます。
1) React Nativeでカスタムブロックを作成する
概要
React Nativeブロックはネイティブアプリの一部として動作します。滑らかなUI、ジェスチャー、アニメーション、オフライン動作、デバイス機能の活用に最適です。
利用できるもの
- 統一感のあるUIプリミティブには
@evlop/native-component - 商品、コレクション、カート、メタフィールド、メタオブジェクト、顧客などのストアデータへのアクセスには
@evlop/shopify - カスタムブロックエディターの
package.jsonに記載されているすべてのnpmパッケージをインポートして使用可能
この方法がおすすめのケース
- 高いパフォーマンスや複雑なインタラクションが必要な場合
- ネイティブのナビゲーションやデバイスAPIを利用したい場合
- データのキャッシュや不安定なネットワークへの対応が必要な場合
実践的なヒント
- ブロック設定をシンプルかつシリアライズ可能に保つ
- バンドルサイズ管理のため、依存関係は選択的に
- ホーム、商品、コレクション画面でテストする
- アクセシビリティ、ロード、空状態を検証する
2) HTMLでカスタムブロックを作成
What it is
HTMLブロックはWebView内で動作します。HTML、CSS、JS、Tailwind、Liquidを使用して高速に反復開発できます。
Data and limits
- Liquidを使って、アクティブな商品やコレクションなどShopifyのコンテキストにアクセスする
- このコンテキストでは顧客情報は利用できません
Navigation
- 対応するアプリ画面がある場合、Evlopウェブブリッジはプレーンな
<a href>リンクをネイティブナビゲーションに変換します
When to choose this
- 頻繁に変更されるマーケティングや編集コンテンツ
- 商品やコレクションの詳細を表示する軽量ウィジェット
- TailwindとシンプルなJavaScriptを好むチーム
Practical tips
- Tailwindユーティリティでモバイルファーストに設計
- スクリプトは軽く保ち、重いフレームワークは避ける
- 標準のアンカーを使用し、ウェブブリッジがネイティブにルーティングできるようにする
- コントラスト、間隔、ロード時間を確認する
まとめ
Custom blocks lets you tailor the app to your store without reinventing the wheel. Choose React Native for performance and deep integration, or HTML for speed and content-driven widgets.