kintone ヘッダーツールバーにアイコン追加

#ヘッダーツールバーを使ってみる
kintone が新デザインになり、ヘッダー部に大分空きがあります。
テーブル固定表示プラグインでは、ここにアイコンを配置してみました。
当然ながら、DOM操作であり、kintone 非推奨です。

![toolbar1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/dec45a68-e9f9-bcd7-89c9-fdfad29afdff.png)

関連する JavaScript の抜粋です。
kintone の show イベントに組み込めば、使えると思います。

```
        var htmlbutton = '';

            // 表示幅ボタン
            htmlbutton += '<div class="ktable-menu-box gaia-header-toolbar-help goog-inline-block goog-menu-button" title="表示幅を設定します N[ctrl+,] W[ctrl+.]" role="button" aria-expanded="false" tabindex="0" aria-haspopup="true" style="-webkit-user-select: none;">';
            htmlbutton += '    <div class="goog-inline-block goog-menu-button-outer-box">';
            htmlbutton += '        <div class="goog-inline-block goog-menu-button-inner-box">';
            htmlbutton += '            <div class="goog-inline-block goog-menu-button-caption">';
            htmlbutton += '                <span class="gaia-header-img gaia-header-img-help">';
            htmlbutton += '                    <button type="button" id="ktable-width-ctl" value="" class="ktable-width-button">W</button>';
            htmlbutton += '                </span>';
            htmlbutton += '            </div>';
            htmlbutton += '        </div>';
            htmlbutton += '    </div>';
            htmlbutton += '</div>';

        // 左端スクロールボタン
        htmlbutton += '<div class="ktable-menu-box gaia-header-toolbar-help goog-inline-block goog-menu-button" title="左端へスクロールします L[ctrl+left] LH[ctrl+shift+right]" role="button" aria-expanded="false" tabindex="0" aria-haspopup="true" style="-webkit-user-select: none;">';
        htmlbutton += '    <div class="goog-inline-block goog-menu-button-outer-box">';
        htmlbutton += '        <div class="goog-inline-block goog-menu-button-inner-box">';
        htmlbutton += '            <div class="goog-inline-block goog-menu-button-caption">';
        htmlbutton += '                <span class="gaia-header-img gaia-header-img-help">';
        htmlbutton += '                    <div id="ktable-left-ctl" class="ktable-left-button"></div>';
        htmlbutton += '                </span>';
        htmlbutton += '            </div>';
        htmlbutton += '        </div>';
        htmlbutton += '    </div>';
        htmlbutton += '</div>';

        // 右端スクロールボタン
        htmlbutton += '<div class="ktable-menu-box gaia-header-toolbar-help goog-inline-block goog-menu-button" title="右端へスクロールします R[ctrl+right] RH[ctrl+shift+right]" role="button" aria-expanded="false" tabindex="0" aria-haspopup="true" style="-webkit-user-select: none;">';
        htmlbutton += '    <div class="goog-inline-block goog-menu-button-outer-box">';
        htmlbutton += '        <div class="goog-inline-block goog-menu-button-inner-box">';
        htmlbutton += '            <div class="goog-inline-block goog-menu-button-caption">';
        htmlbutton += '                <span class="gaia-header-img gaia-header-img-help">';
        htmlbutton += '                    <div id="ktable-right-ctl" class="ktable-right-button"></div>';
        htmlbutton += '                </span>';
        htmlbutton += '            </div>';
        htmlbutton += '        </div>';
        htmlbutton += '    </div>';
        htmlbutton += '</div>';

        $('div.gaia-header-toolbar-links').prepend(htmlbutton);

...
        // scroll left
        $("#ktable-left-ctl").click(function(){
            $("html,body").animate({scrollLeft:0}, 600);
        } );

```

#アイコンをCSSで作成

プラグインでも image ファイルそのままでは、使用できません。
image ファイルをBase64 変換するか CSS でアイコンらしく見せることになります。
今回は、CSS で三角形を表示しています。
バックカラーを既存のアイコンに合わせると、とってつけたような違和感も少ないと思います。
アイコンを追加したら、ツールバーの高さがずれたので、むりやり 48px にしています。
どこか調整が足らないのだと思いますが、結果オーライということにしました。

```
.gaia-header-toolbar-navigation {
    height: 48px;
}
button.ktable-width-button {
	width: 28px;
    height: 28px;
	padding-left: 4px;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #4B4B4B;
    background-color: #777;
    border-radius: 4px;
    border: 1px solid #4B4B4B;
}

div.ktable-left-button {
    margin: 12px;
    border-radius: 2px;
    width: 0;
    height: 0;
    border-right: 24px solid #777;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
}
div.ktable-right-button {
    margin: 12px;
    border-radius: 2px;
    width: 0;
    height: 0;
    border-left: 24px solid #777;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
}

```