- 1. チャットbotをchromeの拡張機能として作成してみた
- 2. JavaScript(php smarty内 .tpl 記述) ラジオボタン、テキストエリア 制御
- 3. Zendeskで目次機能を実装した
- 4. JavaScript の && 演算子は true/false を返すとは限らない
- 5. addEventListenerを使ってみた
- 6. Progate +α メモず【JavaScript】
- 7. JavaをインストールしないでJavaアプレットを実行する方法
- 8. 初めてのuseEffect。いつ実行されてる?
- 9. ParentNodeとParentElementの違い
- 10. Jinja2の基礎 for Flask
- 11. GitHub ActionsでJSON形式のトークンがそのまま使えない
- 12. 【React】アロー関数内で波括弧の省略どころがわからずハマった
- 13. ExpressにstaticなReactアプリを配置する方法 (改)
- 14. FileMakerでQRコード(jquery.qrcode.min.js)を生成し画像保存してみたい。
- 15. ボタン一つで感動を!簡単紙吹雪アニメーションの作り方🎉
- 16. thisの挙動のイメージ
- 17. jsdom の HTMLDialogElement APIの対応状況について
- 18. Three.jsの基礎(マウスイベント)
- 19. JavaScript とは
- 20. p5.jsをVue3のコンポーネントにする
チャットbotをchromeの拡張機能として作成してみた
## はじめに
#### この記事の目的や背景
今回自社botをLangchainを使用して作成している際にインターフェースをコミュニケーションツールに置くのか、webアプリを作成するのか使い勝手を検証するためのChromeの拡張機能を使用してチャット画面を常に表示させるとどうなるのかなと思い試してみました。
#### 対象読者
・チャットアプリを作成してみてたい方
・Chromeの拡張機能の作り方を知りたい方
## 目次
1. Chromeの拡張機能とは
2. Chromeの拡張機能でできること
3. Javascriptコードの実装
4. Manifest.jsonの作成
5. ChromeのデベロッパーモードでChromeにアップロード
6. 実際に触ってみる## 1. Chromeの拡張機能とは
見出しの通りになりますがChromeの機能を拡張することができます。
こちらのwebストアからhttps://chromewebstore.google.com/?utm_source=ext_sidebar&hl=ja色々な拡張機能をインストールすることができます。
また自分
JavaScript(php smarty内 .tpl 記述) ラジオボタン、テキストエリア 制御
## ■完成イメージ
・ラジオボックス(香炉)デフォルト、連絡事項に記述無し
・テキストエリア(連絡事項)
![スクリーンショット (924).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478380/ab05efe8-21ac-cf11-a637-3f5a9dc53d02.png)・ラジオボックス(香炉)香炉有りの場合は、連絡事項に追記
・テキストエリア(連絡事項)
![スクリーンショット (925).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478380/2f0f2098-bf2d-3e41-a33b-f818c02279a0.png)※香炉以外の他にラジオボタンが3つ
## ■ソースコード
“`javascript main.js// === コンテンツをロードしたら実行
document.addEventListener(“DOMContentLoaded”, function() {
Zendeskで目次機能を実装した
# はじめに
これまで大きなZendeskカスタマイズの受託を2件ほど経験してきました。あまりZendeskのカスタマイズについて、個別具体的に解説している記事がないので、我流のカスタマイズで恐縮ですがここに残したいと思います。
### 「Zendeskとは?」 という方へ
私自身ZendeskのGuide機能しか取り扱っていないのですが、ざっくり説明すると「企業のヘルプセンターがノーコード(カスタマイズ等を実施する場合はローコード) で構築できるよ!」というSaaSです。もっと詳しく知りたい方は[こちら](https://zeq.co.jp/case)を読んでみてください。
# Zendeskで目次機能を実装する
## 最終的に目指している状態
記事内の任意の場所に`
`と記述することで、記事内のヘッダー要素を取得して下記のような目次を作成する。(前提としてjQueryを使用しています。)変数名の前に「$」を付けることで、その変数がjQueryオブジェクトを格納していることを明示しています。 ### 記事の状態
#### 記事内の任意の場所に`
`
JavaScript の && 演算子は true/false を返すとは限らない
# はじめに
React Hook Form のサンプルを見ていたら、こんなコードがありました。:::note info
というか、React 本家のチュートリアルにもありますね。
https://ja.react.dev/learn/conditional-rendering#logical-and-operator-
:::“`react:エラーがあれば&&の右を出力
{errors.exampleRequired && This field is required}
“`普段 JavaScript を書かない立場としては、すぐには理解できませんでした。
入力チェックの結果、エラーがある場合ならこういう挙動のはず。
1. `errors.exampleRequired` に何らかのオブジェクトが入っている
1. `true` と評価される
1. 右オペランドが評価される
1. 右オペランドが `true` と評価されれば、`true` が返される
1. 右オペランドが `false` と評価されれば、`false` が返され
addEventListenerを使ってみた
こんにちはAtsu1209です。
今日は最近jQueryに頼りすぎたので、jQueryを使わずにコードを書きます。# 初めに
今日はフォームに入力した値をalertで表示します。
そしてjQueryの代わりにaddEventListenerを使います。# HTML
まずフォームを作ります
“`html
HAHAHA
“`
ごく普通のフォームを作りました。
次に本題のJSを書きます。# JS
“`html