| How to Use | 使い方 |
|---|
ここで、グラフにしたい各項目の文章と比率を入力して、「作成！」 ボタンを押すと、グラフの作成が始まります （混雑状況によってしばらくかかる場合があります）。項目は少なくとも一つは入力するようにしてください。また、比率の合計は自動的に調整されますので、100% にしなくても構わないです。
作成が終わると、グラフとともに 「HTML コード」 が表示されます。ブログやホームページ等に貼り付ける際には、この欄のコードをコピーして埋め込むか、グラフの画像を保存して適宜ご使用ください。
さらに詳しく設定される場合は、「もっと細かく」 を選んでください。このモードでは各項目の塗りの色や上下に付けるタイトル、作成するグラフの画像サイズ、線や背景の色、フォントや影付けの指定ができます。
色の設定は、"#rrggbb" の形式で入力してください。"rr" は赤、"gg" は緑、"bb" は青の成分を表しています。詳しくはこのあたりをご参照ください。"red", "navy" 等の色名での指定も割と可能です。
グラフの画像サイズは、横幅は 80 ～ 800 ピクセル、高さは 60 ～ 600 ピクセルの範囲で入力してください。横幅 ： 高さの比率が 4 : 3 となるような設定が推奨です。
「タイトル」 を入力すると、グラフの上や下にタイトルが付きます。このとき、「タイトル込みで高さを計算する」 がオフなら、自動的にタイトル分の幅だけ画像の高さが大きくなります。
| Tips | 文章の記法 |
|---|
各項目の文章では、幾つかのタグを使うことができます。空白文字や改行タグを使って文字の位置をうまくずらしたり、太字にしたりすることが可能です。
| <br> | 強制的に改行する |
|---|---|
| <b> ～ </b> | 太字にする |
| <strong> ～ </strong> | 太字にする |
| <i> ～ </i> | 斜体にする |
| <em> ～ </em> | 斜体にする |
| <font color="#rrggbb"> ～ </font> | 色を変える |
| <a href="URI"> ～ </a> | タグで囲んだ部分を URI へのリンクにする |
| <pp> | "??%" の形式で比率を表示する |
<a> タグで囲んだ部分の文字の色は 「リンクの色」 になりますが、「色は変えない」 をオンにすると他の部分の文字と同じ色になります。
また、"<" や ">" 等を表示するために、以下の符号が利用できます。
| < | < |
|---|---|
| > | > |
| & | & |
| " | " |
| ' | ' |
| | (空白) |
| &p; | "??%" の形式で比率を表示する |
例えば、各項目の文章に "<i>&p;</i>" をつけると、項目の比率を斜体で表示することができます。
| Web API | API の使い方 |
|---|
「HeartRails Graph」 では、API の呼び出しによるグラフ生成も可能です。各項目の文章等をパラメータに設定して API の URL にアクセスすると、自動的にグラフ生成が始まり、その画像を取得することができます。例えば、以下の URL は "API のサンプルです。" という項目だけのグラフの画像を返します。
http://graph.heartrails.com/api/?text0=API のサンプルです。&value0=100 (要 URL エンコード)
API の URL、およびパラメータは、以下の通りです。このうち、少なくとも一組の "text" と "value" が必須となります。
URL: http://graph.heartrails.com/api/
| text0 .. text9 | 項目 1 ～ 10 の文章 (UTF-8 で、かつ要 URL エンコード) |
|---|---|
| value0 .. value9 | 項目 1 ～ 10 の比率 |
| color0 .. color9 | 項目 1 ～ 10 の塗りの色 ("rrggbb" または色名で) |
| width | 生成するグラフの横幅 [px] (デフォルトは "400") |
| height | 生成するグラフの高さ [px] (デフォルトは "300") |
| fg | 線の色 ("rrggbb" または色名で。デフォルトは "000000") |
| bg | 背景色 ("rrggbb" または色名で。デフォルトは "ffffff") |
| font | フォント名 ("hui", "aqua", "ipa_minc", "ipa_goth" のいずれか) |
| shadow | ドロップシャドウ ("0" で無効、"1" で有効。デフォルトは有効) |
| title_top | グラフの上につけるタイトル |
| title_bottom | グラフの下につけるタイトル |
| title_adj | タイトル込みで高さを計算する ("0" で無効、"1" で有効。デフォルトは無効) |
| linkcolor | リンク文字列の色 |
| no_linkcolor | リンク文字列でも色を変えない ("0" で無効、"1" で有効。デフォルトは無効) |
フォント名と実際に使われるフォントとの対応は、次の通りになります。
| hui | ふい字 Ｐ (デフォルト) |
|---|---|
| aqua | あくあ Ｐ フォント |
| sana | さなフォン Ｐ |
| sana_maru | さなフォン丸 Ｐ |
| sana_kaku | さなフォン角 Ｐ |
| ipa_minc | IPA P 明朝 |
| ipa_goth | IPA P ゴシック |
例えば、サイズが 200 × 150 で線の色が赤、背景色を黒、フォントを明朝にして影付けを無効にすると、このような URL になります。
なお、API の URL にアクセスしてからグラフの生成が完了するまでは、"Now Drawing ..." という画像が返ってきます。また、パラメータに異常がある場合は、"Invalid Request !" という画像が返ってきますので、再度パラメータをご確認ください。
| Link | リンク |
|---|
「HeartRails Graph」 は、べつやくれい氏の記事 『円グラフで表そう』、およびイソプレスうぉっち様の記事 『イソプレスうぉっち、全記事に 「べつやくメソッド」 を導入』 にインスパイヤされて Web サービス化されました。
また、本サービスではフォントとして、ふい氏の 「ふい字」、あくあ氏の 「あくあ Ｐ フォント」、沙奈さまの 「さなフォン」、情報処理推進機構様の 「IPA フォント」 を利用させていただいています。
| Contact | コンタクト |
|---|
ご意見、ご要望、不具合のご報告等は、HeartRails Request または にお願いします。