はじめに

Chrome 拡張機能を React などで構成された SPA で動作させる方法 で、background から JS を注入する方法を整理した。が、別要件で上手くいかないケースがあったのでメッセージドリブンで処理タイミングを通知する方法を整理した。

TL;DR

続きを読む

はじめに

とあるページ向けに作っていた拡張機能が上手く動作しなくなったので確認すると、React.js を利用した SPA に変更されていた。

リロードするとちゃんと動作するのだが、クリックなどでページ遷移すると拡張機能が動作しないので、対応方法について調べた。

続編: Chrome 拡張機能で background scripts から content scripts にメッセージを送信する

TL;DR

続きを読む

はじめに

docs 配下を対象にした GitHub Pages を、検索エンジンにクロールしてもらうために調べたことを整理した。

ちなみにターゲットは以下のサイト。

TL;DR

  • docs_config.yml を配置
  • docsgoogleXXXX.html を配置
  • Vue CLI の場合は public に配置してビルド
続きを読む

HTML の OGP meta タグの設定方法



カテゴリー Programming

はじめに

OGP の設定について調べたので簡単にメモ。

調べる前は「面倒くさそう」と思ってたけど、ちゃんと見たら大したこと無かった。

TL;DR

  • <head>prefix を付与
  • <meta property="og:xxx" content="xxx> で各要素を指定
  • Twitter は <meta name="twitter:xxx" content="xxx"> で指定
  • Facebook は <meta property="fb:xxx" content="xxx"> で指定
続きを読む

はじめに

Chrome 拡張機能で CSV ファイルを生成してダウンロードする方法について整理した。

TL;DR

ほぼ JavaScriptでファイルダウンロード処理を実現する - Qiita の通り

  • new Blob でオブジェクトを生成
  • createObjectURL で URL に変換
  • <a href="..." download="hoge.csv"> でダウンロード
続きを読む

はじめに

Vue CLI + Vue Router で作成したプロジェクトを GitHub Pages で公開する方法についてまとめた。

TL;DR

  • vue create 時点で Vue Router を使う設定にしておくと楽
  • vue.config.js でビルドファイルの出力先などを設定
  • ビルド&プッシュしてリポジトリの設定を変更すれば OK
続きを読む

はじめに

Twitterデータの tweet.js を読み込んで全ツイート履歴を表示するツール「tweet.js loader」の紹介 で作った tweet.js loader の技術面について整理した。

TL;DR

  • 主に埋め込み用ツイートの表示で苦労した話をまとめた
  • Vue + GitHub Pages の設定例についても少しまとめた
続きを読む

はじめに

Twitter には以前「全ツイート履歴」という、自分の過去のツイート情報をまとめた CSV ファイルや index.html をダウンロードできる機能があったが、2019年8月頃の UI 刷新を契機にその機能が無くなってしまった模様。

代わりに Twitterデータ というページから、過去のツイートに関する情報(画像ファイルなど)をダウンロードはできるが、肝心のツイート履歴そのものは tweet.js という JS ファイルに記録されているという謎仕様。

扱いづらかったので、tweet.js を読み込ませることで全ツイート履歴を表示できる tweet.js loader というページを作ったので簡単に紹介。


TL;DR

続きを読む

はじめに

OSS の CSS Framework Bulma を使って、メルカリ風のレスポンシブなデザインを構築する方法について整理した。

「メルカリ風のレスポンシブなデザイン」というのは、

  • デスクトップなどでは「サイドバー」+「コンテンツ」
  • モバイルでは「サイドバー」が非表示になり、クリック(タップ)で表示される

というような構成を意味している。

TL;DR

  • モバイル表示時には隠したい部分に is-hidden-mobile クラスを付与する
  • モバイル表示時に隠した要素を表示するためのボタンなどに is-hidden-tablet クラスを付与する
  • 上記ボタンをクリックした時に is-hidden-mobile をトグル(On/Off)する
  • 全体のデザインは columns + column + is-<n>-<device> で調整する
続きを読む

r17n


Softwear Engineer


Fukuoka