WordPressサイトにHTMLとJSでソーシャルボタンを追加

WordPressで作成しHTML化してFirebaseHostingしている本サイトに、HTMLとJavaScriptで以下のソーシャルボタンを追加しました。 はてなブックマーク はてなスター Pocket Twitter コードの埋め込み方法 WordPressなのでphpを直接修正しても良いのですが、どこを修正したか分からなくなりがちなので、Insert Headers And Footersというプラグインを使ってHTMLを埋め込むことにしました。 このプラグインは、<head>の最後・<body>の最初・<body>の最後、のいずれかの場所にHTMLコードを差し込むことができる、とてもシンプルなプラグインです。 これを使って、<body>の最後に取得したコードを埋め込みました。 はてなブックマーク https://b.hatena. Continue Reading

Posted On :
Category:

amChartsでタグクラウド作成

とある母集団文書に含まれる単語頻度を可視化する目的で、タグクラウドをブラウザ上でJavaScriptで作成できないかを調べました。 タグクラウド(ワードクラウド)とは WikiPedia には以下のように記載されています。 タグ・クラウド (tag cloud、 ワードクラウド 、またはビジュアルデザインの重み付きリスト )はタグの視覚的記述を指す。テキストデータの斬新な視覚表現であり、通常はWebサイトでキーワードメタデータ(タグ)を描写したり、自由形式のテキストを視覚化するが、通常タグは単一の単語であり、各タグの重要性はフォントサイズまたは色で示される。 以下のようなやつです(画像もWikiPediaから拝借しました)。 文字の大きさや色から単語の重要度を視覚的に捉えることができます。 候補ライブラリ ある程度見た目が綺麗で、人気がありそうな物をピックアップしました。 amCharts Continue Reading

Posted On :

Webブラウザ上でニコニコ動画風にコメントを表示

コロナの影響で、リモートでの勉強会が増えてきましたが、プレゼン中に反応が少なくて寂しいなぁと感じることがあります。 でも意外にチャットは盛り上がってることが多いので、画面共有しているブラウザ上にニコニコ動画風にメッセージをアニメーション表示する機能を作ってみることにしました。 やりたいこと プレゼンターが会議URLを発行する 参加者は会議URLからコメントを入力する プレゼンターのWebブラウザ上に、参加者のコメントがニコニコ動画風にアニメーション表示される アーキテクチャ 検討の結果、以下の技術を採用することにしました。 ブラウザ上でコメント常時受付(フロント、プレゼンター側) => WebSocket(socket.io) 任意のページ上にコメント表示(フロント、プレゼンター側) => ブックマークレット(良いものができたらChrome拡張化して公開) コメント常時受付(サ Continue Reading

Posted On :

typescriptプロジェクトにreCAPTCHA v2 & v3を導入

reCAPTCHAはスパムやBOTなどからサイトを保護するためのもので、v2とv3があります。今回は自分がtypescriptで作っているフロントエンドアプリ(Chrome拡張)をBOTアクセスから保護する目的でreCAPTCHAのv2とv3の両方を同じ画面に導入しました。 v2とv3 v2はWEBサイトでみかけるやつで「この中から車が写っている画像を選んでください」みたいな感じで、ユーザ操作の結果でBOTアクセスなのかどうか(True/False)を返してくれます。 v3は、ユーザフリクション(本来の目的を妨げるような事象。)は一切なく、スコア(1が正常で、0.0に近づくほどBOTの可能性が高い)を返してくれます。 処理の流れ DBにアクセスする3つのアクション(Chrome拡張起動、保存ボタン、削除ボタン)の際にv3を使ってスコアを計算する フロントエンド(Chrome拡張のポップアッ Continue Reading

Posted On :

IndexedDBをつかうならDexie.jsが便利

ブラウザでデータを保管する場合、Web Storage(sessionStorageやlocalStorage )を使うことが多かったと思いますが、IndexedDBが登場したことであえてWeb Storageを使う理由がなくなりました。 IndexedDBを使う場合、Dexie.jsを使用することでだいぶ実装がスッキリするので、使い方を紹介したいと思います。 Web StorageとIndexedDBの違い そもそも本当にIndexedDBを使うのが良いのか、という疑問があるので念のため、Web Storageと IndexedDBの違いを調べてみました。調べた全ての点でIndexedDBの方が良いので、やはりIndexedDB一択ですね。 項目 Web Storage IndexedDB 型 文字列のみ boolean、数値、文字列、dateなど色々 RDBのテーブル なし。key-v Continue Reading

Posted On :

Vue+Firebaseで作ったフロントエンドアプリのバンドルサイズを削減する

Vue+Typescript+FirebaseでChrome拡張を作っているのですが、バンドルサイズが大きいよと警告が出たので対応しようと思います。 使っている技術 Chrome Extension Vue+Vuetify TypeScript Firebase Authentication Cloud Firestore ワーニングの内容 npm run build(cross-env NODE_ENV=production webpack –hide-modules)で本番用のコードを出力してみたところ、バンドルサイズが推奨サイズ(244 KB)を超えているというワーニングが出ました。 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). Thi Continue Reading

Posted On :

Chrome拡張+FirebaseでGoogle認証するいくつかの方法

Chrome拡張アプリを作っていて、ユーザのデータをユーザアカウント(email)単位にCloud FireStoreに保存したいと思っています。ユーザがアクセスできる情報をセキュリティルールを設定して制限したいので、Firebase AuthenticationでGoogle認証を行うことにしました。紆余曲折あり、いくつかの方法を試したので記録しておきます。 なお、単にGoogle認証したいだけなら google-api-javascript-client を使うのが一般的かもしれません。 【不採用】Firebase Authentication in ポップアップページ 公式ページで紹介されている方法を試してみました。参考にしたのは以下の二つのページです。 Chrome 拡張機能での Firebase 認証 Firebase を JavaScript プロジェクトに追加する Fireb Continue Reading

Posted On :