カテゴリー「ウェブログ・ココログ関連」の222件の投稿

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"]を別に指定することで、記事毎に異なる画像を指定することが可能になる。

2015/10/09

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

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

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

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

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

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

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

2015/09/01

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

ちょっとしたきっかけ(後述)があって、今更ながら、なおゆきさんココログ最強検索(自分のココログを全文検索するブログパーツ)を jQuery を使って移植(リメイク)してみました。

既知の不具合のいくつかにも対応してある……つもりですが、ほぼ全面改修となっているため、別の不具合が混入している可能性も高いです(汗)。

■ ココログ用全文検索をココログに設置


作者名
提供元
パーツ名
パーツID
設置用HTML

お好みで設置用HTML欄(テキストエリア内)のオプションを変更してから登録することもできます。

「Request-URI Too Large」というエラーが出る場合は、[ココログに設置]ボタンを押す前に、あらかじめご自分のココログのアカウントでログインした状態で、再度お試しください。

■ お試し用ブックマークレット

検索ボックスがついていないココログ(ブログ)でも、検索できるようにするブックマークレットです。

ご自分のココログで上記のブックマークレットを試してみて、うまく動かないようであれば、残念ながら対応していないということになります(コメントでご報告いただければ、可能な範囲で調査いたします)。

■ 対応した(つもりの)オリジナル(2015/09/01現在)の既知の不具合と改善点

  • テンプレートによっては検索結果が表示されない/サイドバーに表示されてしまう(オリジナルテーマで、一列構成や二列・右サイドバー構成の場合等)。
  • 本文中にSCRIPT要素やSTYLE要素、コメント(<!-- ~ -->)などがある場合、それらの中の文字列もひっかかってしまう。
  • まれにうまく記事の内容が取得できないことがある(リッチテンプレートで、フッタに permalink が設定されていない場合等)。
  • TEXTAREA内の要素もハイライト対象となってしまうため、内容が書き換えられてしまう。
  • オリジナルテーマにて、記事中にIMG要素がある場合、バックナンバー読み込み中に画像も無駄に取得されてしまう。
  • 特定の文字(半角数字一文字等)で検索するとエラーが発生する。
  • 検索ボックスが下の方に設置されているブログだと、二回目以降の検索が面倒(またその場所までスクロールする必要がある)→検索結果上部にも検索ボックスを設けることで対応。

■ 経緯

つい先日、このブログ中に貼り付けてあるツイッターのツイートが、なぜか突然表示されなくなってしまいました。

サイドバー等に設置してあるスクリプトを外すと表示されるようになったため、ひとつずつ試していくと、どうやら使用していた prototype.js が干渉しているらしいことがわかりました。

prototype.js のリンク先をなおゆきさんのブログ上のものに変更することで問題は解消できたのですが、せっかくだし(?)、前から気になっていた不具合解消のため& JavaScript(jQuery)の勉強のためにも、いちから作り直してみるか、と思い立ったのでした。

で、よく考えて見れば、自分が使っているのはココログプロ等用自分でカスタマイズしたものであり、こちらも改修が必要、というオチが、ですね……。

■ ココログプロ(上級者向けテンプレート)用

というわけで、ココログプロとかTypepadとかMTとかブログ人とかその他のブログサービスとかでもAjaxでバックナンバーを検索するJavaScript: 暴想を jQuery を使用して移植したものはこちら。

【設置用スクリプト】

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://furyu.tea-nifty.com/script/jq-highlight.js"></script>
<script src="http://furyu.tea-nifty.com/script/jq-blog_ajax_js_search.js"></script>
<script>
window.blog_ajax_js_search_options = {
    color : '#ffcc33' // ハイライトの色
,   truncation_length : 80 // 検索結果でキーワード前後に抜き出すテキストの長さ
,   entry_per_page : 20 // 検索結果の1ページ辺りの記事数
,   display_search_form : true // true時、検索結果上部に検索フォーム表示
,   look_ahead : true // true時、裏でバックナンバーを先読み(パフォーマンスに影響)
,   search_box_id : 'search_box' // 検索フォームのキーワード用INPUT要素の id
,   search_credit_id : 'search_credit' // 検索フォームのクレジット用SPAN要素の id
};
</script>
<form onsubmit="blogAjaxJsSearch( jQuery('#'+blog_ajax_js_search_options.search_box_id).val() ); return false">
    <input type="search" id="search_box" name="search_box" value="" results="5" autosave="tangerine" placeholder="検索語を入力" />
    <input type="submit" value="検索" />
    <span id="search_credit" style="font-size: xx-small; margin-left: 4px;"></span>
</form>

【テンプレート(インデックステンプレート)】

  • テンプレート名: Archive Search Data
  • 出力ファイル: search_data.txt
  • テンプレートの内容
    <?xml version="1.0" encoding="utf8"?>
    {
    data:[
    <MTEntries all="1">{
    title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
    ,link:"<$MTEntryLink$>"
    ,body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$>[<$MTEntryKeywords remove_html="1" encode_js="1"$>]<MTComments><$MTCommentAuthor remove_html="1" encode_js="1"$><$MTCommentBody remove_html="1" encode_js="1"$></MTComments>"
    },</MTEntries>
    {title:"",link:"",body:""}
    ]
    }
    

2013/01/05

現在に生きるということ。

振り返りたくない過去もあるよね。
とはいえ、過去に作りっぱなしにしたプログラム(スクリプト等も含む)や、それに関して書いた記事なんかの、特に
  • 動作可否や制限等。
  • エラッタやバグのフィックス。
  • 関連記事一覧
などを記述したりまとめたりしたいんだけれど、考えるだけで疲れ果ててしまうので手つかず。
たまにアクセス解析なんかを見て「あ~、それもう動かない奴だよ~、申し訳ない~」とじたばた。

2012/06/05

ココログの「いいね!」のこと

(最近まで)ココログの「いいね!」ボタンいいね!は当ブログでは表示していなかったはずなのに、なぜかときどき「いいね!」されてメール通知が来ていたので「あれっ?」とか思っていたのですが、ココログ広場のブログ広場などからでも「いいね!」できるのですね。とりあえず謎は解けた、かな。
それにしても、ココログプロユーザーだとブログパーツをココログに設置するのに苦労したり(この問題、まだなおっていなかったんですね…)、「いいね!」のメール通知だと、実際に広場を見に行くまでどこの記事に「いいね!」されたのかわからなかったり、相変わらず痒いところはそのままですね(苦笑)。
せっかくなんで、「いいね!」ボタンを設置されていないココログや、ココログ以外のページにも「いいね!」したり、どこに興味をもったかマウスで範囲指定してタイトルに入れるようにしたり(はてなスターの引用みたいなもの)とか、思いついたりしたのだけれど、
ココログ広場に「いいね!」するブックマークレットを作るブックマークレット - Hatena::Let
相手先に伝わらないといまいち意味がない(↑で生成されるブックマークレットだと、自分宛の「いいね!」になっちゃう…)とかあって、保留中。

2012/03/15

ココログのツイッターへのクロスポスト、デフォルトにはできない…?

先日記事にしたココログからツイッターへのクロスポスト機能のチェックボックスって、デフォルトでチェック状態にできないんでしょうか?

Cocologtwittercheckbox

↑こんなやつね。
Cookie有効にした同一ブラウザで投稿しても、常にチェックがはずれているしなぁ…。
設定を探してみたけれど、それらしいのは見つからないし(2010/09/23のこちらの質問にも回答がついていないみたいだし)。

  • 2012/03/17:公開していない(パスワードをかけている)ブログの記事の場合は、Twitterへの通知はチェックしないように修正(ver.0.02)。

2012/03/07

最近ツイートしていないけど

ブログに記事を書いたら、FriendFeedからTwitterにツイートされるように設定してあったはずなんだけれど。
2012年2月27日を最後に、投稿されなくなったみたい。
で、FriendFeedからログインしようとしてもアカウントが見つからないとか言われるし…。
それこれで調べていると、どうやらココログにも、ツイッターへのクロスポスト機能がいつの間にかできていたらしい。
2年前だよ、この記事……いかに自分が今浦島か分かるな。
この記事が設定をした一つ目の記事になるんだけれど、果たして無事ツイートされるかな?
そういえば、先日記事にしたツイートボタンの方も、普通のココログだと(形は違うけれど)2年以上前からの機能だったらしい。
とあったので、自分でも調べてみたら、明らかに設定したはずのないメイン以外のブログやフリーのココログのほうにも勝手についていたので、最近はデフォルトで有効になっているのかも。

2012/03/05

意味も無くツイートボタンを付けてみる

Tweetbutton

こんな奴ですが。
普通のココログのテンプレートだったら、管理画面のブログの「デザイン>表示項目を選択」の「表示項目」の「□フッター」にチェックをつけて「設定」リンクから「□Twitter」のチェックを付けるだけで、表示できます。
で、プロコースだったら、上級テンプレートに変換してやれば、コードのフッタの辺りに
<MTWeblogIfExposePostFooterLinks>
	<p class="entry-footer-share<MTIfEntryPostFooterLinksAsButtons> entry-footer-share-buttons</MTIfEntryPostFooterLinksAsButtons>">
		<$MTEntryPostFooterLinks$>
	</p>
</MTWeblogIfExposePostFooterLinks>
みたいなのが付け加えられえいます。ですので、当ブログでも、このコードを切り貼りしてやれば設置できるな、と思っていたのですが……。
当ブログで使っているテンプレートが、相当前に上級テンプレートに変換したからなのかどうなのか、上記タグを貼り付けても、ツイートボタンはつきませんでした。
仕方が無いので、Twitterボタンのページで表示されるソースコードを参考に、
<div class="twitter-share-button-container clearfix">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<$MTEntryPermalink$>" data-text="『<$MTEntryTitle$>』" data-via="(自分のscreen_name)" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- /.twitter-share-button-container --></div>
みたいな感じで貼り付けることにより、無事表示されるようになりました。
でもこれ、IFRAMEなんだよね…重いかな?

2012/02/27

「どうした、顔色がよくないようだが…」(その壱)

何気なくSleipnirを起動し、「お気に入り」がすべてなくなっていることにしばし唖然…「えっえぇっ?!」
C:\Program Files\Fenrir & Co\Sleipnir\settings\(ユーザ名)\Favorite.ffv のサイズが、91バイトになってやがる…。
メインのブラウザはGoogle Chrome(最近はFirefoxもまた復活しつつあるけれども)なのだけれど、昔作ったブックマークレットとかはSleipnirにしか保存していない事が多いのですよね。
幸いにして、Sleipnirは C:\Program Files\Fenrir & Co\Sleipnir\settings\(ユーザ名)\backup の下に、お気に入りのバックアップを取ってくれてあったので、最小限の被害ですんだのですけれども。
2/25と2/27の間に(1,106,619バイト→81 バイト)、いったいなにがあったんだ…。
あ、フォルダ名等はWindows XPのデフォルト設定です。

2010/11/07

ココだい:ココログ広場 ≫ つぶやきのお題をキーワードで検索するサービスを試作

ココログ広場つぶやきのお題に登録されているお題を検索するサービスを試作してみました。
つぶやきのお題も数が多くなってきて、参加したいお題を探すのが難しくなってきてますし(よく更新される奴はサイドバーに出てくるんですけれどね)、「あれ~、あのお題のページはどこだ~?」というときに、お試し下さい。
ココでもの姉妹サービスです。
ココだい: ココログ広場 ≫ つぶやきのお題をキーワードで検索
具体的には、
  1. ユーザー名(の一部)。
  2. お題のタイトル(の一部)。
のいずれかをキーワードとして指定して検索すると、該当するお題の、
  • 作成者のアバター(設定している場合)。
  • お名前と、ココログ広場のマイページ/ブログ(登録されていれば)へのリンク。
  • つぶやきのお題のタイトルとリンク。
が表示されます。

表示例(1)

f:id:furyu-tei:20101107205307p:image

キーワードが空の場合、無作為に選んだお題一覧を表示します。
表示例(2)

f:id:furyu-tei:20101107205306p:image

コネタマのお題もあったんですね、知らなかった…。
ココログの正式なサービスではないので、いろいろと制限がありますので、ご了承下さい。
例によって、公式で見当たらなかったので、無理やりでっち上げました。
例えば、最近登録されたお題なんかは検索にかかりません。
データ取得には(ココログ・当方共に)負荷がかかるため、一定期間を置いて行なっているためです。
また、Google App Engineというサービスの無料使用分(Free Quota)で運用しているため、予想外の負荷がかかると、一定期間使用出来なくなる(Over Quotaという状態になる)場合もあり得ます。

より以前の記事一覧

戻るリンク追加

カレンダー

2017年10月
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 31        

ココログカレンダーPlus

検索


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

最近のトラックバック

コメントリストツリー化

無料ブログはココログ