Twitterユーザのプロフィール画像をkintoneに表示させる方法

この記事の内容

この記事では、kintoneアプリにツイッターの情報を保管する際に、ユーザのプロフィール画像をkintoneアプリ内に表示するカスタマイズ方法を案内します。

このカスタマイズでは、フィールドに登録された画像のURLを元に、別のフィールドにその画像を表示させています。

kintoneアプリの準備

ツイートを溜めるためのkintoneアプリをまず準備します。もしkintoneの環境が手元に無い場合は、開発者ライセンスに申し込むことですぐに取得することが出来ます。

下記の情報を参考にしてkintoneアプリをはじめから作成します。『ユーザ』フィールドと『プロフィール画像URL』フィールド以外は自由に作って頂いて大丈夫です。フィールドコードは間違いの無いように設定してください。

フィールドタイプ	フィールド名	フィールドコード
文字列(1行)	ユーザ	user
文字列(1行)	プロフィール画像URL	profile_pic_url
文字列(1行)	スクリーンネーム	(なんでもOK)
文字列(1行)	ツイートURL	(なんでもOK)
文字列(複数行)	ツイート内容	(なんでもOK)

このようなフォームになります。

設定を保存してアプリを公開すると、ツイートの情報が入力出来るテーブルが完成します。Power Automateなどのツールでツイートを自動的にkintoneアプリに登録したり、手動でツイートの情報を登録したりして下さい。手動の場合、Twitter上のユーザのアイコンを右クリックすれば画像のURLをコピーするオプションが出てきます。

こんな感じでデータを準備しましょう。

実装方法

これからJavaScriptのカスタマイズを加えて、ユーザの名前の側にプロフィール画像が表示されるようにします。

まず、ローカルのコードエディタに下記のコードを書いて、JavaScriptファイルとして保存します。

(() => {
    'use strict';

    let TwitterDisplayName = 'user'; //『ユーザ』フィールドのフィールドコード
    let UserImage = 'profile_pic_url'; //『プロフィール画像URL』フィールドのフィールドコード

    //レコード一覧画面でTwitterプロフィール画像を表示させる
    kintone.events.on('app.record.index.show', (event) => {
        let parent = kintone.app.getFieldElements(TwitterDisplayName);

        for (let i=0; i<parent.length; i++){
            let image = document.createElement('img');
            image.style.marginLeft = '10px';
            image.width = 25;
            image.height = 25;
            image.src = event.records[i][UserImage].value;
            parent[i].querySelector('div').style = `display:inline-block`;
            parent[i].prepend(image);
        }
      return event;
    });

    //レコード詳細画面でTwitterプロフィール画像を表示させる
    kintone.events.on('app.record.detail.show', (event) => {
        let parent = kintone.app.record.getFieldElement(TwitterDisplayName);
        let image = document.createElement('img');
        image.style.marginRight = '5px'
        image.width = 25;
        image.height = 25;
        image.src = event.record[UserImage].value;
        parent.prepend(image);
      return event;
    });

})();

kintoneアプリの設定画面から、[JavaScript / CSSでカスタマイズ]を選択肢、PC用のJavaScriptファイルとしてファイルをkintoneアプリにアップロードします。

設定を保存し、アプリを更新して、レコードの一覧に遷移しましょう。ユーザ名の横にプロフィール画像が表示されるはずです。

また、レコードの詳細画面でも画像は表示されるはずです。

解説

kintoneアプリに配置したフィールドとJavaScriptのコードに関連性を持たせるために、まず最初に変数にフィールドコードの値を設定しています。もしカスタマイズを動かそうとして、Cannot read properties of null やCannot read properties of undefinedなどのエラーがコンソールに表示されていたら、十中八九ここのフィールドコードの記述が間違ってると思います。

    let TwitterDisplayName = 'user'; //『ユーザ』フィールドのフィールドコード
    let UserImage = 'profile_pic_url'; //『プロフィール画像URL』フィールドのフィールドコード

レコード一覧画面が表示された時は、app.record.index.showのイベントが発火します。画像を表示する場所の要素をkintone.app.getFieldElementsで取得します。各行ごとに表示出来る場所があるので、要素は配列として取得されます。img要素を作成し、スタイルを調整します。イベントが発火した際にeventオブジェクトを渡されるのですが、このオブジェクトの中には表示されているレコード一覧の情報が全て入っています。image.src = event.records[i][UserImage].value;で画像のソースを、該当するレコードの『プロフィール画像URL』に保存された情報を割り当てます。

    kintone.events.on('app.record.index.show', (event) => {
        let parent = kintone.app.getFieldElements(TwitterDisplayName);

        for (let i=0; i<parent.length; i++){
            let image = document.createElement('img');
            image.style.marginLeft = '10px';
            image.width = 25;
            image.height = 25;
            image.src = event.records[i][UserImage].value;
            parent[i].querySelector('div').style = `display:inline-block`;
            parent[i].prepend(image);
        }
      return event;
    });

レコードの詳細画面が表示された時は、app.record.detail.showのイベントが発火します。今回はkintone.app.record.getFieldElementで画像を表示する場所の要素を取得します。一覧画面の時とは違って、１つのレコードの情報しか表示されていないので、見えているフィールドの要素１つだけしか取得されません。後は、レコード一覧画面のイベント発火時と同じくimg要素を作成したり、スタイルの調整をしたり、画像のソースそ指定します。

    kintone.events.on('app.record.detail.show', (event) => {
        let parent = kintone.app.record.getFieldElement(TwitterDisplayName);
        let image = document.createElement('img');
        image.style.marginRight = '5px'
        image.width = 25;
        image.height = 25;
        image.src = event.record[UserImage].value;
        parent.prepend(image);
      return event;
    });

ちなみにですが、Twitterのプロフィール画像でなくても、画像のURLであれば別の画像でもkintoneのアプリ内に表示させることは出来ます。

注意点

• レコードの一覧のビューの中に『ユーザ』フィールドが存在しない場合、コンソールにエラーが表示されます。これは、HTML要素を画面上に差し込もうとして、差し込む場所が見つからなくなってしまうためです。そこはうまく処理しておいてください。
• 本記事のカスタマイズはPCブラウザでの利用を想定しています。モバイルブラウザやモバイルアプリでも動作させるにはmobile.app.record.index.showやmobile.app.record.detail.showなどの、モバイル専用のイベントを使用する必要があります。
• 本記事のカスタマイズでスタイルの調整を行っていますが、PCブラウザでの利用を想定してスタイルを指定しています。モバイルで実装する場合は、同じスタイルでの調整を行うとズレる可能性が大きいです。