kintoneのお知らせ掲示板をハックしてみた

# はじめに

kintoneには、便利な **お知らせ** という場所があります
<img width="80%" alt="top.png" src="https://qiita-image-store.s3.amazonaws.com/0/153051/2ede6ef0-a173-f5df-4949-83d3e4a6a342.png">
ログイン後のポータル画面だと↑の場所です。
スペースを作ると各スペースのトップにもあります。

ここには自由に文言や文字サイズ、文字色、画像等を入れることができて、
オリジナルの掲示板が作れます！
<img width="80%" alt="top-edit.png" src="https://qiita-image-store.s3.amazonaws.com/0/153051/b633ab22-47f7-cd2a-f1a7-6430401d7352.png">


ですが、結構制限もあったりして、
編集画面の上部に出るメニューバーの項目しか編集できないんですよね。。

→ つまり、太字や文字色変更はできるけど、**フォントの変更** はできない
<br/><br/>
<img src="https://qiita-image-store.s3.amazonaws.com/0/153051/cd25aa31-dfea-d4c7-dbe3-1e7c71ae4d6d.png" width=30%>
な、なんだと！！いろいろ変更したい！！
<br/><br/>

ってことでハックしてみました。
※ kintone的には非推奨なことなのであしからず。

# きっかけ

きっかけは単純で、
Wordから文章をコピペしたら文字フォントがそのまま挿入されたのを見て、
**「あれ、文字フォント選ぶことはできないけど、埋め込むことならできるのでは、、」**
ってのがきっかけです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/153051/1ae4dc8c-b15b-891b-520f-fa213219d837.png" width=30%>
よし、いろいろいじってやろう。。。

# ハック方法

ではお待ちかねのハック方法ですが、そこまで難しくありません。
キーとなるのは **Chromeの開発者ツールを使う** ってことです (他のブラウザでもたぶんできます)

手順

* お知らせ欄の編集画面を開く
* Chrome開発者ツールを開く
* 開発者ツール上でHTMLを直接書き変える
* お知らせ欄の「保存」を押す

以上！
しかし言葉だけだとわかりにくいのでサンプルをいくつか紹介します！

## ハック① 文字色を変える

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">[kintoneお知らせ欄ハック]<br>Change fontColor <a href="https://t.co/8tjIJDt9gt">pic.twitter.com/8tjIJDt9gt</a></p>&mdash; BB (@BB_File) <a href="https://twitter.com/BB_File/status/1078515308636205056?ref_src=twsrc%5Etfw">2018年12月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


HTML側で変更したものが、そのままお知らせに保存されている！！

## ハック② 文字フォントを変える

Wordで適当にフォント選んでコピペ！

<img width="640" alt="スクリーンショット 2018-12-27 19.20.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/153051/b4b5e9a2-e35e-ab22-6527-c99f32278066.png">

ただし、
コピペした段階ではフォント変わってそうでも、お知らせの保存をすると反映されないフォントもあるっぽい

### フォントの余談

試している中で埋め込むことのできた zapfino ってフォントがかっこいい
<img width="80%" alt="スクリーンショット 2018-12-28 15.05.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/153051/d34ba3c2-a182-011f-26d2-a45ef974bbd2.png">
↑ cybozu developer network をやってみた

## ハック③ id/classを埋め込む

フォント等が変えられるってことは、そもそもタグにidとかclassとか埋め込めるのでは。。

### idを埋め込む

とりあえず、idを埋め込めるかチャレンジしてみました
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">[kintoneお知らせ欄ハック]<br>add id <a href="https://t.co/VBGTbNPdkv">pic.twitter.com/VBGTbNPdkv</a></p>&mdash; BB (@BB_File) <a href="https://twitter.com/BB_File/status/1078515435736158208?ref_src=twsrc%5Etfw">2018年12月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

結果は、、**できない** です ( ;`･～･) ぐぬぬ…

### classを埋め込む

idはだめだったけどclassならと思い、再チャレンジ！
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">[kintoneお知らせ欄ハック]<br>add class <a href="https://t.co/cVby7sox79">pic.twitter.com/cVby7sox79</a></p>&mdash; BB (@BB_File) <a href="https://twitter.com/BB_File/status/1078515514983366656?ref_src=twsrc%5Etfw">2018年12月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

結果は、、**できた！！！**

`user-token-○○` と何やら追加されていますが、とりあえず埋め込めそうです
(この`user-token-`がkintoneのVerUPで変更されたらアウトですけど、、汗)

classが埋め込めるってことは、そのclassに対してiframeなども埋め込めるわけで、、
<img width="80%" alt="スクリーンショット 2018-12-27 19.43.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/153051/d42b7fb3-f4d8-a0b3-4f17-57cbf5270793.png">
こんなこともできたりするわけです (`･ー･´)ドヤ！

iframeで埋め込んでいるアプリ(カスタマイズビュー)は↓の記事で紹介したやつです

**kintoneでミュージックプレイヤーを作ってみた**
https://qiita.com/RyBB/items/3f348b4a453c2c325837


# おわりに

単純なきっかけから、いろいろ試しているうちに「小ネタ」っぽくなりました 笑
お知らせ掲示板以外にも、

* スレッド
* ラベルフィールド
* リッチエディターフィールド
* コメント

でも同じことができそうです。
<img width="50%" alt="スクリーンショット 2018-12-28 15.54.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/153051/d76ef217-20f7-cc3f-b184-71a555a35012.png">

それでは！≧(+･` ཀ･´)≦