サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
WWDC25
designhack.slashlab.net
全文検索エンジン Elasticsearch の公式クライアントの一つ、Elasticsearch-PHP を使ってみました。 Elasticsearch なんてお洒落なソリューションを、お洒落とは言えない PHP で扱うことに抵抗がありますか。筆者には無いですけど、言わんとすることは分かります。でも 公式クライアントが用意されていることに光が見える。 インストール 公式サイトに記載されている通りに composer.json を用意して Composer でインストール。 composer.json file: { "require": { "elasticsearch/elasticsearch": "~2.0" } } Install the client with composer: # cd path/to/elasticsearch-php # composer install
Nexus7 が電源オン直後の「Google」ロゴのままフリーズしてしまう、いわゆる「文鎮化」に筆者も遭遇しました。検索すると、しばしば発生する不具合のようです。 壊れたタブレットを文鎮として使えるなんて、日本に生まれて本当に良かったなと思います。思いません。本稿では、筆者が涙目になりながら試した対処策と、そもそも文鎮化を防止する予防策をシェアします。 待てば海路の日和あり 最初に結論を書きます。 「Google」ロゴのままフリーズしているように見えても、起動途中の可能性があります。 電源ケーブルを接続して充電状態にし、12～48時間 待ってみてください。 筆者は、文鎮に充電し続けること48時間、見事に自然復旧しました。12時間くらいのパターンも経験しています。諦めないで。 タッチパネルが反応しなくても強制再起動してはいけない 文鎮化の多くは、おそらく二次災害ではないでしょうか。 筆者の場
PHP の代表的な Web スクレイピング ライブラリ Goutte をだいぶ使ったので役に立ちそうなことのメモです。 インストール 以前の Goutte は phar で提供されていましたが、最近になって Composer によるインストールになったみたい。ついでなので Composer のインストールから、コマンドのみ例示します。 Composer インストール GitHub – composer/composer: Dependency Manager for PHP # cd /usr/local/bin # curl -sS https://getcomposer.org/installer | php # mv composer.phar composer Goutte インストール GitHub – FriendsOfPHP/Goutte: Goutte, a simple
特に何かを変更したわけではなく、左端の管理メニューで画面を切り替えただけでした。 この記事は、筆者のサイトで発生した 500 Internal Server Error への対応をまとめたメモです。 落ち着いて冷静になる 今だから言えますが、まずは落ち着いて冷静になることが大事です。 サイトの設定や各種ファイルをいじくり回す前に、バックアップを取りましょう。 エラーが起きている状態のバックアップを取っても解決策にはなりません。しかし、手探りの復旧作業の結果、さらに取り返しのつかないことになる可能性は十分にあります。また、結果的に 1ファイルを修正すれば直ったのに、そこに行き着くまでに多数のファイルを変更してしまうこともあるでしょう。 あのころに戻りたい…… その願いを叶えてくれるのがバックアップです。 バックアップの取得方法 お使いのサービスによって方法は異なりますので、オンライン マニュ
何かと問題を起こしやすい z-index について調べる機会があったので まとめました。 要素を意図した通りの重なり順序で表示するには、根本から理解しておいた方が、結果的に早道なのではないかと思います。 この記事は W3C の勧告を元に書きましたが、z-index はブラウザによってバグ等の理由で挙動が違うこともあるようなのでご注意ください。尚、CSS3 の該当モジュールはまだ草案（Working Draft）レベルです。 前提 これはすでにご承知と思いますが、念のため。 要素の重なり順序は、基本的にマークアップした順に奥から手前になります。 親より子供が手前であり、兄弟ならば あとからマークアップした要素が手前に表示されます。 これを踏まえつつ、z-index を指定した場合を考えていきます。 スタック レベルとスタック コンテキスト スタック レベルとは、要素の重なり順序を決める値です
画像（img タグ）を遅延読み込み（LazyLoad）するプラグインと同じように、外部スクリプト（script タグ）を遅延読み込みする方法です。 具体的には、JavaScript で提供されている広告タグや、各種ブログ パーツを、ページのレンダリングをブロックしないように配置する方法です。厳密には画像の遅延読み込みとは異なりますが、遅い外部スクリプトを貼らなければならない場合、いわゆる UX（ユーザー エクスペリエンス）の改善に劇的な効果があります。 フレンドリー アイフレーム（Friendly iFrame） 簡単に説明すると、対象の外部スクリプトを呼び出す部分だけを別の HTML ファイルにしてサーバーにアップロードし、iframe タグで その HTML ファイルをページに埋め込みます。 例えば、i-mobile というアドネットワークの広告タグの場合は以下になります。 広告タグ用
JavaScript の document.write で動的に書き出した scriptタグ 内の JavaScript の実行順序を調べました。 検証コード HTML <!doctype html> <html> <head></head> <body> a <script> document.write('<scr' + 'ipt>document.write("b");<\/scr' + 'ipt>'); document.write('c'); </script> d <script> document.write('<scr' + 'ipt>var E = "e";<\/scr' + 'ipt>'); document.write(E); </script> f <script> document.write('<scr' + 'ipt src="g.js"><\/scr' +
バッチ処理で出力した HTML ファイルをサイドバーに表示させるためにウィジェットを作成しました。超シンプルでウィジェットの雛形として使えそうだったので置いておきます。 指定した HTML ファイルを表示するウィジェット 管理画面で表示させたい HTML ファイルを指定し、それを表示するだけの簡素なウィジェットです。以下のコードを functions.php に追加します。 add_action( 'widgets_init', function(){ class Widget_Display_HTML_File extends WP_Widget { function __construct() { parent::__construct( 'widget_display_html', // ウィジェットのベースID 'Display HTML File', // ウィジェットの名前 a
HTML5 でサポートされるようになった video タグで動画ファイルを公開するときに、mp4 ファイル等への直リンクを防ぐ方法のメモです。「直リンクを防ぐ」とは、自分のサイト以外の video タグからは動画が再生できないようにする、ということです。 クッキー（cookie）を使う方法をメインで書きます。追加で動画のファイル名を隠蔽する方法にも少し触れています。直リンクを防ぐだけなら、画像と同様にリファラーを見る方法もありますが、動画の場合、ちょっとだけ これじゃない感がありました。 具体的には、自分のサイト上にてクッキーを設定し、.htaccess でそのクッキーが無い場合はファイルへのアクセスを拒否（deny）します。クッキーを使うので、自分のサイトと動画ファイルが置いてあるサイトは同じドメインに所属している必要があります（逆にいうと、同じドメイン配下なら、別サーバーに動画ファイル
投稿フォーマットに応じてシングル ページのテンプレート（single.php）を切り替える方法です。また、この方法を応用すると、任意の条件で振り分けて任意のテンプレートを読み込むことができます。 例えば、投稿フォーマットが「video」の記事は、single.php ではなく、single-video.php が読み込まれるようにしたい場合に使います。 以下のコードを functions.php に追加します。 function add_post_format_template( $single_template ) { $new_template = $single_template; $post = get_queried_object(); $post_format = get_post_format( $post ); $single_post_format_template =
WordPress で構築したサイトのサイト名とキャッチフレーズを多言語化する方法です。 Bogo プラグインを導入して有効化していることが前提となります。 Bogo は WordPress サイトを手軽に多言語化できるプラグインです。 詳しくは以下の記事でご紹介しています。 WordPress サイトの多言語化に もう迷わない そう、Bogo ならね この記事では日本語と英語という 2ヶ国語のマルチリンガル サイトを例にして、サイト名とキャッチフレーズを多言語化します。 日本語サイトではサイト名「デザイン ハック アンド スラッシュ」、キャッチフレーズ「きっと役立つ情報を わかりやすく記事にしよう」が表示され、英語サイトではサイト名「Design Hack and Slash」、キャッチフレーズ「Hopefully, there are some good ideas for you.」
トップページでは全記事数、カテゴリ ページでは そのカテゴリの記事数、タグ アーカイブ ページでは そのタグが付いた記事数。記事数を取得したい場面は いくつか考えられます。それぞれについて最もシンプルな方法です。 「wordpress 記事数 取得」の検索結果が凄い。コピペ記事がコピペ元より余裕で上位に表示される。コピペ元もコピペだったりする。いや、コピペはどうでもいい。そもそもオリジナルを争うほどのネタじゃない。その方法が いきなりデータベースにクエリを投げていても大半の人々は関心がない。負の連鎖の完成だ。本稿は、筆者のように（もう少しスマートな方法はないものか…）と感じてしまう方々に向けた記事です。 トップページで全記事数を取得する もう少し詳しくいうと、メイン クエリの記事数を取得する方法です。home.php などで使用できます。 global $wp_query; echo '記
register_post_type() やプラグインでカスタム投稿タイプを追加する際に見落としやすい注意点など いくつかメモです。 更新情報サービス 「更新情報サービス」（Update Services）てなに？ そうですよね。存在自体を忘れがちですが、管理画面の［設定］-［投稿設定］の一番下にあります。新しい投稿を公開したときにサイト更新情報サービスに通知（ping）してくれる機能のことです。 カスタム投稿タイプは、この更新情報サービスがデフォルトで無効になっています。カスタム投稿タイプで投稿した記事は、公開しても ping してくれないということです。 カスタム投稿タイプで ping 通知するための PHP コード これを有効にするには、以下のコードを functions.php に追加します。 xxxxx 部分は対象のカスタム投稿タイプの投稿タイプ名（register_post_t
PHP の setcookie には忘れがち（？）な約束があります。 setcookie() は、（中略）<html> や <head> タグはもちろん 空白も含め、あらゆる出力よりも前にこの関数をコールするようにしなければなりません。 PHP: setcookie – Manual この条件を満たす、WordPress でクッキーをセットするベストなタイミングはいつでしょう。 例えば、is_home() を使い訪問者がトップ ページを踏んだかどうかをクッキーに保存し、2回目以降は表示するコンテンツを変えたい場合など、functions.php で大丈夫なのか不安だったりします。 答えは、get_header アクション フックを使えば完璧です。以下のコードを functions.php に追加します。 add_action( 'get_header', 'my_setcookie');
例えばカテゴリ ページの記事をランダム順に表示したい場合、クエリを呼び出す際に orderby に rand を指定します。検索すると沢山でてくる。でも、この方法には欠陥があります。なんてことだ！ 2ページ目以降も全記事からランダムなので、確率的に 1ページ目と同じ記事が表示されるのです。こうした気持ち悪い実装は、検証せずに公開しているのか、「ランダムには違いないだろう？」の確信犯なのか分かりませんが、どちらにせよ良くないですね。よくないよ。本稿では、ランダムの理に適った実装を目指します。 特定の条件下でランダムのシードを固定する 細かい話はあとにして、解決策を載せます。 function category_rand_orderby( $orderby, $query ){ if ( !is_admin() && $query->is_main_query() ) { if ( $quer
自分で自分のサイトの記事ページ（URL）一覧を取得したいとき、どうすれば一番楽でしょう。サイトが WordPress なら、データベースにクエリを投げるのも良いですが、もう少し汎用的で、もう少し楽な方法を考えました。そうだ、サイトマップ（xml）って まさしくページ URL の一覧ではないですか。 サイトマップ（xml）の構造 これは実際に見てみるのが早いですね。当サイトのサイトマップは WordPress SEO by Yoast プラグインで生成していますが、フォーマットは世界標準です。記事（post）のサイトマップは以下のような感じです。 sitemap.xml（抜粋） <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:image="http://www.google.com/schemas/sit
最近、動画 SEO が にわかに注目を集めています。そう、筆者の中で。 記事に video タグで動画を埋め込んだら、Google 先生の「動画」検索結果に表示させたいですよね。そのためには、動画サイトマップを用意してウェブマスター ツールに登録するのが近道です。でも記事を公開するたびにチマチマ手書きなんて絶対したくないじゃないですか。 となると、動画サイトマップで必須とされている以下の情報を準備して、自動生成するのが解決策になります。 動画を掲載したページの URL（loc） 動画のタイトル（video:title） 動画の説明（video:description） サムネイル画像の URL（video:thumbnail_loc） 動画ファイルの URL（video:content_loc）または プレイヤーの URL（video:player_loc） 動画サイトマップの作成 – ウ
Google アナリティクスのアクセス除外設定をまとめました。 自分の PC、自分のスマホ、テスト環境、開発環境、などのアクセスを除外する標準的で手堅い方法です。設定実施後からアクセスを除外するフィルター設定だけでなく、すでにカウントされてしまった除外したいアクセスを過去に遡って非表示にするセグメント設定も掲載しています。ユニバーサル アナリティクス対応です。 どうして こんな便利な記事を誰も書いていないのか。なぜ同じシチュエーションでぶつかる問題を解決するために何度も検索しなければならないのか。インターネットに逆ギレ気味の筆者が、振り上げたこぶしをこの記事にぶつけます。 自分の PC や自分のスマホからのアクセスを除外する方法 意外に手間ですが、作業としては どうってことないです。ちゃっと済ませよう。 作業の流れ （アナリティクス）カスタム ディメンションを設定する （アナリティクス）フ
自分のサイトをセルフ スクレイピングするときにハマったことがあったのでメモしておきます。直感に従い、PHP の Goutte（グット）というライブラリを使わせていただきました。 Goutte の基本的な説明や使い方は以下のページが詳しいのでご参照ください。 WebスクレイピングライブラリGoutteで遊んでみる – hnwの日記 Webスクレイピングを行う（Goutte）［PHP］ – Build Insider FriendsOfPHP/Goutte ･ GitHub どちらも良い記事です。が、ユーザー エージェント（UA）の設定ができませんでした。筆者が何かをミスったのかも知れない。Goutte が更新されたのかも知れない。とにかく書いてある方法ではダメでした。 Goutte でユーザー エージェントを設定する require_once 'goutte.phar'; use Goutt
WordPress で多言語サイトを構築する方法はいくつかありますが、おそらく最も手軽な Bogo プラグインによる多言語化をご紹介します。 当サイトも Bogo プラグインを使用して英語記事を公開しています。 Bogo とは Bogo の特徴を端的に表しているプラグインの説明文を引用します。 独自テーブルをたくさん作ったり後で頭痛を起こすような HTML コメントの混入をしない、とても素直な多言語化プラグイン。 プラグイン作成者は Takayuki Miyoshi さん。日本人の方なのでキャッチーな日本語の説明文ですね。 筆者はこの説明文を読んで、Bogo にしてみようと決めました。 また、Miyoshi さんは世界的に有名な「Contact Form 7」プラグインの作成者でもあり、信頼性が高いと言えると思います。 Bogo は、WordPress Codex 日本語版のページにも記載
このページを最初にブックマークしてみませんか？
『designhack.slashlab.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
