Piwik のプラットフォームの機能を紹介していくブログの新しいシリーズが始まります。
カスタムプラグイン＆テーマを作成する方法や、HTTP API などを使用する方法などを学んでいきましょう。

昨年は主に1つの設計原理に焦点を当て、APIを大幅に簡素化させています：

API の複雑さは、使用事例の複雑さを超えてはなりません

つまり、あなたが API の簡単な使用法を知っているのならば、私たちもできるだけシンプルにしたいと考えています。
もしあなたが複雑でとても困難だが世界を変えるようなアイデアを持っているならば、それをシンプルにすることは難しいでしょう。
でも私たちはそれを可能にしたいと思います。

これから数週間か数ヶ月以上に渡り、私たちがこの意味と、それをどのように成し遂げたのかを、学んでいくこととなります。

ちなみに、私たちの API をすでに使用している場合は問題ありません。
API は下位互換性を保ち、プラットフォームの変更履歴における重大な変更を公開しています。

はじめに

このシリーズでは、すでに開発環境を設定していることを前提としています。まだの場合は、Piwik の開発者サイトにアクセスし、セットアップチュートリアルを探してください。

セットアップを完了するためにしなければならない事を要約すると：

• Piwik をインストールします（例えば git を経由して）
• デベロッパーモードをアクティブにします。./console development:enable --full
• 必要であれば、いくつかのテストデータを生成します。
  ./console visitorgenerator:generate-visits --idsite=1 --limit-fake-visits=600これには時間がかかり、またマーケットプレイスから VisitorGenerator のプラグインが必要となります。

独自のテーマを作成することから始めましょう

空白のテーマを作成するために Piwik のコンソールを使用して起動します：

./console generate:theme

このコマンドは、テーマの名前、説明およびバージョン番号を入力するように要求されます。
ここでは単純にテーマの名前として [ CustomTheme ] を使用します。
あなたが簡単に始められるようにいくつかのファイルを含むフォルダ plugins/CustomThemeがあるはずです。

テーマを変更する前に、私たちは私たちの設定 -> テーマの管理ページにアクセスするか、
またはコマンド ./console core:plugin activate YourCustomThemeを実行してアクティブにする必要があります。
テーマがアクティブになっていない場合は、すべての変更は適用されません。

テーマの内容

テーマの中で最も重要なファイルは、
plugins/CustomTheme/stylesheets/theme.lessと、plugins/CustomTheme/stylesheets/_colors.lessそしてplugins/CustomTheme/stylesheets/_variables.lessです:

・theme.lessはテーマがアクティブになったときに含まれるファイルです。
このファイルでは、他のスタイルシートファイルをインクルードし、CSS スタイルを上書きします。
・_variables.lessには、Piwik が使用する色を簡単に変更することができるように、多くの細かな変数が含まれています。
・_variables.lessは現在、フォントファミリを変更する変数が一つ含まれています。

より多くの変数は、将来的に追加されます。
注：これは新機能ですので、ファイルがこれだけの場合には、Git か、少なくとも Piwik 2.6.0 を使用して、インストールされるでしょう。

フォントファミリーを変更する

フォントファミリーを変更するには、単に変数を上書きするだけです。

in _variables.less内の@theme-fontFamily-base: Verdana, sans-serif;

色を変更する

色を変更するには、_colors.less内のに変更したい色の変数のコメントを解除します。
いくつかを簡単に説明します。
通常これらの色は、企業のデザインや、Piwik をお好みの外観に調整するには十分でしょう：

@theme-color-brand:                    #d4291f; // The Piwik red which is for instance used in the menu, it also defines the color of buttons, the little arrows and more
@theme-color-brand-contrast:           #ffffff; // Contrast color to the Piwik red. Usually you need to change it only in case you define a light brand color. For instance to change the text color of buttons
@theme-color-link:                     #1e93d1; // The link color which is usually a light blue

@theme-color-widget-title-text:        #0d0d0d; // The text and background color of the header of a widget (Dashboard)
@theme-color-widget-title-background:  #f2f2f2;

@theme-color-menu-contrast-text:       #666666; // The text color of a menu item in the reporting sub menu and the admin menu
@theme-color-menu-contrast-textActive: #0d0d0d; // The text color of an active menu item
@theme-color-menu-contrast-background: #f2f2f2; // The background color of a menu item

@graph-colors-data-series[1-8]:        #000000; // The different colors used in graphs

明らかな変化を作る

ページをリロードするときの色やフォントの変更を実際に目に見えるようにするには、このような変更するたびにコンパイルされた
CSS ファイルを削除する必要があります

rm tmp/assets/asset_manager_global_css.css

マーケットプレース上でテーマを公開

他の Piwik ユーザーとテーマを共有したい場合、GitHub であなたのテーマをプッシュして、タグを作成することで、簡単におこなえます。テーマを配布する方法については、こちらをご覧ください。

高度な機能

カスタムテーマを作成することは簡単ではありませんか？行うことは、いくつかの小さな変数を変更することです。
私たちでさえも、ファイルを作成したことはありません！ もちろん、API の設計原理に基づきより多くのこともできます。
例えば、アイコン、CSS スタイルシート、テンプレートなどの変更です。

さらに、Piwik のカスタマイズのために、ロゴと Favicon を変更することもできます 設定 => 一般設定

テーマの詳細についてご存知ですか？ Piwik デベロッパーゾーンの私たちのテーマガイドに移動。

あなたが API やデベロッパーゾーンにあるガイドに関するご意見がありましたら、お気軽にお聞かせください。

追伸：関連する FAQ を参照：ホワイトラベル Piwik を作成するには？

Thomas Steur