これで君も今日からハッカー!?な気分を味わえるkintoneカスタマイズ

こんにちは、最近iPhoneのカバーをマグネット式のものに変更して冷蔵庫とかに貼り付けて遊んでるウィルです。

今回もkintoneのカスタマイズに色々と挑戦してみました。
今回はあれですね。いうならば、サイバネティクスキントーンです。サイバー(死語)なkintoneをご紹介します。 では、見ていきましょう。

いつものkintone

皆様、kintoneはもう見慣れているとは思いますが、スペース機能もご利用されていますでしょうか?下記のようなコミュニケーション用の機能ですね。 1.PNG ここでユーザ同士で会話が出来、議論や相談などが出来ます。
今回はこの画面をなんだか格好いい感じに出来ないかなと思い、ちょっと手を入れてみました。
格好いいとは何だろう・・・やはりIT系の会社なので、IT系の格好良さは『ハッキング』や『マトリッ◯ス』のようなものかなと思いました。 なにかこう、テーマカラーが濃い緑で、0や1がいっぱいあるような感じでしょうか。 サイバー(死語)ですね。

つまり

ここにkintoneがあるじゃろ?
( ^ω^)
⊃kintone⊂

これをJavaScriptとCSSと合わせて...
( ^ω^)
≡⊃kintone JS CSS⊂≡

出来上がりじゃ
( ^ω^)
⊃[サイバー] ⊂

サイバーなkintone

cyber3.gif うむ、なんだかサイバー感(死語)が出た感じがします。いかがでしょうか。
文字はまるで今タイプされているかのように自動でタイプされます。何もしてないのに勝手に動く!サイバーっぽい!

cybertype.gifスレッドを開くと、何も触ってないのにコメントが勝手にタイプされていきます。
ハッカーあるあるですね。


2.PNG とりあえずチラチラするので、文字が動いてないバージョンがこちらです。
全体的に緑を使い、なんかこう、ハッカーが見てそうな画面みたいにカスタマイズしてみました。

3.PNG コメントは一つ一つ枠を入れて区切っています。この方が各会話が見やすいかなと思って。
そして、ユーザのアイコンはハックされたかのように、『笑っている男』(自作)と置き換えました。
とてもサイバー(死語)だね!

4.PNG スペースの参加者は全部『?』のアイコンで隠しました。すごく謎い感じが出ますね!
そしてアプリの画像も全部0と1で置き換えました。突き詰めれば、kintoneのアプリなんて最初から0と1で出来てるようなものです。

5.PNG 画面の上の方も良く見ないとわからないですが、これも0と1で埋め尽くしています。
こう、サイバー的なこだわりですね。遠くからみるとめっちゃ見にくいだけなんですが。

cyber4.gif
あとコメントを投稿する時も、黒い画面で文字入力出来るようにしています。 ハッカーは黒い画面で文字を入力するので、ハッカー気分が味わえますね!

2.PNGのサムネイル画像ということで、今回はこんな感じのハッカー風カスタマイズになりました~
さぁ、これできみも今日からハッカーっぽくなろう!
※こちらのカスタマイズは全体JSという機能を使っています。環境に適用するとそのドメインの全てのユーザがハッカーっぽくなります。

参考資料

  • tinytyper
    文字のエフェクトを出すために、 tinytyper というJavaScriptライブラリを活用しています

おわりに

気分転換がしたいときに、こういうったカスタマイズを自社のkintoneに入れてみてはいかがでしょうか。 楽しくサイバーな気分が味わえると幸いです。
興味がある方は、こちらに用意をしました。kintoneのアップデート時に、部分的にカスタマイズが動かなくなったりスタイルが適用されなかったりするかもしれませんが、ご了承下さい。

技術者向けサイト

「cybozu developer network
★メンバー登録特典★

・コミュニティに投稿やコメントしたり、Tips に質問できます。
・API のアップデート情報の通知を受け取ることができます。
・5ユーザー、1年間無償の開発者ライセンスを申し込むことができます。
・Tipsやサンプルの動きを確認できるデモサイトを利用することができます。
・HTTP Client Tool for kintoneを利用することができます。