公開日:2023-12-03
こんにちは ゆーいちです。
この記事は Customineのカレンダー | Advent Calendar 2023 – Qiita の3日目です。
年末年始は、そばやうどんを食べる機会も多いかと思いますが、カップ麺で年越しそば・年明けうどん なんて方も多いのではないでしょうか?
※私も独身の頃はそうだった
今回は、そういった年末年始のカップ麺需要に大活躍してくれること間違いなしのカスタマイズ「カップ麵タイマー」の作り方をご紹介します!
自分で作ったカスタマイズでカップ麺を食べると、新たな発見やおいしさがあるかもしれませんよ。
カップ麺タイマーの動きについて?
編集画面に遷移し、ボタンを押すとタイマーが開始します。
カップ麺を開け、カスタマイズしたアプリも編集画面に遷移します。
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cbffe6514163c9217d4_IBO7AMjQA_m-UM52qYQQEzu6LW7jCj18x6QyOx68pIQnRrgZ7SRFzhmdCmXbTLo_fAgVubLUgc10GLC9XjW10jVpArPjEshhETOUTBoSr1hyYths9MzlIzYDIqTMbCKn975xc7Gx8RcSzdfCN17Fqfw.jpg)
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cc0a674465b573f1c7f_JqMxd0cD-TebzB2IIr0IfPzMHCQrCkSRWVy1CzYSwBX521WrDIesQ8DTLbQhusmgfz_Dvh-9QtLvwiXeagW0OldsJ6ysVT0CNGgZkZIhmrncnNtA5PZiEqj9LZN-jsQKJG3S4IgIIJyMoVuAsI5gyGE.jpg)
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cbef571ce6bf97ff309_bhn63ISC-HK0Kh9TXMOKcBRJ1ES22bjjetug0P2XC6-No6KctJr0FYR0RoW-udnwHUC8wfdhl68CeCOAilm-72zIQYtDETXL4YE3qcAV0lW9SBAVRN2YUeEO2G47NdmQ49U1E4sswgFeTDe3WQm_5k.jpg)
そして、3分後にダイアログが出てカップ麺の食べごろをお知らせしてくれます。
![](https://www.r3it.com/wp-content/uploads/2023/12/6568621aebac5a93010c0f07_Gi2qbz9GyVB1SSxw9Wa87fG54ft1TVjL4eTBfE0yV1qk-Td1afQUgkHJsNHqzXpP0f4U_3zOlUrgTvuJFPwqKfCNHn5gMbmurXKTsSPrgVFXn2ot8lVZPvdY5qK0WwWK3Rf4m6PbVRJpeNvF7vZxwPA.jpg)
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cbe660681e9ab5a4d1d_Liz0SNI7aPGRwkkS7wrHfJwkeIHg2DrfbAJNIKkajLs57KTN6xt1ejJLMgeF3dwNNEHmeanvhQT-UGwiGl-ANnUbUkhMlMRiDc6AI-lcdnGtFi-0dxF6eedLrb5HnlThEA6XQ96WJPBCogbnj1wdoI8.jpg)
※今回は カップヌードル エビまみれ | 日清食品グループ (nissin.com) を食べてみました。お湯を注いで3分後、蓋を開けた瞬間エビの香りが爆発する凄いカップ麺でした。大変おいしかったのでご興味のある方はぜひ。
カスタマイズの全体像?
まず、カスタマイズの全体像を説明する前に、今回のカスタマイズを行ったアプリについてご説明します。フィールドは3つだけです。
※フィールドコードとフィールド名は同一としています。
![](https://www.r3it.com/wp-content/uploads/2023/12/65685dd8b022646472cf921f_tmGZyu0rsTOtfoprBTquJyLiMq9xCt2vqxqua7MoPMOXcHkCTyu5giVsQRW31N40dapv6jRojAE4Gr0nSunY2DO-r24ygmjKe8igR_hqyThO1LlKLHFP13BNSMf_E5IxK4GjOVmRWZbIjCWKAdiTy10.png)
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cbf0539bc6c66761ec5_NOclSuW7kk6EofIQ-tSYmGI_hd5PklxPCu2wP2gV8m2VNYKVIzdtSoqW3uQYgmLeiA9UJJ8C6Xpg1ZdRiRU_VvDAV6G9TiphN8xK5MmKfh6lNCwYgVhiETx0UnXvVg-GAfajI2m2wpbL4LkiHHe9ngY.png)
また、カスタマインでカップ麺を作るのに必要なアクションは7ステップです。
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cbea59b616cd3f4a422_EJhgTFborjvyY-vgqJAMi5PuoXdz27cfU_I-joFDmF-BEyFazj9Hp7bM5kBmXZinIADyWbB0FffEnGH-95u9nw8-jv5lmogxrwh3DFcVc02VfGejMBzQg7AgrxmzHTMJDhOg9lU3GppDl9s2YgbqLdg.png)
なお、アクショングラフは次のようになります。
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cc384bde69db02054a5_Xj3AHzOYc8WpwQH09-d3y_kEeKE_fHqujvRag-PRcMmkckGU1mrmYSvVqFzI0K-5chMlQAX2Ks1TFHTR4ag_MSIZ9Tn2Yl-AXejDsobKoIiagfRueZkJJPMx-z0-D1rR6dBiGhIhsg4iFOnHoAGJ4Uw.png)
それぞれのアクションの簡単な解説
アクション1:やること「ボタンをメニュー位置に配置する」条件「追加画面・編集画面を表示した時」
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cbea674465b573f1b8d_fuBO3QXxTZ4zTY92HsSiQLPN0J-rsEyTSw09fchKUIVLDwTRJQrzsRD6ihJ2UXu5VVRR6NUCxYsGVHYOp0cmJt3TfVDfqO_5oT3KQ9iymzyorAh8u1GDZDHycxI_vbxl0G51kFqX_ZG3C3YhdZRlTFY.png)
ボタンを表示させているだけです。なおフィールドの値を変化させて3分タイマーを実現しているので、追加・編集画面でのみ動きます。
アクション2:やること「時刻を計算する」条件「ボタンを押した時」
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cbfdfa73ed92e62452b_YWUwrjJp4FHSa88Rq_WXLqvYnMwocajEq-laMpKINLH49Lv0ySkpZTwM-4cfVxPOCB6UENp1i8i3mxBtbhaT4xikTgkLelcdbd3nsn_Tr8IFL7BOyDZ6lIrRZhFNGG_URN6q0-AYqiqARv1B5kLJmco.png)
ボタンを押した時から3分後の時間を計算します。
※カップ麺がもしうどんだと5分だったりするので、設定値はカップ麺に合わせてください。
ここで一つポイントがあります。
kintoneの日時フィールドや時刻フィールドに一旦値を入れ、その値を元に処理をした場合は、秒数の情報が消えてしまう動きとなるのですが、
カスタマインでは「時刻を計算する」のドキュメントには次のような記述があります。(使い方 のところ)
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cbf6856741954de4dce_tu9_3huz80JsAs65rlmcULpF2gIvskz13bFyso-ReWJZTER1LHwO3DKcg23Qu2c1gr6uTsrgouOpjZ7UrL6dSuJWy24UVII9YncOapakLU-uZbgPoR8tzb_O0Xok5la0O1-B4aJXA3FranLD4IKOkzk.png)
これは簡単に言うと「日付を含む形式の場合、日付+時分秒までの情報を計算結果として持てる」という意味で、「now 関数」を使って計算した場合は秒単位での3分後の日時を正確に持つことができます。
今回は秒単位の精度できっちり3分を測りたいので、このアクションの実行結果を基準に処理を動かし、ほぼほぼ正確なカップ麺タイマーを実現しています。
アクション3:やること「数値の範囲から数値を取り出す」条件「いずれかのアクションの実行が完了した時」
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cc0660681e9ab5a50b1_W3NoyhZUwyFCgAx0fmxmEhX8SCKHLhOxF_9yGMQq7fQTAXuunj8PUG3ik3DCdRirFNmUbcsJ6UMB3wQ64NNu9aP-j6pZ9ovz8riUOaFWHsZb2COrxB_74BL3e4pUQsuNmjRKDbCwyEtat-_LLGwe28g.png)
ここでは、ひたすら「数値の範囲から数値を取り出す」を動かし続けて、カップ麺タイマーのタイマー完了を待つ処理の、メインのループを実現しています。
アクション4:やること「なにもしない」条件「リストから要素を取り出した時」
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cc0a59b616cd3f4a4e8_9xO7ZPa80anCugMjpmx37ueAQmw-U-d-5cbrAPvdRUr-2P1Yonlxic6_xxoVBHFdH_CakhLR5vTbzLCfNGuzIncTFedAuJefp6oT0oXJ7KwTYsY4Aq-uRhTzaeOQLIh8FKmfgDJhJmpcq61EO7f2NTg.png)
これは、TIPSの「「なにもしない」でなにかする : gusuku support」の応用例になります。
やること「数値の範囲から数値を取り出す」などの取り出す処理と、条件「リストから要素を取り出した時」でループ処理を作る場合に、取り出す処理から複数の条件「リストから要素を取り出した時」でアクションを繋ぎ、さらにそこに条件を足すような処理は正しく動かせないのですが、
このアクションのようにやること「なにもしない」を1つ挟んで、その後のアクションで条件によって動きを変える作りにすると、その様な処理を実現する事ができます。
アクション5:やること「フィールドに値をセットする」条件「他のアクションの実行が完了した時」「2つの値を比較して条件を満たすならば」
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cbf24904e3d4fe350f3_itt3C7VMhZZkCFG6_765anHg-QiLolcKZ_Z8tSHHtNWJq25vet8cxeoA4vZALqbQDK39RKU0XMgUItm2WnZQ-rtBREDE53ZtTKsc0e-r0IHI50vCUX2yMjywsX3Rvej928B6ExQMquNL1tlgbvkxxI8.png)
アクション2で計算した3分後の日時(秒までの精度)を超えていなければ、この処理が動きます。
アクション6:やること「フィールドに値をセットする」条件「他のアクションの実行が完了した時」「2つの値を比較して条件を満たすならば」
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cc1660681e9ab5a510b__G6Ujqz4Rel-4pqYdmKIL6u_e6b48pGVAxDI0nE6LiHGRmllwzhPSxKR_HC2GP48jNc37uzEWg6rz2YK2C2SsE4-_kwfoyHgqZ9WwVBO6__QstM7tOWDmvZoDsWQLbQbWB5pH2DNQojJULYlRUem9AE.png)
アクション2で計算した3分後の日時(秒までの精度)を超えると、この処理が動きます。
この時、「終点」フィールドの値を1に変更することで、アクション3が次に動いた際、ループを終了し、通知できるようになります。
アクション7:やること「情報ダイアログを表示する」条件「リストからの取り出しが終了した時」
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cc02f0e829c5acb69c4_wF0rNjILhM2nGzjhO1irtSiDHQWVYIpQrOhzMEioZMnLFrERkQwCEWEBKsJ6WpBp47tDOJoB3pXlzwdvigJrVljSz9v9AU4syA73nEiSzefKEqWp16FGXQ3HOtuSFzOMlZ2UP0thSJC-lgDNEDywfxg.png)
先のアクション6が動けば、リストからの取り出しが終了するのでダイアログを表示して食べごろを通知しましょう!
![](https://www.r3it.com/wp-content/uploads/2023/12/65685cc07dcc92b8a348a25b_JcQzUXmDp6W3kv3vXvNYfVMP5iDGPj1vDpPZtsmdATtLB8P2BPODIDG9HmHBcQWQlU6Sv-mjRNv5qg3YQ0bmPY2GXW-JrL7sR8WMLvjbkYjFmoOtDyBW5N0O_qqFLnMhuvgWhAGA0EBYi4lU0x5FBB0.png)
おわりに
すこしテッキーな感じの内容になってしまいましたが、どうだったでしょうか?
このアドカレを楽しんでもらえれば嬉しいな と思います。
投稿者プロフィール
![アバター画像](https://www.r3it.com/wp-content/uploads/2023/08/cropped-yuichi-100x100.jpg)
最新の投稿
kintone2024年5月16日第十回技術書同人誌博覧会に行ってきました!
gusuku2023年12月3日カスタマインでカップ麺(タイマー)を作ろう!
community2023年12月2日第九回技術書同人誌博覧会に行ってきました!
kintone2023年11月17日Cybozu Days 2023 に行ってきました!(ゆーいち)