Skip to content
2014/09/16 / Javelina

FC2ブログで現在表示中の記事の編集画面に入るブックマークレット

メモです。久々の投稿ですね;
最近、FC2ブログに触る機会があったのですがWordPressに慣れていると
現在見ている記事を編集するボタンがないのがかなり不便に感じたので
ブックマークレットで対応してみました。

やろうと思えばテンプレートタグで編集リンクを作ることもできるんですが、
それだと非ログイン状態でもリンクが表示されてしまうのでブックマークレットの方がいいかなと。

コードはこんな感じです

javascript:
var FC2 = 'http://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=';
var str = document.URL;
var reg = /blog-entry-(\d+)\.html/i;
var num = str.match(reg);
document.location = FC2 + num[1];

FC2ってログイン状態の判別ってできるんですかね?
できるのならログイン時のみ表示する編集リンクを作っても良いのかもしれませんが…

とりあえずは、WPでadminバーに編集リンクがあるのに慣れているので
個人的にはブックマークレットでも全然違和感なく使えそうです。

広告
2014/03/06 / Javelina

WordPressで同じデータベース内の他のWordPressからデータを取得

メモです。
タイトルがややこしいですが、一つのデータベースに複数のWordPressをインストールしていて、一方のWordPress上から他方のWordPressデータベースにアクセスして何らかのデータを取得したい時。
テーブルプレフィックスをセットしてあげれば値をとってくることができました。

    global $wpdb;
    $db_user = $wpdb->dbuser; //データベース接続ユーザーの取得
    $db_passwd = $wpdb->dbpassword; //データベース接続用パスワードの取得
    $db_host = $wpdb->dbhost; //データベースホストの取得
    $db_name = $wpdb->dbname; //データベース名の取得
    $another_wpdb = new wpdb($db_user, $db_passwd, $db_name, $db_host);

    $table_prefix = 'wp2_'; //値を取りたいWordPressのテーブル接頭辞
    $another_wpdb->set_prefix($table_prefix);

    //wp_option内のオプション名"sample"の値を取得したい場合
    $data = 'sample';
    $query = $another_wpdb->prepare( "SELECT option_value FROM {$another_wpdb->options} WHERE option_name = %s", $data);
    $get_sample = $another_wpdb->get_var($query);

 
適宜アンシリアライズとか

    $get_sample = unserialize($get_sample);

 
参考リンク:WordPressから別のデータベースに接続する | レンタルサーバーのCPIスタッフブログ
 

2014/02/23 / Javelina

WordPressでPress Thisから画像追加ができないのはビジュアルリッチエディターの設定が原因だった

こちらのページで紹介しているWordPressを使ったブックマークツールを作っているときにたまたま気づいたのですが、WordPressのユーザー設定で「ビジュアルリッチエディターを使用しない」にチェックを入れていると、画像の追加が行えませんでした。(画像の候補は所得できるものの、選択して「画像の挿入」ボタンを押しても本文欄に何も入らない)

visualricheditor

ちなみにこの現象の起こったWordPressのバージョンは3.8.1です。「ビジュアルリッチエディターを使用しない」のチェックを外す事で、画像の追加が正常に行えるようになりました。
また、ここのチェックさえ外していれば、実際に使用しているのがテキストエディターであっても普通に画像を挿入することができます。

2014/02/21 / Javelina

Zootoolの代わりとなるオンラインブックマークツールを作ってみた

bookmarks_ss1

以前、GoogleブックマークからZootoolに乗り換えた。という記事でZootoolというオンラインブックマークサービスを紹介したことがあったのですが、使用開始してから一年とちょっとしか経っていないのに早くもサービスの終了が決定してしまいました。なんてこったい…

Googleブックマークに代わるオンラインブックマークツールとしてバリバリ現役で使っていたのでかなりショックでした。というか困る…!
ブックマークのサムネイル表示&pack分けがかなり重宝していたので、今更Googleブックマークには戻れません。急ぎ代替サービスを探すことに。

…結果から言うと、Zootoolに比較的似ているサービスはいくつかあったのですが、自分的必須要件を満たしてくれる代替サービスを見つけることはできませんでした。
 

私が個人的に重要視しているのは、

①サイトのスクリーンショットをサムネイルにできる
②フォルダのような階層ではなく、カテゴリ分けができる
③Firefoxのアドオンやブックマークレットでブックマークできる
④1クリック・2クリック程度で登録できる
⑤ソーシャルいらない。完全にプライベートにできる
⑥スマートホン(Android)からでも登録可能
 

この6点。⑥はZootoolでも実装されてませんでしたね。iPhoneアプリは用意されていましたが。
意外にも、②~⑥はともかく①をクリアするサービスが見つけられませんでした。(②や④を犠牲にすれば無いこともないのですが)多くのサービスは、単純な登録だけだと「サイト内の画像を拾ってきてサムネイルにする」という感じなんですよね…。

ちなみに試したサービスは、Kippt、Icebergs、Wookmark、Catchbox、Tizmos、Bookmax、おまけにEvernoteなどなど…。私のような条件に拘らない方は上記を試してみてもよいかもしれません。
 

結構本気でどうしようと悩んでいたのですが、ふと、WordPressの引用記事用のブックマークレット「Press This」と、同じくWordPressの「Webページのスクリーンショットを取得できるAPI」があったことを思い出しました。

この二つといくつかのプラグインを組み合わせれば割と簡単にブックマークサイトを作れるんじゃね?と思い立ち、結局WordPressを使って自作してみることに。
前置きが長くなりましたが、それで実際に作ってみたのが冒頭の画像のブックマークサイトです。
 

元にしているテーマは公式テーマのTwenty Fourteenです。骨組みはほぼいじっていないですね。
幅を100%にして、サイドバーをposition:fixedにしました。

肝心のブックマークの仕方ですが、ブックマークレット「Press This」で投稿ウィンドウを出すとタイトルにWebページタイトル、本文に

<p><a href="WebページのURL">Webページタイトル</a>.</p>

という形で入っているので、add_action(‘wp_insert_post’…)を用いて投稿時に本文から正規表現でurl部分を抽出し、カスタムフィールドに保存します。また上記本文の後に何か記述した場合、それも抽出してメモ書きとしてカスタムフィールドに保存します。(urlの取得に$_GET[‘u’]ではなく正規表現を使っているのはスマホの共有にも対応する為だったりします)

通常Press Thisは投稿後勝手にウィンドウは閉じませんが、そのあたりもカスタマイズして投稿終了後1秒で自動的に閉じるようにしています。
 

ブックマーク一覧画面は、上記にて保存した情報と、urlを元にWordPressのAPIで取得したスクリーンショットサムネイルをループ内に並べるだけなので非常に簡単に作られています。
スクリーンショットのAPIはこういうやつですね

https://s-ssl.wordpress.com/mshots/v1/WebページのURL?w=幅&h=高さ

ただしこのAPIを用いたサムネイルの取得は画像ファイルを直接ブックマークした場合には対応できないので、urlから画像ファイルかWebページかを判別して、画像ファイルだった場合はGDを利用したリサイズクラスを使用してサムネイルサイズにリサイズ&トリミングしています。

 
また、Webページだった場合はさらにYouTubeかどうかも判別して、抜き取った動画のIDから画像を取得し、上記の方法でサムネイル化。

http://i.ytimg.com/vi/動画のid/hqdefault.jpg

↑これを適当なディレクトリに保存した上でリサイズクラスに投げる

 
もしPress Thisの画面で画像を指定していた場合(Press ThisはZootoolのようにサイトから画像を引っ張ってきてくれて、その中から選んで本文に挿入することができる)は、そちらを優先するようにしています。やはり上記クラスを使いつつ一旦保存→リサイズ&トリミングという形にします。

 
一覧表示画面でサムネイルをクリックするとブックマーク先へ、”Edit”をクリックすると詳細/編集画面がthickboxで開きます。WordPressの管理画面に入らずにタイトル・URL・カテゴリー・タグ・メモ書きを確認・編集することができます。(この画面はsingle.phpです)

 
YouTubeの場合は、サムネイルクリックでその場で再生可能。

詳細/編集画面では小サイズの埋め込み動画にしています。

 
そしてブックマーク一覧ページと詳細/編集画面の”Delete”ボタンをクリックすると、管理画面を経由せずにブックマークを削除することができます。

記事を削除するリンクの取得

if (current_user_can('edit_post', $post->ID)){
	return get_delete_post_link($post->ID);
}

 
こんな感じ。
Zootoolからのブックマークの移行は、エクスポートしたファイル(html形式)をWordPressのインポート用xmlに整形して行いました。

実際数日使ってみましたが、割と素直に使えています。
最初は物は試し、というだけでしたが自分だけで利用する分にはこれで十分かも?という気がしてきました。

 
ついでに…。スマートホン(Android)からブックマークする場合は、共有メニューからWordPressアプリを呼び出して行います。普段別のWordPressブログをスマホから引用投稿することはまず無いので、今回のブックマークブログを選択して「常にこの設定を使用」にチェックを入れておきます。

メモ書きを加える場合はPress This同様本文のリンクの下に書き加えてもよいのですが、スマホアプリ版の場合は「抜粋」を入力することができるので、抜粋欄にメモを書いた場合はそちらを優先して取り込みます。(というかPress Thisも抜粋欄を設けてくれればいいのに…)
下の例では本文欄でのメモ書きでテスト。

↓ブラウザでチェック

問題なさそうです。
Zootoolではこれができなかったので少し不便だったんですよね。
 

 
最後に。今回のブックマークサイトを作るために使用したプラグインやスクリプトなどです。
 

WordPress プラグイン

Frontend Editor

管理画面に入らずに直接記事内容を編集するために導入

My Category Order

カテゴリーを自由に並べ替える為に導入

Private Only

手っ取り早くプライベートブログにするために導入

Search Everything

サイト内検索の有効範囲を広げるために導入

Press-this auto close

Press Thisを投稿後に自動で閉じます
実際にはプラグインとしては使用せずコードを参考にしてfunctions.phpに書き直しています
プラグインをそのまま使うとオートクローズは3秒固定です
 

あとはRevision Controlやキャッシュ関係など。
 

使ってないけど使えるかもしれないプラグイン

Press This Reloaded

Press Thisをpost-new.php(通常の新規投稿画面)に置き換えてくれます
抜粋やカスタムフィールドの入力ももちろん可能に
Press Thisの特徴であるサイトの画像を取得する機能もそのまま使えます
ただし少し使ってみたところブックマークしたURLがリンクになったりならなかったりで正規表現に優しくないので保留
ポップアップサイズのお陰で1カラムになってしまいサクッと投稿ボタンが押せないのも微妙でした
※有効後にPress Thisブックマークレットを作り直す必要あり
 

スクリプト

Infinate Scroll jQuery Plugin

サイト内で自動ページ送りするために導入
ちなみに1ページ50件に設定しています

ThickBox 3.1

詳細/編集画面(single.php)をライトボックス的に開くために導入
古いライブラリなので本当は別の物を用意した方が良いのでしょうが…
ちなみにInfinate Scrollと併用すると2ページ目以降ThickBoxが働かなくなるのでこちらを参考に修正を加えて使用しています

 

PHPクラス

Resizeimg Class

画像をブックマークした際のサムネイル生成のために導入
GDによる画像のリサイズやトリミングを容易に行えるようにするPHPクラスです
ただしそのままでは拡張子.jpegに対応できない(.jpgはもちろん可能)ので少し修正を加えました
 

2013/12/11 / Javelina

京都一泊二日の旅。二日目

貴船川①

京都一泊二日の旅。一日目の続きです。

京都旅行二日目は、花見小路通→八坂神社→貴船神社→下鴨神社→金閣寺→龍安寺→仁和寺→錦市場(→錦天満宮)→先斗町というルートで回ってきました。

本当は貴船神社からスタートだったのですが、どうしても朝の花見小路通を歩いて見たくて、急遽予定を変更。予定よりも二時間近く早めに出発することになりました。

 
八坂神社は当初の予定には入っていませんでしたが、もともと行きたかった場所だったので好都合でした。一日目で土地勘がなんとなく把握できたのは大きかったですね。

続きを読む…

2013/12/11 / Javelina

京都一泊二日の旅。一日目

南禅寺にて⑤ 南禅院庭園

11/30-12/1と、一泊二日で京都に旅行してきました。
京都は中学生の修学旅行で行ったっきりでしたので、人生で二度目。

修学旅行の時は、班ごとに「ルート決め係」がいて、私がその係だったのですが、なんだか知らないうちに今回の旅行でも私がルート決め係になってしまいました。十数年の時を経て繰り返される歴史…!

続きを読む…

2013/11/17 / Javelina

国立西洋美術館で開催されたミケランジェロ展・イタリア版画展に行ってきた

上野にある国立西洋美術館で開催されたミケランジェロ展に行ってきました。

ミケランジェロ展|TBSテレビ

企画展の「ミケランジェロ展」はもちろん良かったですが、小企画展の「イタリア版画展」がかなり印象的でした。
土曜日ということもありミケランジェロ展の方は結構な混雑具合でしたが、小企画展・常設展の方はかなり空いています。
お陰で一点一点じっくり見ることができました。

そのイタリア版画展で、特に気になった版画家のメモ。

・マルカントニオ・ライモンディ/アゴスティーノ・ヴェネツィアーノ
…版画展のポスターにもなっている、おどろおどろしい雰囲気の「魔女の集会(ストレゴッツォ)」が印象的でした。

・ステーファノ・デッラ・ベッラ
…「死」をモチーフにした作品多数。緻密なタッチで逃れられない死の恐ろしさが表現されます。

・オラツィオ・スカラベッリ
…凱旋門をはじめ建築物の版画が多数。奥行きがあり、遠近法がとられている作品が多くとても印象的

 

私はあまり版画やエッチングに明るくないのですが、全体的に緻密さや奥行き、人体描写などの表現が素晴らしいと感じました。もっと色々な版画作品を見てみたくなりました。

 
そして西洋絵画の展示も素晴らしかったです。
西洋絵画の常設展で気になった画家のメモ。
 

・イサーク・ファン・オスターデ
・ ヤン・ブリューゲル(父)
・ヘーラルト・ダウ
・アレッサンドロ・マニャスコ
…ポイントで入れているハイライト・ホワイトの使い方がダイナミックで印象的に感じました

 
…というわけで、ミケランジェロ展を見に行ったつもりがすっかり常設展の版画と西洋絵画に釘付けになってしまいましたとさ。繰り返しますが、ミケランジェロもとてもよかったですよ!帰りにはしっかり図録やポストカードを購入してしまいましたしねw
 
ただ、常設展の方はやはりじっくりゆっくり見れたのがよかったです。特に版画は余り馴染みがなかったのでとても楽しめました。
 

2013/11/17 / Javelina

Massigraで表示中の画像をFenrirFSのプロファイルにエイリアスで登録する

画像を閲覧する際、Massigraというビューアーを使用しているのですが、画像閲覧中に気に入った画像があった時、「お気に入り」的に後からでも即座に閲覧できるようにしたいな~と思うことがあります。

そこで、Massigraで現在開いている画像を、即座にファイル管理ソフトFenrirFSの特定のプロファイルにエイリアスモードで登録する、という方法を考えました。

まず、FenrirFSの方で適当なプロファイルを作成しておきます。
「お気に入り画像」など。プロファイルのモードは「手動追加モード」が良いかと思われます。

 
FenrirFSに新しいプロファイルを追加

 
次にMassigraを開き、メニューバー(or右クリックメニュー)から「ファイル」→「他のアプリで開く」→「他のアプリの設定」を選びます。

設定メニューが開いたら、「リスト」で空いている番号を選択し、「メニュー項目名」に適当な名前を入力(”FenrirFS”や”お気に入り画像”など)。

 
続いて「実行ファイル名」ですが、ここがポイントです。
通常Massigraでこの実行ファイル名を記述する際は、目当てのソフトのフルパスを記述すればよいのですが、ここでFenrirFSのフルパスだけ記述すると、現在のファイルが実ファイルとして渡されてしまいます。(FeirirFSのドロップ操作をエイリアスモードにしていたとしても無視されます。実ファイルとして渡されるので、最初にファイルが置いてあった場所からは消えてしまいます)

更には、ファイルの移動先が強制的に「前回FenrirFSを使用していた時に最後に表示していたプロファイル」になってしまいます。これはイカンですよ!

ファイルの渡し先のプロファイルを固定し、かつエイリアスモードでファイルを渡すには、FenrirFSのコマンドラインオプションを利用する必要があります
今回の場合は「実行ファイル名」には次のように記述します。

 

"FenrirFS.exeのフルパス" --profile プロファイル名 -- ailias "($f)"

 
FenrirFSのフルパス部分は、必ずダブルクォーテーションで括ります。
私の環境の場合、次のようになりました。

 

"C:\Program Files\Fenrir Inc\FenrirFS\FenrirFS.exe" --profile お気に入り画像 --alias "($f)"

 
MassigraにFenrirFSを登録

 
最後の”($f)”は、ファイルパスを送ることを意味します。
Massigraでコマンドラインオプションを使う場合は、設定メニュー内の「送る」の指示が実行されなくなるので、上記のように実行ファイル名の中にファイルパスを表す”($f)”を組み込んで記述する必要があります。(※参考:他のアプリの設定 (ダイアログ) – (画像ビューワ MassiGra 公式ヘルプ)

 
以上で設定は完了です。
画像を閲覧時、メニューから「他のアプリで開く」→「FenrirFS」もしくはショートカットキー(Ctrl + 登録した番号)を押せば…

 
MassigraからFenrirFSにエイリアスモードで登録

 
ちゃんとエイリアスモードで登録されました~。

 
この方法でやや不便なのは、FenrirFSを常駐モードで起動していないとファイルを追加する度に新しくFenrirFSが立ち上がってしまうという点と、Massigraからパスを送る際必ずFenrirFSがフォアグラウンドで開いてしまうことでしょうか。アプリ設定オプションでウィンドウを最小化としていてもダメでした。

画像を順々に見ながらサクサク追加していく、という感じにはならないですね。※Massigraの「常に手前に表示」オプションと併用すれば一応フォーカスを奪われずに済みます。連続して登録する場合は設定すると良いかも

また、実ファイルの場所を変更したりリネームしたりすると、FenrirFS上ではリンク先が行方不明状態になってしまうのも問題です。そうなってしまった場合、登録していた画像が001.jpgなど凡庸なファイル名だと、リンク先ファイルを探すのが相当困難になります。エイリアスの宿命ですね…

それと、FenrirFS上からファイルを開く場合、当然実ファイルを開くことになるので、登録した画像だけを順々に見る…といったことはできません。(FenrirFSに搭載されているクイックプレビュー機能を使用すれば可能ですが)
個人的には、これが結構痛い。FenrirFSが悪いわけでもMassigraが悪いわけでもありませんが…。

 
これらを踏まえると、エイリアスで追加する場合はあくまで一時保管庫的な、メモ的な使い方をするのがよさそうです。
もし上記の点から実体のあるファイルの方が良い!という場合は、--aliasを削除すれば実ファイル登録になり、--keepをつければコピーして登録することもできます。
 

2013/06/26 / Javelina

ChromeのRSS Subscription Extensionにfeedlyを加える

メモです。

普段、Chromeでブラウジングする際、RSSを登録する時は大抵”RSS Subscription Extension“エクステンションを入れることで表示されるフィードアイコン(下図参照)をクリックして登録しているのですが、
その際に「フィードの登録に使用するリーダー」の選択肢にfeedlyが含まれていなかった(2013年6月26日現在)ため、手動で追加することにしました。

 
RSS Subscription Extension1
追加方法は簡単。アイコンをクリックし、登録したいフィードをさらにクリックすると使用するリーダーのセレクトボックスが表示されますが、その選択肢の中にある[管理…]を選びます。
(もしくは、拡張機能の管理画面からRSS Subscription Extension→オプションをクリックでもOK)

 
RSS Subscription Extension2
すると使用するリーダーの追加・編集・削除が行えるオプション画面が出てくるので、[追加]ボタンをクリックします。
フィードリーダーの情報を入力するダイアログボックスが出てくるので、

【説明】に feedly
【URL】に http://cloud.feedly.com/#subscription/feed/%s

と入力し、[保存]をクリックします。

 
RSS Subscription Extension3
これでOKです!でもいずれはデフォルトで対応するようになるかもしれませんね。
 

2012/12/18 / Javelina

WordPressにて、tweetを埋め込みする際にキャッシュするようにした

以前、WordPressでEmbedタグを使用してTwitterのつぶやきを複数埋め込むと数回アクセスしただけで埋め込みが反映されなくなり困った!という話をしましたが、結局新たにショートコードを作り、呼び出したツイートの埋め込み用htmlをキャッシュ・読み込みすることで解決することにしました。
 

公式tweetボタンを設置していない場合

<?php
function tweetembedFunc($atts, $tweet = null){
	$script_default = 1; /*デフォルトでwidgets.jsを呼び出すかどうか。1=呼び出す/0=呼び出さない*/
	$term = 168;/*キャッシュさせたい時間。単位:hour*/

	extract( shortcode_atts( array(
		'script' => $script_default,
	), $atts ) );
	
	$omit_script = ($script == 1) ? '' : '&omit_script=true'; 
	$tweet_split = explode('status', strtr($tweet,array('/' => '')));
	$tweetID = $tweet_split[1];
	
	if($tweetID){
	    $transient_key = md5('tweetembed_' . $tweetID);
	
	    if(false === ($tweet_html = get_transient($transient_key))){
			$response = wp_remote_get('https://api.twitter.com/1/statuses/oembed.json?id=' . $tweetID . $omit_script);
			if(!is_wp_error($response) && $response['response']['code'] === 200 ){
				$tweet_status = json_decode($response['body']);
				$tweet_html = $tweet_status->html . "\n";
				set_transient($transient_key, $tweet_html, 60*60*$term);
			}else{
				$tweet_html = '';
			}
		}
	}
	return $tweet_html;
}
add_shortcode('tweetembed', 'tweetembedFunc');
?>

 
これで、ツイートを埋め込む際に従来の

http://ツイートのURL

ではなく

[tweetembed]ツイートのURL[/tweetembed]

と入力することで、埋め込み用に発行されるhtmlをデータベースにキャッシュさせた上で表示することができるようになります。
このままでも使用可能ですが、複数のツイートを埋め込む場合、埋め込みの度に//platform.twitter.com/widgets.jsが呼び出されてしまうので、
2つ目以降の埋め込みの際は

[tweetembed script=0]ツイートのURL[/tweetembed]

このようにオプションで”script=0″を指定すると無駄に同じスクリプトを呼び出さずに済みます。

 

公式tweetボタンを設置済みの場合

 
そもそもこの//platform.twitter.com/widgets.jsは、サイトに「ツイートボタン」を設置している場合は既に呼び出されているはずですので(ツイートボタンとツイートの埋め込みの整形に使用されるスクリプトは同じもの)、
ツイートボタンを導入しているのであれば埋め込みに際して一度もこのスクリプトを呼び出す必要がありません。

その場合は、3行目の $script_default = 1 を $script_default = 0 に変えるとデフォルトでこのスクリプトの呼び出しを省略するようになるので、script=0を入力する手間が省けます。

念の為、デフォルトで//platform.twitter.com/widgets.jsを省略するコード↓

<?php
function tweetembedFunc($atts, $tweet = null){
	$script_default = 0; /*デフォルトでwidgets.jsを呼び出すかどうか。1=呼び出す/0=呼び出さない*/
	$term = 168;/*キャッシュさせたい時間。単位:hour*/

	extract( shortcode_atts( array(
		'script' => $script_default,
	), $atts ) );
	
	$omit_script = ($script == 1) ? '' : '&omit_script=true'; 
	$tweet_split = explode('status', strtr($tweet,array('/' => '')));
	$tweetID = $tweet_split[1];
	
	if($tweetID){
	    $transient_key = md5('tweetembed_' . $tweetID);
	
	    if(false === ($tweet_html = get_transient($transient_key))){
			$response = wp_remote_get('https://api.twitter.com/1/statuses/oembed.json?id=' . $tweetID . $omit_script);
			if(!is_wp_error($response) && $response['response']['code'] === 200 ){
				$tweet_status = json_decode($response['body']);
				$tweet_html = $tweet_status->html . "\n";
				set_transient($transient_key, $tweet_html, 60*60*$term);
			}else{
				$tweet_html = '';
			}
		}
	}
	return $tweet_html;
}
add_shortcode('tweetembed', 'tweetembedFunc');
?>

 

%d人のブロガーが「いいね」をつけました。