このページではバフェット・コードが上場企業向けに提供する、コーポレートサイトのIRページに埋め込めるウィジェットについて説明します。
上場企業はウェブサイトにたった数行のhtmlを書くだけで、素敵な「決算ハイライト」ページを作ることができます。しかも利用無料です。
上場企業IRページ向けウィジェットについて
コーポレートサイトのIRページは、上場企業にとって投資家への玄関ともいうべき重要な場所です。
しかしながら投資家向けにコンテンツを作るのは簡単ではありません。
- そもそもどのようなページが投資家に求められるのだろう
- グラフや表はどのような見せ方がわかりやすいだろうか
- コンテンツが決まってもデザインセンスが足りないので不安
そうした課題をお持ちのご担当者は少なくないと思います。
そこでバフェット・コードでは、上場企業向けにコーポレートサイトのIRページへ簡単に投資家向けコンテンツを作れるウィジェット（IR ウィジェット）を提供しています。
IRウィジェットには
- 決算ハイライト
- 株式の状況
の2種類があります。
いずれも近年のIRでは必須とされるコンテンツになります。
IRウィジェットは、IRページに数行のHTMLを記載することで簡単に埋め込むことができます。
IRウィジェットはそれだけでページが完結できるよう、ページ全体のデザインを作り込んでいますので、コードを埋め込むだけで投資家向けコンテンツが完成します。
導入事例
実際のIRページへの導入事例をご覧ください。
いずれもウィジェットのみでページが完結しています。
- 株式会社ショーケース
- 三光産業株式会社
- 株式会社Macbee Planet
- 株式会社CINC
- トビラシステムズ株式会社
- 株式会社アピリッツ
- 株式会社クルーバー
- 株式会社インソース
導入方法
IRウィジェットをご利用になるには、下記の2つの作業が必要です。
お問い合わせ
まず、こちらからお問い合わせをお願いします。
その後にウィジェットの概要と導入方法についてお打ち合わせの機会を持たせて頂きます。コーポレートサイトの運用ご担当者様にもご同席いただけますと幸いです。
お打ち合わせの後、バフェット・コード側で配信設定（詳細について後述）を行います。
それが完了しましたらIRウィジェットが利用可能となります。
お問い合わせいただいてから1週間もかからずリリースすることが可能です。
IRページの利用方法
利用可能になったIRウィジェットは、HTMLのテンプレートをコピー & ペーストしたうえで、
- 決算ハイライトのURL
- 株式状況のURL
- バフェットコードの企業ページのURL
の3箇所を変更するだけで使い始めることができます。
IRウィジェット、企業ページのURLは銘柄コードによって以下のように決まっています。
YOUR_TICKER は、ご自身の会社の銘柄コード（4桁の半角整数）です。
- 決算ハイライトウィジェットのURL
https://widget.buffett-code.com/v1/YOUR_TICKER/financial-highlights.js - 株式の状況ウィジェットのURL
https://widget.buffett-code.com/v1/YOUR_TICKER/stock-information.js - バフェットコードの企業ページのURL
https://www.buffett-code.com/company/YOUR_TICKER/
例えば、銘柄コードが "1234" だった場合、それぞれ下記のようになります。
- 決算ハイライト
https://widget.buffett-code.com/v1/1234/financial-highlights.js - 株式の状況
https://widget.buffett-code.com/v1/1234/stock-information.js - バフェットコードの企業ページ
https://www.buffett-code.com/company/1234/
HTMLの埋め込み手順
決算ハイライト
決算ハイライトの埋め込む手順は下記のとおりです。
1. 下記をコピー & ペーストする
<div id="buffett-code-widget-financial-highlights" data-chart-colors="rgba(0, 104, 183, 0.8):rgba(199, 36, 36, 0.8):rgba(255, 163, 25, 0.8):rgba(35, 172, 14, 0.8)"></div>
<script type="module" src="決算ハイライトウィジェットのURL" async charset="utf-8"></script>
<a href="バフェットコードの企業ページのURL" style="font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif">Powered by バフェット・コード</a>
2. 決算ハイライトウィジェットのURL、企業ページのURLを自身の企業のものに書き換える
3. 必要に応じて、グラフの凡例の色を変更する（詳細については後述の「決算ハイライトの色指定について」をご参照ください）
株式の状況
株式の状況の埋め込む手順は下記のとおりです。
1. 下記をコピー & ペーストする
<div id="buffett-code-widget-stock-information"></div>
<script type="module" src="株式の状況ウィジェットのURL" async charset="utf-8"></script>
<a href="バフェットコードの企業ページのURL" style="font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif">Powered by バフェット・コード</a>
2. 決算ハイライトウィジェットのURL、企業ページのURLを自身の企業のものに置き換える
webデザイナー・webエンジニアの方へ
ここでは、コーポレートサイトを開発・運用しているwebデザイナー・webエンジニアの方むけの情報をまとめます。
対応ブラウザについて
下記のブラウザをサポートしています
- Windows: Edge(Chromium版), Google Chrome
- macOS: Safari, Google Chrome
- iPhone: Safari
- Android: Google Chrome （ただし、一部端末では動かない場合があります）
Firefox については、941146 - NS_ERROR_FAILUREのため正常に作動しません。widgetは「Firefoxは非対応である」旨の文字列を表示します。利用者側でブラウザをハンドリングする必要はありません。
配信設定について
バフェットコードのIRウィジェットは https://widget.buffett-code.com から配信されるため、 IRページに埋め込む際にオリジン間リソース共有（CORS）を設定する必要があります。
開発（あるいはステージング）環境・本番環境のURLをご連絡ください。
例：
- 本番環境：
https://example.com/ir - ステージング：
https://stg.example.com/ir - 開発環境：
http://test.example.com/ir
決算ハイライトの色指定について
決算ハイライトウィジェットは、必要に応じて data-chart-colors 属性 を指定することでグラフの凡例の色を変更できます。
- #ff6600 のような16進数カラーコード
- rgba(255, 127, 0, 1) のようなCSSの色指定リテラル
のいずれかを、区切り文字 ":" で連結して4色指定してください。未設定の場合、指定色が足りない場合はデフォルトで配色されます。なお、株式の状況ウィジェットは色の変更はできません。