2016/11/23

ココログをTwitterカードに対応させてみる

ココログをTwitterカードに対応させる方法を調べてみた。

この設定をすると、ココログの記事のURLを Twitter に貼り付けた際に、。

のような形で表示される。

ただ、画像については記事毎に手動で指定しないといけないのが難点。

■前準備

  1. ブログの「設定」→「基本情報」の「ブログのサブタイトル(キャッチフレーズ)」欄に
     <meta name="twitter:card" content="summary" />
     <meta name="twitter:site" content="@(自分のTwitterユーザー名)" />
     <meta name="twitter:image" content="(Twitterカードにデフォルトで表示させたい画像のURL)" />
    

    ※例

     <meta name="twitter:card" content="summary" />
     <meta name="twitter:site" content="@furyutei" />
     <meta name="twitter:image" content="http://furyu.tea-nifty.com/image/kaze2_120x120.png" />
    
    のような記述を追加し、[変更を保存]→[サイトに反映]
  2. Card validatorで、適当な既存ブログ記事の URL を指定して、[Preview card]ボタンをクリック。

    Twitter_card_validator

    のような感じで表示されれば OK。

■記事投稿時

  1. 通常通りブログの記事を書く。
    このとき、記事中に Twitter カード上にサムネイル表示させたい画像がある場合には、本文の一番最初に、
    <meta name="twitter:image" content="(記事中の画像のURL)" />
    
    のように追記して、記事を保存する。
  2. Twitterに当該ブログ記事の URL を貼り付けてツイートすれば、Twitterカードが表示されるようになる。

■注意書きなど

  • 上記では、metaタグには"twitter:card"、"twitter:site"、"twitter:image" のみを指定し、Summary Card — Twitter Developersで指定されている"twitter:title"、"twitter:description"(共に Required = YES)を指定していない。
    これは、これらのタグが設置されていない場合には、Twitter 側で代わりに meta[property="og:*"] を参照してくれるため。
    ココログでは、もともと"og:title"、"og:description" 等があらかじめ設定されている。
  • meta[name="twitter.image"]を複数設置した場合には、Twitterは一番最後に設置されたものを参照する模様。
    これを利用して、「ブログのサブタイトル(キャッチフレーズ)」欄ではデフォルト画像を指定しておき、記事によって変更したい場合には、記事本文に meta[name="twitter.image"]を別に指定することで、記事毎に異なる画像を指定することが可能になる。

2016/07/10

神使の兎 ~宇治神社にて~

昨年末から「響け!ユーフォニアム」のイベントに参加したついでに宇治神社に二回訪れたときの写真などを上げておく(主として、うさぎ絡み)。
響け!ユーフォニアム 7 [Blu-ray]

響け!ユーフォニアム 7 [Blu-ray]

■ 2015年10月31日 (「響け!ユーフォニアム」感謝イベント 京都でお祭りフェスティバル~南座へようこそ~ 観覧時)

f:id:furyu-tei:20160710182954j:plain
f:id:furyu-tei:20160710183002j:plain
この手水舎の注意書き、あちらこちらで見るのだけれど、元祖はどこなのだろう?
f:id:furyu-tei:20160710183009j:plain
f:id:furyu-tei:20160710183015j:plain
f:id:furyu-tei:20160710183028j:plain
f:id:furyu-tei:20160710183018j:plain
f:id:furyu-tei:20160710183024j:plain
f:id:furyu-tei:20160710183033j:plain
f:id:furyu-tei:20160710183041j:plain
f:id:furyu-tei:20160710183045j:plain
f:id:furyu-tei:20160710183055j:plain
このときには三角みくじを購入。
うさぎおみくじは、存在そのものに気が付かなかったのだけれど、写真にしっかりと写っているという……(相変わらずの節穴)。

■ 2016年06月04日 (「響け!ユーフォニアム」今年も!宇治でお祭りフェスティバル 観覧時)

f:id:furyu-tei:20160710184651j:plain
f:id:furyu-tei:20160710184657j:plain
f:id:furyu-tei:20160710184703j:plain
f:id:furyu-tei:20160710184707j:plain
f:id:furyu-tei:20160710184715j:plain
f:id:furyu-tei:20160710184719j:plain
f:id:furyu-tei:20160710184727j:plain
f:id:furyu-tei:20160710184734j:plain
f:id:furyu-tei:20160710184740g:plain
f:id:furyu-tei:20160710184744g:plain
このときは忘れずに、うさぎおみくじを購入。

■ ところで…

宇治神社の境内マップを見ると、「パワースポット(願いうさぎ)」と「寝そべり兎」は別の場所にあるように書かれているのだけれど、願いうさぎってまた別にあるのかな……?
パワースポットのページで紹介されている写真に写っているうさぎは、「寝そべり兎」の位置にあったと思うのだけれど……。

2016/02/12

Twitter 原寸びゅー:PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介

PC版ブラウザ(Google Chrome・Firefox・Opera)で公式Twitterを見る場合に、入れておくと画像の閲覧や保存が格段に楽になるChrome拡張機能/ユーザースクリプトを作成しましたので、その紹介です。

既にある「twitter画像原寸ボタン」の機能を参考に、独自に実装・機能拡張したものです。

主な特徴は、

  • タイムライン上に(Twitterに直接アップロードされた)画像がある場合、ツイートに[原寸画像]ボタンを表示。これをクリックすると、原寸の(URLが~:origとなる)画像を表示する(複数画像も単一ページ内に開く)。
  • 開いた画像の上部に[ダウンロード]ボタンを表示、これをクリックすると、画像を保存できる。
    このとき、「~.jpg-orig」といった拡張子は自動的に「~-orig.jpg」といった形に変換。
  • タイムライン上の画像にマウスカーソルを当ててコンテキストメニューを開くと(右クリックすると)、「原寸画像を保存」メニューが表示され、画像が原寸サイズで保存できる(拡張子リネームもあり)。
    この機能は、Chrome拡張機能版のみ。

といったところです。

■動作デモ

■インストール方法・使い方などの詳細はこちら

■作成経緯

PC版ブラウザで、Twitterのタイムラインを見ていると、

  • ツイートに添付された画像が小さかったりトリミングされていたりして、見えにくいことが多い(特に複数画像があるツイート)。
  • また、ツイートをクリックして個別に開いても、特に見やすくはならない。
  • コンテキストメニュー(右クリック)や、画像サムネイルのアドレスバーへのドラッグ&ドロップ等で画像を単独で開くも、原寸サイズでないことも多い。
  • またそもそも、右クリックから画像を開けないこともある。
  • 原寸サイズで開くためには、URLの後ろに :orig を付ける必要があって、手間がかかる。
  • また、これを保存すると、環境によっては拡張子が「.jpg-orig」のようになってしまい、リネームの必要がある。

といった各種の不満が出てきます。

そのうち、これらを軽減するユーザースクリプトでも書くかな~とか思いながらなかなか実行しないうちに、ある日、既に「twitter画像原寸ボタン」というものが存在することを知りました。

これに刺激を受け、自分の欲しい機能を盛り込みつつ作成したのが、「Twitter 原寸びゅー」です。

■ネタ元はこちら

2016/01/10

スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい

タイトル通りの希望を叶えるアプリって、あるかなぁ?

  • 同一のLAN上に繋がっているスマートフォンから、PC上の音楽ファイルの再生を指定。
  • スマートフォンはリモコンとしてのみ使い、実際に音を鳴らすのはPC。
    ストリーミング再生(PC上の音楽ファイルをスマートフォンで再生)したいわけではない。
  • PCの画面は一切見なくて済むようなUI。
    リビングにあるPCを寝室のスマフォから制御したい。
  • PCからアクセスできる音楽ファイルは全て選択可能。
  • プレイリストの作成・保存・編集可能。
  • その他、一般的な音楽プレイヤーで出来るような操作は一通りできて欲しい。

■環境

まっとうなAV機器はほとんど持っていなくて、

Pc_10141_image030

のように、音源(PC・TV・PS Vita・スマートフォン)をTVに集約し、これに繋いだヘッドホンアンプ経由で各種スピーカやヘッドホンで音が鳴るようにしてある。

で、寝室にいるときに、スマートフォンを使って自由にPC上にある音楽ファイルを再生したい、というのが希望。

再生するのはあくまでPCという点に注意(スマートフォンで再生したいわけではない)。

現状は、Chrome リモート デスクトップを使い、スマートフォンからPC上の音楽再生ソフトを操作してやっているのだが、いかんせん画面が小さく、操作性が悪いのが難点。

2015/10/09

【覚書】風柳亭(ココログプロ)をレスポンシブWebデザイン化(Bootstrap3使用)

先月末に本ブログ(風柳亭)を最低限ながらレスポンシブWebデザイン化し、スマートフォン等でも閲覧しやすいようにしてみたので、覚え書き。

本ブログはTypePadベースのココログプロを使用。ココログプロのみ使用可能な上級者向けテンプレート(HEADを含むHTMLに手を加えることが可能)を利用しているため、これ以外のプランではレスポンシブ化は困難だと思われる。
実際に本ブログで使用しているテンプレートは、GitHubにあげてある。

■ベースにしたテンプレート

  • 右サイドバー付
  • アポロ/シルバー(ココログオリジナル・テーマ/テーマの種類 シンプル)

これを上級者向けテンプレートへと変換した上で、カスタマイズを実施。
TypePadのタグ等は、基本的には、標準的な TypePad のテンプレート等を参考にして、実際に出力されるHTMLと見比べながら、適当に置き換え。

■ポイントなど(そのうち整理して書くかも)

«ココログ用全文検索 - ココログ最強検索を jQuery を使って作り直してみた(既知の不具合の幾つかに対応)

戻るリンク追加

カレンダー

2016年11月
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      

ココログカレンダーPlus

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

最近のトラックバック

コメントリストツリー化

無料ブログはココログ