Instagram の画像だけ表示する方法



カテゴリー Programming
タグ
HTML Instagram JavaScript Programming Vue.js

はじめに

Instagram の画像だけ表示する(埋め込む)方法。

Instagram の投稿を普通に埋め込むと以下のように表示されるが、これの画像だけ表示したいという話。

JavaScript, HTML が分かる人向け。あと、Post ID(https://www.instagram.com/p/CCCxoXvBX0_/ の CCCxoXvBX0_ 部分)が予め分かっている、という前提条件あり。

通常の Instagram の投稿埋め込みについては Instagram の埋め込みコードに関する調査メモ を参照

TL;DR

  • oEmbed API を使う
    • GET https://api.instagram.com/oembed/?url=https://instagram.com/p/xxxx
    • レスポンスの thumbnail_url を使えば OK
  • Vue での実装例あり
続きを読む

Cordova アプリに Twitter Timeline の埋め込み



カテゴリー Programming
タグ
Android Cordova HTML JavaScript Node.js Programming Twitter Vue.js iOS

はじめに

Cordova iOS アプリ, Android アプリで Twitter Timeline の埋め込みを実現する方法。

TL;DR

1
2
3
4
<allow-navigation href="https://*twitter.com/*" />
<allow-navigation href="https://cdn.syndication.twimg.com/*" />
<allow-navigation href="about:*" />
<!-- <allow-navigation href="*" /> 1つでも OK -->
続きを読む

Instagram の埋め込みコードに関する調査メモ



カテゴリー HTML
タグ
HTML Instagram

はじめに

Instagram の埋め込みコードについて調べたので簡単に整理した。

TL;DR

  • 埋め込みコード取得は、Instagram 投稿の右上「…」から「埋め込み」を選択
  • 画像だけにしたい場合は「キャプションを追加」のチェックを外す
  • 読み込み完了までの代替表示が不要な場合は blockquote と script だけでも OK
続きを読む

Vuex の状態を robinvdvleuten/vuex-persistedstate で永続化



カテゴリー Programming
タグ
HTML JavaScript Node.js Programming Vue.js

はじめに

Vuex の状態を robinvdvleuten/vuex-persistedstate で localStorage などに永続化する方法。

TL;DR

  • npm i vuex-persistedstate でインストール
  • plugins で設定するだけで OK
  • localStorage 以外を使いたい場合は storage オプションで設定
    • sessionStorage, Cookie, localStorage + 暗号化, etc
続きを読む

Vue.js で PeachScript/vue-infinite-loading を使った無限スクロール(Infinite Scroll)



カテゴリー Programming
タグ
HTML JavaScript Node.js Programming Vue.js

はじめに

Vue.js で PeachScript/vue-infinite-loading を使った無限スクロール(Infinite Scroll)の実装方法。

TL;DR

  • npm i vue-infinite-loading でインストール
  • <infinite-loading @infinite="infiniteHandler" /> を記述
  • infinite イベントのハンドラ内でデータの追加や、読み込み完了などの処理を実施
続きを読む

Twitter の埋め込みツイート(Embed tweet)を Lazy load



カテゴリー Programming
タグ
HTML JavaScript Programming Twitter

はじめに

Twitter の埋め込みツイート(Embed tweet)を Lazy load させる方法

TL;DR

  • ApoorvSaxena/lozad.js を CDN などから読み込み
  • カスタムハンドラ内で埋め込みツイート作成に必要な要素(blockquote, script)を 作成/追加
  • いきなりイベントが大量発火しないように min-height などを設定しておく
続きを読む

webpack & Babel を使って Chrome 拡張機能を開発するためのテンプレート(Hot Reload 付き)



カテゴリー Programming
タグ
Babel Chrome Extension HTML JavaScript Node.js Programming npm terser webpack 開発効率向上

はじめに

webpack & Babel を使って Chrome 拡張機能を良い感じに開発できるテンプレート(Hot Reload 付き)を作った。

TL;DR

続きを読む

Vue.js でキーボード操作可能なコンテキストメニュー(右クリックメニュー)



カテゴリー Programming
タグ
HTML JavaScript Node.js Programming Vue.js

はじめに

Vue.js で矢印キーや Enter キーによるキーボード操作が可能なコンテキストメニュー(右クリックメニュー)を表示する方法。

調査/検証 したところ rawilk/vue-context を使うのが一番楽だったので、基本的には vue-context の使い方についてのまとめ。

TL;DR

  • rawilk/vue-context だとキーボード操作にデフォルトで対応
  • ネストは li.v-context__sub と ul.v-context を使う
    • ←, → キーによる階層の移動が可能
  • スタイルは .v-context li, .v-context li a:hover, .v-context li a:focus あたりで変更
続きを読む

Vue.js で日本語変換での誤発火を抑止しつつ Enter キーで Submit



カテゴリー Programming
タグ
HTML JavaScript Node.js Programming Vue.js

はじめに

Vue.js で入力フォーム フォーカス中に Enter キーで Submit させる方法について整理した。

ほぼ参考サイトの通り。

TL;DR

  • 単純に @keyup.enter を使うと、日本語変換での確定 Enter も対象になる
  • @keypress.enter だと、日本語変換での確定 Enter は発火しない
  • 組み合わせてフラグ管理することで実現
続きを読む

r17n


Softwear Engineer


Fukuoka