師匠と私-Season1_ch.7☆URLを取得せよ！
ー前回までのあらすじー
師匠との雑談で、軽い気持ちでkintoneアプリプラグインを作ることに。
プロジェクト名「イカル☆プラグイン」
※cybozu developer networkのことはCDNと略してます。
■今できていること=>
①（レコード詳細画面を開いた時に）自動的にポップアップ画面を表示
②入力フィールドの値を取得
■このあとの主な機構=>
機構③
値を取得したものをリンク先に取り込み、検索画面を表示
機構④
ポップアップ画面にイルカの絵を出す
今回は機構③
入力フィールドの値を取得するまではできたので、それを使ってリンク先を指定して検索ボタンを押したときにページ移動させます。
これにはいくつか疑問がでてきていました。
１．そもそもkintoneアプリの検索とは？
２．JavaScriptでリンク先を指定するには？
３．リンク先を自在につくるには？←ハードル高め？
では最初からみていきます。
１．そもそもkintoneアプリの検索とは？
「検索機能が実装されないなんて、そんなのダメじゃー！」と師匠にツッコミをいれられたときに、kintoneのアプリ内検索機能を使えばいいかも！とひらめきました。
そこで、当初、検索フィールド欄に値をいれて自動的に検索画面をだす方法を考えました。
すると、師匠のツッコミが入りました。
「そこから飛ばされる検索URLに直接飛ばしてしまってもいいのじゃよ」
了解！と言ってみたものの、よくわからないままここまできてしまい。
調べてみたら今、ようやく、kintone検索のしくみが理解できました！
kintone検索のしくみ
kintone上で検索をすると=>検索ワードの値をURLに忍ばせて=>
指定のURLに飛ばしていたんですね！
kintoneで検索すると
■全体検索
https://ホスト名.cybozu.com/k/search?keyword=イルカ
うしろに検索ワードがくっついている！
■アプリ内検索
https://ホスト名.cybozu.com/k/search?keyword=イルカ&app=13
うしろにアプリIDもくっついている！
つまり。URLの後ろにkeywordとapp=IDをくっつけたものを用意して、指定のリンク先に自動でとばすようにすればいいということですね。
ではつぎに。
２．JavaScriptでリンク先を指定するには？
これは簡単そうです。
window.location.href １行追加でOK!
searchButton.addEventListener("click", () => {
🐬ボタンが押されたときのふるまい①textを取得する
console.log(text.value);
※値が取得できました＝確認のためコンソールに出すだけのイベント
🐬ボタンが押されたときのふるまい②指定したリンク先へリダイレクトする
window.location.href = "https://指定したURL/"
});
検索ボタンを押したら、ページ遷移されました！成功です。
３．リンク先を自在につくるには？
さいごに本当に移動したいURLを作ります。
window.location.href = "https://指定したURL/" ←ここの部分です。
師匠にも教えてもらいましたが、JavaScriptでURLを取得するのは難しくないようです。いろいろな値を取得できるんですね。
Javascriptのwindow.locationオブジェクトを使って
開いているWEBページのURLに関する様々な情報を取得する事ができます。
location.href……URL全体
location.hostname……URLのホスト名
location.pathname……URLのパス部分
location.search……URLのパラメータ部分
location.hash……URLのアンカー部分
location.port……URLのポート番号
location.protocol……URLのプロトコル
https://www.javadrive.jp/javascript/webpage/index10.html
つくりたいURLはこのようなものです。
https://ホスト名.cybozu.com/k/search?keyword=イルカ&app=13
🐟window.locationを使ってほしい値を取得します。
🐟https://○○.cybozu.com の部分
"https://" + location.hostname
🐟/search?keyword= ＋ text.value (入力した値)
🐟&app= ？？？ location.pathnameに入ってる数字のところ
🐟🐟🐟pathnameの最後の数字だけを取りたい！
ーーーーーーーーーーーーーー
※アプリレコード詳細画面のURL例
※location.hrefで取得するとこのようなものになるはず。
https://○○.cybozu.com/k/13/show#record=～
🐬欲しい値は一部だけ！どうすればいいの？
ここで師匠から「javascript split 使い方」で検索せよと指令が！
スプリットって分割の意味だからバラバラにするということ？
かんたんに調べてみます。
やはり「指定した区切り文字列で分割する」ことでした。
さらにさらに、分割した値の中から、好きなものを取得できるみたいです。
🐬split を使ってみよう！
var url = location.pathname ; ←パスを取得
var getAppId = url.split('/'); ←urlの値を / で分割する
分解すると ←[0,1,2,3…] という配列に
0/①k/②13/③show#～ ※アプリ詳細画面の場合
getAppId[2] ←欲しい番号を指定する（２番目の値が欲しい！）
ーーーーーーーーーーーーーーーー
🐬では、組み立ててURLを作ります！
var hrefTextAdded ="https://" +location.host +"/k/" + "search?keyword=" +text.value +"&app=" +getAppId[2] ;
※”https://” このようなところはベタ打ちのような感じ。
検索結果を表示するリンクができました！
※便利ツールの話
ここまでの実装を師匠にお披露目するにはどうやって？と考えてました。
そこで思いついたのが、CodeSandbox。
以前YouTubeで見ていたJavaScript講座で紹介されてました。
Webページは作成に必要なhtml、js、画像など各ファイルをサーバーに用意します。サイト構築なんてハードル高すぎだけど、CodeSandboxを使うと、ファイルをまとめてWebにアップロードするだけで簡単に検証できるのでした！
便利な世の中です。
■【モダンJavaScript #7】モジュールの基礎を理解しよう！名前空間（スコープ）の問題とはおさらば！【フロントエンドエンジニア講座】
https://youtu.be/VE5wV-V--ag
■CodeSandBoxとGitHubとを連携して、どこでもJavascriptが書ける環境を構築
https://kabamof.jp/codesandbox/
簡単そうなので使ってみることに。
いろんなフォーマットがあって悩みました。
「Vanillaは素のJavascriptです。」
よくわかんないけどバニラでよさそうです。
なんだかおいしそうです。Vanillaを選んでみます。
ファイルをアップロードして、リンクを共有したら見てもらえました。
師匠がコメントを追加し編集したものをリンク共有してもらえました！
便利な世の中です。
夏・海・🐬イルカで開発スタートしたイカルプロジェクト！
秋になって（JavaScript開発そっちのけで）ますます師匠との食べ物トークに話が弾みます。バニラアイスvsチョコミントアイス論争も勃発してます。
このままうっかりしてたら冬期講習に突入しそうです！
…ch.8へ続く
この記事が気に入ったらサポートをしてみませんか？