{"_id":"5544d76bd8833c0d00582827","user":"552342f6e20da719000e7925","__v":2,"category":{"_id":"5544d76ad8833c0d00582804","__v":1,"pages":["5544d76bd8833c0d00582824","5544d76bd8833c0d00582825","5544d76bd8833c0d00582826","5544d76bd8833c0d00582827","5544d76bd8833c0d00582828","5544d76bd8833c0d00582829","5544d76bd8833c0d0058282a","5544d76bd8833c0d0058282b","5544d76bd8833c0d0058282c","5544d76bd8833c0d0058282d","5544d76bd8833c0d0058282e","5544d76bd8833c0d0058282f","5544d76bd8833c0d00582830","5544d76bd8833c0d00582831"],"project":"55227389b4a0de0d00de7e28","version":"5544d76ad8833c0d00582801","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-09T09:27:58.538Z","from_sync":false,"order":2,"slug":"_-1","title":"アドオン開発"},"version":{"_id":"5544d76ad8833c0d00582801","__v":1,"project":"55227389b4a0de0d00de7e28","forked_from":"55227389b4a0de0d00de7e2b","createdAt":"2015-05-02T13:55:54.059Z","releaseDate":"2015-05-02T13:55:54.059Z","categories":["5544d76ad8833c0d00582802","5544d76ad8833c0d00582803","5544d76ad8833c0d00582804","5544d76ad8833c0d00582805","5544d76ad8833c0d00582806"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"4.0.0","version":"4.0"},"project":"55227389b4a0de0d00de7e28","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-04-10T06:51:44.407Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"はじめに\"\n}\n[/block]\nそれぞれのアドオンは*app/addons *ディレクトリ内にアドオン専用のディレクトリがあります。\n\nアドオンの基本的な情報は*addon.xml*ファイルに記述されています。そのXML内に記述されているのは、アドオンのID（識別子）、プライオリティ（動作の優先順位）、バージョン、表示名などです。  \n基本的に、アドオンはこのXMLファイルのみで動作します。\n\n※これだけではアドオン一覧に表示されるだけでこのアドオンは何も機能は持っていません。\n\nこのようなアドオンはaddon.xml ファイルでの設定と翻訳を定義すると、言語設定をインストールすることができます。\n\nCS-Cartではアドオンを自由に作成することができるということを覚えておいてください。\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Hello, World!\"\n}\n[/block]\n- CS-Cartをインストールしたルートディレクトリから**app/addons**ディレクトリに移動します。\n- **hello_world**というディレクトリを作成し、そのディレクトリに移動して下さい。\n- このディレクトリがアドオンの専用のディレクトリとなります。\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"アドオンのディレクトリ名は、XMLファイルで定義したアドオンIDと同じであることが重要です。そうでないと、アドオンが正常にインストールされません。\",\n  \"title\": \"重要\"\n}\n[/block]\n前にも述べたように、アドオンの基本構造は*addon.xml* ファイルで定義されています。このファイルを作成してみましょう。  XMLファイルでは、いくつか基本的なアドオン属性を定義します：\n\n## addon.xml\n\n- **id** — アドオンの識別子。アドオンのディレクトリ名と同じでなければなりません。  今回の場合は**hello_world**として下さい。\n- **version** — このアドオンのバージョン。1.0に設定して下さい。\n- **priority** — 優先順位です。**100500**のように大きい数値を設定します\n- **default_language** — デフォルト言語\n\n> /app/addons/hello_world/addon.xml\n\n*addon.xml*ファイルは以下のようになるはずです：\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<?xml version=\\\"1.0\\\"?>\\n<addon scheme=\\\"3.0\\\">\\n   <id>hello_world</id>\\n   <version>1.0</version>\\n   <priority>100500</priority>\\n   <position>0</position>\\n   <status>active</status>\\n   <default_language>en</default_language>\\n   <auto_install>MULTIVENDOR,ULTIMATE</auto_install>\\n</addon>\",\n      \"language\": \"xml\"\n    }\n  ]\n}\n[/block]\n[ダウンロード](https://gist.github.com/cscartjp/9f30ea09fba187ee21e7)\n\n------------\n\n## 言語ファイル\n\n次に言語用のファイルを用意します。\n以下のディレクトリに次の内容のファイルを設置してください。  \n.poファイルについては [こちら](doc:languages-and-translations-by-po-file) をご確認ください。\n\n> /var/langs/en/addons/hello_world.po\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"msgid \\\"\\\"\\nmsgstr \\\"Project-Id-Version: tygh\\\"\\n\\\"Content-Type: text/plain; charset=UTF-8\\\\n\\\"\\n\\\"Language-Team: English\\\\n\\\"\\n\\\"Language: en_US\\\\n\\\"\\n\\nmsgctxt \\\"Addons::name::hello_world\\\"\\nmsgid \\\"Hello World\\\"\\nmsgstr \\\"Hello World\\\"\\n\\nmsgctxt \\\"Addons::description::hello_world\\\"\\nmsgid \\\"Say hello to the world.\\\"\\nmsgstr \\\"Say hello to the world.\\\"\",\n      \"language\": \"c\",\n      \"name\": \"英語の場合\"\n    },\n    {\n      \"code\": \"msgid \\\"\\\"\\nmsgstr \\\"Project-Id-Version: tygh\\\"\\n\\\"Content-Type: text/plain; charset=UTF-8\\\\n\\\"\\n\\\"Language-Team: Japanese\\\\n\\\"\\n\\\"Language: ja_JP\\\\n\\\"\\n\\nmsgctxt \\\"Addons::name::hello_world\\\"\\nmsgid \\\"Hello World\\\"\\nmsgstr \\\"ハローワールド\\\"\\n\\nmsgctxt \\\"Addons::description::hello_world\\\"\\nmsgid \\\"Say hello to the world.\\\"\\nmsgstr \\\"ハローワールド！\\\"\",\n      \"language\": \"c\",\n      \"name\": \"日本語の場合\"\n    }\n  ]\n}\n[/block]\n[ダウンロード](https://gist.github.com/cscartjp/38ac5da65439e62f20bc)\n\n\nアドオンをスタートするにはこれで十分です。\n\n管理パネルにログインし【**管理**】→【**アドオン**】→【**利用可能なすべてのアドオンを表示・タブ**】に切り替えます。\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/OjaUoUPQqOKMVtMFMOji_addons2.png\",\n        \"addons2.png\",\n        \"775\",\n        \"284\",\n        \"#7d462c\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n作成した*Hello World*アドオンがリストにあるはずです。\nインストール/アンインストールが可能となり、インストール後はアドオンを有効/無効を切り替えることが出来ます。\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"作成したアドオンがリスト（アドオン管理）に表示されていない場合は、CS-Cartのキャッシュをクリアする必要があるかもしれません。キャッシュをクリアする方法は、ブラウザのアドレスフィールドのURLの最後に`&cc&ctpl`を追加してページにアクセスします。\",\n  \"title\": \"ヒント\"\n}\n[/block]\n`scheme=\"3.0\"`というに注目してください。（CS-Cart v.4.2.4以降）\n\nこのパラメータが無いアドオンは非推奨のマークアップを使用していると見做されます。\nこのパラメーターが無いアドオンはいくつか存在していますが、下位互換が必要な場合のみで利用して下さい。\n\nでは、このアドオンに設定をいくつか追加してみましょう。\n\n*addon.xml* ファイルに`settings` セクションを作成します。\n各設定は、の*item*セクションで区切られています。\n\nそれぞれの*item*は*type*や*default_value*などの要素で指定します。\n\n*addon.xml*の`<priority>100500</priority>`の後に下記のような`settings`を書いてみましょう:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"   <settings edition_type=\\\"ROOT,ULT:VENDOR\\\">\\n        <sections>\\n            <section id=\\\"general\\\">\\n                <items>\\n                    <item id=\\\"some_prop\\\">\\n                        <type>input</type>\\n                        <default_value>Hello World!</default_value>\\n                    </item>\\n                    <item id=\\\"some_dropdown\\\">\\n                        <type>selectbox</type>\\n                        <default_value>blue</default_value>\\n                        <variants>\\n                            <item id=\\\"red\\\"></item>\\n                            <item id=\\\"green\\\"></item>\\n                            <item id=\\\"blue\\\"></item>\\n                        </variants>\\n                    </item>\\n                </items>\\n            </section>\\n        </sections>\\n    </settings>\",\n      \"language\": \"xml\"\n    }\n  ]\n}\n[/block]\n[ダウンロード](https://gist.github.com/cscartjp/ac2087e545ed3bdba18c)\n\n言語ファイル（.po）にも追記します。\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"msgctxt \\\"SettingsOptions::hello_world::some_prop\\\"\\nmsgid \\\"Some Prop\\\"\\nmsgstr \\\"Some Prop\\\"\\n\\nmsgctxt \\\"SettingsOptions::hello_world::some_dropdown\\\"\\nmsgid \\\"Some Dropdown\\\"\\nmsgstr \\\"Some Dropdown\\\"\\n\\nmsgctxt \\\"SettingsVariants::hello_world::some_dropdown::red\\\"\\nmsgid \\\"Red\\\"\\nmsgstr \\\"Red\\\"\\n\\nmsgctxt \\\"SettingsVariants::hello_world::some_dropdown::green\\\"\\nmsgid \\\"Green\\\"\\nmsgstr \\\"Green\\\"\\n\\nmsgctxt \\\"SettingsVariants::hello_world::some_dropdown::blue\\\"\\nmsgid \\\"Blue\\\"\\nmsgstr \\\"Blue\\\"\",\n      \"language\": \"c\"\n    }\n  ]\n}\n[/block]\n[ダウンロード](https://gist.github.com/cscartjp/255969b24ccd16e849f7)\n\n-------\n\nCS-Cart管理パネルのアドオン管理ページに行き、**Hello World**アドオンを再インストールします。（アンインストール＞インストール）\n\nリストからギアのアイコンをクリックして**設定**を表示します。\n\nそれをクリックすると、追加した設定があるアドオンの設定ダイアログが表示されます:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/wBU8JNKTASqa8ur2OCNZ_hwsetting.png\",\n        \"hwsetting.png\",\n        \"674\",\n        \"358\",\n        \"#1166c5\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n複雑なことではないですよね？\nしかし、このままでは特に何も機能するものでもありません。\n\n[次のチュートリアル](doc:advanced-add-on-tutorial) では、より複雑で有益なアドオンを作成します。","excerpt":"","slug":"hello-world-add-on-tutorial","type":"basic","title":"「Hello World」Addonチュートリアル"}

コア

API

アドオン開発

テーマ開発

開発者向けツール

「Hello World」Addonチュートリアル

[block:api-header] { "type": "basic", "title": "はじめに" } [/block] それぞれのアドオンは*app/addons *ディレクトリ内にアドオン専用のディレクトリがあります。 アドオンの基本的な情報は*addon.xml*ファイルに記述されています。そのXML内に記述されているのは、アドオンのID（識別子）、プライオリティ（動作の優先順位）、バージョン、表示名などです。 基本的に、アドオンはこのXMLファイルのみで動作します。 ※これだけではアドオン一覧に表示されるだけでこのアドオンは何も機能は持っていません。 このようなアドオンはaddon.xml ファイルでの設定と翻訳を定義すると、言語設定をインストールすることができます。 CS-Cartではアドオンを自由に作成することができるということを覚えておいてください。 [block:api-header] { "type": "basic", "title": "Hello, World!" } [/block] - CS-Cartをインストールしたルートディレクトリから**app/addons**ディレクトリに移動します。 - **hello_world**というディレクトリを作成し、そのディレクトリに移動して下さい。 - このディレクトリがアドオンの専用のディレクトリとなります。 [block:callout] { "type": "warning", "body": "アドオンのディレクトリ名は、XMLファイルで定義したアドオンIDと同じであることが重要です。そうでないと、アドオンが正常にインストールされません。", "title": "重要" } [/block] 前にも述べたように、アドオンの基本構造は*addon.xml* ファイルで定義されています。このファイルを作成してみましょう。 XMLファイルでは、いくつか基本的なアドオン属性を定義します： ## addon.xml - **id** — アドオンの識別子。アドオンのディレクトリ名と同じでなければなりません。 今回の場合は**hello_world**として下さい。 - **version** — このアドオンのバージョン。1.0に設定して下さい。 - **priority** — 優先順位です。**100500**のように大きい数値を設定します - **default_language** — デフォルト言語 > /app/addons/hello_world/addon.xml *addon.xml*ファイルは以下のようになるはずです： [block:code] { "codes": [ { "code": "<?xml version=\"1.0\"?>\n<addon scheme=\"3.0\">\n <id>hello_world</id>\n <version>1.0</version>\n <priority>100500</priority>\n <position>0</position>\n <status>active</status>\n <default_language>en</default_language>\n <auto_install>MULTIVENDOR,ULTIMATE</auto_install>\n</addon>", "language": "xml" } ] } [/block] [ダウンロード](https://gist.github.com/cscartjp/9f30ea09fba187ee21e7) ------------ ## 言語ファイル 次に言語用のファイルを用意します。 以下のディレクトリに次の内容のファイルを設置してください。 .poファイルについては [こちら](doc:languages-and-translations-by-po-file) をご確認ください。 > /var/langs/en/addons/hello_world.po [block:code] { "codes": [ { "code": "msgid \"\"\nmsgstr \"Project-Id-Version: tygh\"\n\"Content-Type: text/plain; charset=UTF-8\\n\"\n\"Language-Team: English\\n\"\n\"Language: en_US\\n\"\n\nmsgctxt \"Addons::name::hello_world\"\nmsgid \"Hello World\"\nmsgstr \"Hello World\"\n\nmsgctxt \"Addons::description::hello_world\"\nmsgid \"Say hello to the world.\"\nmsgstr \"Say hello to the world.\"", "language": "c", "name": "英語の場合" }, { "code": "msgid \"\"\nmsgstr \"Project-Id-Version: tygh\"\n\"Content-Type: text/plain; charset=UTF-8\\n\"\n\"Language-Team: Japanese\\n\"\n\"Language: ja_JP\\n\"\n\nmsgctxt \"Addons::name::hello_world\"\nmsgid \"Hello World\"\nmsgstr \"ハローワールド\"\n\nmsgctxt \"Addons::description::hello_world\"\nmsgid \"Say hello to the world.\"\nmsgstr \"ハローワールド！\"", "language": "c", "name": "日本語の場合" } ] } [/block] [ダウンロード](https://gist.github.com/cscartjp/38ac5da65439e62f20bc) アドオンをスタートするにはこれで十分です。 管理パネルにログインし【**管理**】→【**アドオン**】→【**利用可能なすべてのアドオンを表示・タブ**】に切り替えます。 [block:image] { "images": [ { "image": [ "https://files.readme.io/OjaUoUPQqOKMVtMFMOji_addons2.png", "addons2.png", "775", "284", "#7d462c", "" ] } ] } [/block] 作成した*Hello World*アドオンがリストにあるはずです。 インストール/アンインストールが可能となり、インストール後はアドオンを有効/無効を切り替えることが出来ます。 [block:callout] { "type": "info", "body": "作成したアドオンがリスト（アドオン管理）に表示されていない場合は、CS-Cartのキャッシュをクリアする必要があるかもしれません。キャッシュをクリアする方法は、ブラウザのアドレスフィールドのURLの最後に`&cc&ctpl`を追加してページにアクセスします。", "title": "ヒント" } [/block] `scheme="3.0"`というに注目してください。（CS-Cart v.4.2.4以降） このパラメータが無いアドオンは非推奨のマークアップを使用していると見做されます。 このパラメーターが無いアドオンはいくつか存在していますが、下位互換が必要な場合のみで利用して下さい。 では、このアドオンに設定をいくつか追加してみましょう。 *addon.xml* ファイルに`settings` セクションを作成します。 各設定は、の*item*セクションで区切られています。 それぞれの*item*は*type*や*default_value*などの要素で指定します。 *addon.xml*の`<priority>100500</priority>`の後に下記のような`settings`を書いてみましょう: [block:code] { "codes": [ { "code": " <settings edition_type=\"ROOT,ULT:VENDOR\">\n <sections>\n <section id=\"general\">\n <items>\n <item id=\"some_prop\">\n <type>input</type>\n <default_value>Hello World!</default_value>\n </item>\n <item id=\"some_dropdown\">\n <type>selectbox</type>\n <default_value>blue</default_value>\n <variants>\n <item id=\"red\"></item>\n <item id=\"green\"></item>\n <item id=\"blue\"></item>\n </variants>\n </item>\n </items>\n </section>\n </sections>\n </settings>", "language": "xml" } ] } [/block] [ダウンロード](https://gist.github.com/cscartjp/ac2087e545ed3bdba18c) 言語ファイル（.po）にも追記します。 [block:code] { "codes": [ { "code": "msgctxt \"SettingsOptions::hello_world::some_prop\"\nmsgid \"Some Prop\"\nmsgstr \"Some Prop\"\n\nmsgctxt \"SettingsOptions::hello_world::some_dropdown\"\nmsgid \"Some Dropdown\"\nmsgstr \"Some Dropdown\"\n\nmsgctxt \"SettingsVariants::hello_world::some_dropdown::red\"\nmsgid \"Red\"\nmsgstr \"Red\"\n\nmsgctxt \"SettingsVariants::hello_world::some_dropdown::green\"\nmsgid \"Green\"\nmsgstr \"Green\"\n\nmsgctxt \"SettingsVariants::hello_world::some_dropdown::blue\"\nmsgid \"Blue\"\nmsgstr \"Blue\"", "language": "c" } ] } [/block] [ダウンロード](https://gist.github.com/cscartjp/255969b24ccd16e849f7) ------- CS-Cart管理パネルのアドオン管理ページに行き、**Hello World**アドオンを再インストールします。（アンインストール＞インストール） リストからギアのアイコンをクリックして**設定**を表示します。 それをクリックすると、追加した設定があるアドオンの設定ダイアログが表示されます: [block:image] { "images": [ { "image": [ "https://files.readme.io/wBU8JNKTASqa8ur2OCNZ_hwsetting.png", "hwsetting.png", "674", "358", "#1166c5", "" ] } ] } [/block] 複雑なことではないですよね？ しかし、このままでは特に何も機能するものでもありません。 [次のチュートリアル](doc:advanced-add-on-tutorial) では、より複雑で有益なアドオンを作成します。