ブログ

  • Feedly Insight 、稚拙ながら WordPress プラグインをリリースしました。

    Feedly Insight 、稚拙ながら WordPress プラグインをリリースしました。

    構想1日、実装ちまちま2週間ほど。

    ようやく世に出せる程度にはなりましたのでお知らせと共に。

     

    プラグインの名前・公式ページ

    名前は Feedly Insight と名付けました。

     

    Feedly はその名の通り、Feedly の情報をうんたらするから。

    Insight はそれっぽい名前を付け足してみた、という感じです。

    意味合いとしては 洞察どうさつ(力), 眼識がんしき識見しきけん など。

     

    Feedly Insight にできること

    現在βバージョン(保険をかけ)としてリリースしています機能は

    • ダッシュボードに専用ウィジェット追加
    • ウィジェットで現在のサイト Feedly 情報表示
    • Feedly の検索API による検索(他サイトの購読者数を取得可能
    • Feedly の RSS購読者数を毎日データベースに保存し、グラフとして可視化(ある程度日数経たないとおもしろくないです

    ができます。

    現在設定画面を必要としてないため、設定画面はなく、ダッシュボード画面での表示のみです。

    今のところ管理画面でしか動かないため、WordPress が重くなる!

    ってことはないかと。

     

    Feedly Insight 使い方

    こうです
    こうです

     

    必要要件

    • WordPress 3.6 以上 (3.3 ぐらいから動くとは思いますが、3.5以下はセキュリティ上好ましくないため
    • PHP バージョン 5.2 以降

     

    Feedly Insight 作ったきっかけ

    「あったら便利かな~」

    をカタチにしただけですはい。

    以前こんな記事を書いたこともあり。

    あとは自分のパフォーマンスアップ、公開することでの忌憚ない意見が欲しいのもあり。

    ある程度の罵倒は受ける覚悟しt (ry

     

    専用ページもつくったよ

    Feedly Insight 専用ページでは日本語サポート・バグ報告・意見募集・使い方など、順次更新します。

    「こんな機能追加しろ」「このクソコードが!」

    などコメント頂けると、気に入ったものは実装したりするつもりです。

     

    さいごに

    今のところベータと名付けている通り、実装ありきで作ったのでコードがしょうもないです。

    読みづらいところや無駄な処理が。

    例外処理もしないと…。

    便利だと思うんでよかったら使ってみてね!

    Feedly がもっと流行ればいい!

  • Android スマートフォンのブラウザからブックマークレットを起動する方法

    Android スマートフォンのブラウザからブックマークレットを起動する方法

    AndroidHTML ブックマークレットを更新しまして、ちょっと質問を受けたんで記事に。

    表題の通り、携帯電話からブックマークレットを起動するやりかた。

    例として chrome を使っていますが、どのブラウザでも基本的に同じです。

    (以下、Android, スマートフォン, 携帯電話等, 端末 など激しく表記揺れします

     

    1, ブックマークレットを携帯に登録

    ブックマークレットをスマートフォンに登録する一番簡単な方法は chrome や Firefox ブラウザ

    Chromeブラウザ-Google

    制作: Google Inc.
    価格: 無料
    平均評価: 4.2(合計 987,874 件)

    posted by: AndroidHTML

    Firefox モバイルブラウザ

    制作: Mozilla
    価格: 無料
    平均評価: 4.4(合計 608,309 件)

    posted by: AndroidHTML

    を Android にインストールしてパソコンのブックマークと同期させること。

    もしくは自力でブックマークに登録。

     

    2. ブラウザでページを開いて ブックマークレットを起動

    ブックマークレットしたいページにまずブラウザでアクセス。

    で、ブラウザアドレスバーにブックマークしてあるブックマークレットタイトルを入力。

    するとブックマークレットが押せる状態になるんで、ブックマークレットをクリック。

    文字列をコピペして終わりです。

     

    ホホまとめ

    わかりづらいところ等あれば加筆・修正するんでコメントください。

    どうやらモブログといってモバイル端末からブログを書くのが流行ってるらしく、こういう需要があるんですね。

    モバイルでブログはぼくには向いてないってことがわかりました。

  • ubuntu に lamp をインストールして apache+php+MySQL 環境を作ったメモ

    ubuntu に lamp をインストールして apache+php+MySQL 環境を作ったメモ

    ノートパソコン、Ultrabook を使っているんですが、Windows だとメモリ不足でちょっと重い作業がしづらくなったため OS を ubuntu に移行。

    で、Apache, MySQL, PHP をローカルで使えるようにしたメモ。

    ubuntu バージョンは 14.04 alpha。

     

    参考にしたサイト

    ubuntu コミュニティの通りに。

     

    Lamp を ubuntu にインストール

    Windows なら xampp、iOS なら mamp、という感じで Linux には lamp があり。

    手順に沿ってコマンドからインストール。

    sudo apt-get update
    sudo apt-get install tasksel
    sudo tasksel install lamp-server

     

     

    lamp の各バージョン確認

    インストールが終わったのでバージョン確認。

    // apache2
    apache2 -v
    // php
    php -v
    // MySQL
    mysql -v

    でそれぞれバージョン確認できます。

     

    lamp 各コンポーネントバージョン
    lamp 各コンポーネントバージョン

     

    lamp サーバーフォルダ

    /var/www が作られています。

    localhost での表示はデフォルトで /var/www/html/ を参照する設定に。

    /var/www/
    /var/www/hthl/

     

    これでローカル環境ができる。

    フォルダは root 権限なので、外部に公開しないならユーザー名で権限を振ってもいいかな。

    PHP について詳しく知りたいならこれ。

    独習PHP 第2版
    独習PHP 第2版

    posted with amazlet at 14.04.13
    山田 祥寛
    翔泳社
    売り上げランキング: 19,009

    MySQL 運用はこれ。

    エキスパートのためのMySQL[運用+管理]トラブルシューティングガイド
    奥野 幹也
    技術評論社
    売り上げランキング: 20,831

    を読むといいでしょう。

  • AndroidHTML ブックマークレットを更新・改善して version 3 にしたのでお知らせ。

    AndroidHTML ブックマークレットを更新・改善して version 3 にしたのでお知らせ。

    ※2017年3月15日(水)、Dropbox のパブリックフォルダが廃止されたためブックマークレットが動かなくなりました。URL を差し替えたリンクに直しましたので、再登録お願いいたします。

    ブックマークレット前回までのくだりは過去記事を参照ください。

    ちょっと出力を調整しました。

     

    AndroidHTML 前回からの変更点

    • Play Store アイコンつけた
    • 購入・ログイン如何に関わらず価格等とれるように
    • 出力に改行があると、CMS によっては p タグが入るので出力の改行をなくした
    • 構造化データに対応(後述

    です。

     

    構造化データとは

    HTML マークアップにより、検索エンジンなどがデータ構造をより簡単・詳細に把握できる、ってやつです。

    今回使ったのは schema.org モバイルアプリのスキーマ。

    Google リッチスニペットで確認すると、

    AndroidHTML_richsnippets_result
    AndroidHTML v2 リッチスニペット結果

    バッチリです。

     

    出力サンプル

    こんな感じで出ます。

    Google検索

    制作: Google Inc.
    価格: 無料
    平均評価: 4.4(合計 588,825 件)

    AndroidHTML v3 ブックマークレット登録

    ブックマークレットの登録はこのリンク→  AndroidHtml for Play v3 をブックマークバーにドラッグ&ドロップで。

    うまくいかない場合は下の文字列をブックマークURLにペーストしてください。

    javascript:"//hayashikejinan.com/hob/api/bm/androidHTML_v3.js (arg)".replace(/(\S )\s (\S*)/,function(s,url,arg){s=document.createElement("script");s.charset="utf-8";s.src=url "?s=" encodeURIComponent(arg);document.body.appendChild(s)});void(0);

     

    今後 URL は変えずこのままいきます。

  • Force Regenerate Thumbnails を使って画像を整理することのススメ、環境によっては画像ファイルが半分に。

    Force Regenerate Thumbnails を使って画像を整理することのススメ、環境によっては画像ファイルが半分に。

    WordPress のプラグイン。

    Regenerate Thumbnails は有名ですがそれとは違い。

    サーバー移行時に使って、画像902枚-9800画像ファイルが 4900ファイルと半分、ファイル容量はマイナス200MBになりました。

    頗るすこぶ便利(テーマを変えたことがない人は使う必要ありません)だったので紹介。

     

    Force Regenerate Thumbnails とは

    現在のテーマで定義されている画像サイズに基づいて、画像を再生成してくれるプラグイン。

    ここまでは前述の Regenerate Thumbnails と同じです。

    Force Regenerate Thumbnails はさらに、もう不要になった画像サイズの画像を削除してくれるんですねー。

     

    Force Regenerate Thumbnails 使い方

    プラグインのダウンロード・インストールは割愛。

    有効化すると、メニューのツールにプラグイン実行メニューが追加されます。

    設定とかはないよ
    設定とかはないよ

     

    ここからできるのは一括リサイズ。

    Regenerate All Thumbnails を押すと一括処理の開始。

    万が一に備えて、画像のバックアップはしておきましょうね。

    Regenerate All Thumbnails
    Regenerate All Thumbnails

     

    処理中は進捗が見られます。

    画像リサイズ&削除&再生成中
    画像リサイズ&削除&再生成中

     

    これだけでOK、使用中のテーマに則ったサイズの画像が生成され、今使われていないサイズの画像は消してくれます。

     

    Force Regenerate Thumbnails を使う時の注意

    2014.02.10 追記

    便利なプラグイン、2点だけ注意した方がいいところ。

     

    ひとつめ、他のプラグインとの兼ね合いです。

    EWWW Image Optimizer や、WP Smush.it などの画像最適化系プラグインを入れてあるとその仕様上、

    リサイズと最適化が同時に行われてしまい、速度低下はもとより、サーバーへの負荷がかなり上がってしまいます。

    場合によってはサーバーに制限を喰らうかもしれませんので、Force Regenerate Thumbnails を使う前にはそれらの画像最適化系プラグインはいったん停止し、画像の再生成後に元に戻すことをオススメします。

     

    ふたつめ、以前に WordPress デフォルトで生成された画像も置き換えてくれるのですが、投稿やカスタムフィールドの画像パスは置き換えてくれません。

    DB データを置換するか、投稿の画像を再編集しましょう。

     

    ホホまとめ

    テーマごとに色んな画像サイズを定義してあることが大半なので、一度でもテーマを変えたことがある人にはもってこいかと。

    サーバー容量は余ってるケースがほとんどだと思いますが、こんなプラグインがあるよって覚えておくと何かの時に役立つと思います。

  • サーバーをさくらのレンタルサーバーからXサーバーに引っ越したので理由~全手順まとめ

    サーバーをさくらのレンタルサーバーからXサーバーに引っ越したので理由~全手順まとめ



    今月あたまに引っ越しました。

    いろいろ調べたり、サーバー契約者さんに直接聞いたりし、今の自分に最適なサーバーを選択したつもりです。

     

    理由

    引っ越す決意を固めた理由

    • 動かすプログラムが増えてサーバーのメモリが足りなくなった
    • そもそものサーバー応答速度に不満を覚え始めていた

    というところ。

    具体的な症状としては

    • Premature end of script headers エラーが頻発
    • それに伴い 500 Internal Server Error も頻発

    なんとかだましだまし軽量化して使ってはいたものの、その無駄な時間を違うことに使おうと。

     

    候補

    予算はまぁそれなりとして、

    の2点を候補に。

    やっぱさくらVPSだよねーと思いながら評判など調べていると、こういう記事を見つけ

    次に困ったら Amazon S3 にするか…ということでエックスサーバーに。

     

    Xサーバーの申し込み

    エックスサーバー申し込みページよりしゅっと済ます。(割愛



     

     

    以降元の WordPress バックアップ取得

    バックアップは2つ

    • 本体やテーマ、画像などのファイル群
    • データベース

    が必要です、作業に慣れていないと若干手間取ると思います。

     

    WordPress ディレクトリ全ファイルをダウンロード

    引っ越し前のさくらサーバーでは ssh が使えましたので、

    zip -r [zipファイル名].zip [zipしたいディレクトリ]

    zip 圧縮してからダウンロード。

    FTP でディレクトリごとダウンロードしてもいいです。(時間かかります

     

    WordPress のデータベースをエクスポート

    さくらのレンタルサーバー、phpMyAdmin にログインしてエクスポート。

     

    データ移行

    上でバックアップしたファイル群・DBデータを元に、

    エックスサーバーの WordPressの移転について の通りやればできます。

     

    エックスサーバーの設定

    サーバーの設定をいじって、

    • FTP アカウント作成
    • SSH 接続設定
    • php バージョン変更(5.5に
    • php.ini のエンコードを UTF-8
    • FastCGI 化

    など滞りなくすませ。

     

    FastCGI 化すると opcache が使える

    opcache は中間コードを最適化するやつです。

    slideshare に詳しい説明があったので説明は割愛。

     

    わかりやすいですねー。

     

    エックスサーバー opcache デフォルト値

    ということで、opcache のデフォルト値を見てみる。

    opcache.blacklist_filename = no value
    opcache.consistency_checks = 0
    opcache.dups_fix = Off
    opcache.enable = On
    opcache.enable_cli = Off
    opcache.enable_file_override = Off
    opcache.error_log = no value
    opcache.fast_shutdown = 0
    opcache.force_restart_timeout = 180
    opcache.inherited_hack = On
    opcache.interned_strings_buffer = 4
    opcache.load_comments = 1
    opcache.log_verbosity_level = 1
    opcache.max_accelerated_files = 2000
    opcache.max_file_size = 0
    opcache.max_wasted_percentage = 5
    opcache.memory_consumption = 64
    opcache.optimization_level = 0xFFFFFFFF
    opcache.preferred_memory_model = no value
    opcache.protect_memory = 0
    opcache.revalidate_freq = 2
    opcache.revalidate_path = Off
    opcache.save_comments = 1
    opcache.use_cwd = On
    opcache.validate_timestamps = On

     

    opcache の高速化チューニングは公式の説明によると、php.ini の値をこうしろ

    opcache.memory_consumption=128
    opcache.interned_strings_buffer=8
    opcache.max_accelerated_files=4000
    opcache.revalidate_freq=60
    opcache.fast_shutdown=1
    opcache.enable_cli=1
    
    // CMS や フレームワークによってこれを書くとダメな場合がある
    
    opcache.save_comments=0
    opcache.enable_file_override=1

     

    ということなのでその通りに。

    opcache.revalidate_freq を60にすると、WordPress のプラグイン設定など、opcache の古いキャッシュを使ってしまうため表面的には設定が反映されない(キャッシュ生成後1分までは設定前のキャッシュを読んでる)ため、よくわかんないひとは opcache.revalidate_freq を 1~3 あたりにするのが無難か。

    opcache.save_comments は php コメントによって処理を振り分ける CMS を使ってる場合、1 にしないといけない。

    WordPress はコメントが処理に関係しないため大丈夫。

     

    ネームサーバー書き変え

    ドメインは何故かさくらで取得しているので、さくらのネームサーバー書き変え。

    書き変え方法は さくらのヘルプ参照。

     

    サーバーを乗り換えた結果

    快適です。

    そもそも WordPress を5個+マルチサイト+他の で動かしていたのが悪かったと。

     

    ホホまとめ

    移行自体は経験があれば半日、なければ1日程度で済みます。

    誤算だったのは、エックスサーバーがサブドメインで WordPress のマルチサイトを動かせなかったことぐらい。

    乗り換え後、日数が経ってしまったためところどころ文章甘いなーというのが反省。



    エックスサーバー、いいよ。

  • Jetpack 次バージョン (2.8) では関連記事表示とマークダウン・パブリサイズのカスタム投稿タイプ対応が追加される模様

    Jetpack 次バージョン (2.8) では関連記事表示とマークダウン・パブリサイズのカスタム投稿タイプ対応が追加される模様

    WordPress をサーバーへインストールして使っている人ならもはや、ほぼ使っているでしょうか、Jetpack

    パブリサイズ共有という SNS への自動投稿機能がカスタム投稿タイプに対応していなかったため、 Jetpack の開発動向を Github でずっと追いかけていたんですが、めでたくカスタム投稿タイプ、パブリサイズ対応。

    と他を見てみるとなんと関連記事表示とマークダウンの機能が追加されており。

    関連記事表示とマークダウンの機能が追加
    関連記事表示とマークダウンの機能が追加

    試してみたんで紹介もかねて。

     

    Jetpack 関連記事表示

    有効化しまして設定へ。

    Jetpack 関連記事設定
    Jetpack 関連記事設定

     

    設定項目は

    • “関連記事” 題名の表示・非表示
    • サムネイルの表示・非表示

    が現段階で設定できる模様。

    Preview のところは「こんな感じに表示されるよ~」ってやつですね。

    Jetpack で関連記事が使えると、入れているプラグインを1つ減らせるひと、多いのでは。

     

    Jetpack マークダウン対応

    マークダウンというのは、HTML の入力を減らせる記述方法。

    たとえば、こんな感じで書くと

    # This is an H1 #
    
    ## This is an H2 ##
    
    ### This is an H3 ######
    
    *   Red
    *   Green
    *   Blue

     

    こう変換してくれるってやつです。

    <h1>This is an H1</h1>
    
    <h2>This is an H2</h2>
    
    <h3>This is an H3</h3>
    
    <ul>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    </ul>

     

    Jetpack マークダウン使える場所は

    機能の説明書きには

    Markdown lets you compose posts and comments with links, lists, and other styles using regular characters and punctuation marks. Markdown is used by writers and bloggers who want a quick and easy way to write rich text, without having to take their hands off the keyboard, and without learning a lot of complicated codes and shortcuts.

    と書いており、投稿画面・コメント欄で使える、と。

     

    Jetpack マークダウンを投稿画面で試す

    実際やってみると、

    Jetpack マークダウン投稿を試す
    Jetpack マークダウン投稿を試す

     

    ちゃんと表示されましたー。

    マークダウンをちゃんと HTML で表示してくれた。
    マークダウンをちゃんと HTML で表示してくれた。

     

    Jetpack パブリサイズ共有、カスタム投稿タイプ対応

    これです、ぼくが待っていたのは。

    自分のブログでは自動投稿しないんですが、ちょっと作り込んだサイトだとカスタム投稿タイプを作ったりして。

    かつそれを自動投稿したかったら自分で実装するか、2・3のプラグインを入れる必要がありました。

    もういりません。

     

    パブリサイズ共有をカスタム投稿タイプに対応させる方法

    件の変更点を見てみる。

    post_type_supports に ‘publicize’ を追加すればいけることがわかる。

    ということで、カスタム投稿タイプを追加する register_post_type の ‘support’ 配列に ‘publicize’ を追加してやる

    /**
     * 任意のカスタム投稿タイプの関数例
     */
    function hoge_init() {
    	$labels = array(
    		'name' => 'hoge',
    	);
    
    	$args = array(
    		'labels'   => $labels,
    		'supports' => array(
    			'title',
    			'editor',
    			'author',
    			'thumbnail',
    			'excerpt',
    			'comments',
    			'publicize'
    		)
    	);
    
    	register_post_type( 'hoge', $args );
    }
    
    add_action( 'init', 'hoge_init' );

     

    もしくは、子テーマなどから親テーマのカスタム投稿タイプへ追加したい場合はこんな感じで追加する

    /**
     * カスタム投稿タイプのサポート機能を追加する関数例
     */
    function hoge() {
    	add_post_type_support( '追加したいカスタム投稿タイプの名前', 'publicize' );
    }
    add_action( 'init', 'hoge' );

     

    と、カスタム投稿の投稿画面でもパブリサイズ共有の欄が現れるようになる。

     

    まとめ

    Jetpack、えらい勢いで機能が追加、しかも便利なのでほんと作ってる人たちはすごいなーと。

    新しい機能を一刻も早く使いたいひとは Github からダウンロードすればいいと思うよ。

    年末~正月明けいろいろあった新年初更新でした。

    2014/01/24 追記: 関連記事は2.8ではいったん削除され、その次になりそうです

  • WordPress ログイン中の管理画面・管理バーで読み込まれる open-sans ウェブフォントは個人的に不要なので無効化するコードを書いて実装した。

    WordPress ログイン中の管理画面・管理バーで読み込まれる open-sans ウェブフォントは個人的に不要なので無効化するコードを書いて実装した。

    WordPress 3.8 から管理画面のデザインが一新されました。

    それに伴い、管理画面のフォントは open-sans ウェブフォントがデフォルト指定になり。

    あいにくぼくは日本語ユーザーですので、管理画面内のフォントは 9割方日本語。

    open-sans 別にいらないじゃん」

    と考えたため無効化することに。

     

    コアファイルを探す

    無効化するために WordPress 内を grep。

    /wp-include/script-loader.php 内、wp_default_styles にて発見。

    function wp_default_styles( &$styles ) {
    
    	~中略~
    
    	$styles->add( 'open-sans', $open_sans_font_url );
    
    	~中略~
    
    }

     

    これをフック使って取り除けばいい、と。

     

    フック

    フックは wp_default_styles 。

    Codex http://codex.wordpress.org/Plugin_API/Action_Reference/wp_default_styles はまだ書かれていないようです。

    function hoge( &$styles ) {
    	// 処理
    }
    add_action( 'wp_default_styles', 'hoge' );

     

    こういう感じで実行です。

     

    open-sans を無効化するコード

    やってることは

    • 関数作成
    • 処理を記述
    • フックを登録

    というところ。

    // 管理バー open-sans ウェブフォントを無効化
    function disable_load_opensans ( &$styles ) {
    	$styles->remove( 'open-sans' );
    	$styles->add( 'open-sans', null );
    }
    add_action( 'wp_default_styles', 'disable_load_opensans' );

     

    functions.php にコピペでオッケーです。

    ちなみに open-sans、引数を null で再度追加しているのは、open-sans をハンドルとして動いてる他の css があるからです。

     

    日本語以外の多言語環境も考慮すると

    日本語環境前提で書きましたが中には多言語環境で使ってるかも。

    ということで WordPress が日本語で動いてる時だけ実行するようにすると

    // 日本語環境で動いてる場合
    if ( get_locale() === 'ja' ) {
    	// 管理バー open-sans ウェブフォントを無効化
    	function disable_load_opensans ( &$styles ) {
    		$styles->remove( 'open-sans' );
    		$styles->add( 'open-sans', null );
    	}
    	add_action( 'wp_default_styles', 'disable_load_opensans' );
    }

     

    こうなりました。

     

    まとめ

    フックをある程度コアのソースを見て使えるようになるとできることが飛躍的に増えてうれしいです。

    というか、こういうのをまとめたプラグインを作ったらいいんですねきっと。