【WordPress】投稿画面でカテゴリーの検索できないの？Post Category Filterプラグインならできます！ | バシャログ。
WordPressサイトを一瞬でPWA化できる PWA for WordPress【プラグイン紹介】 | バシャログ。
今年の春頃、iOSのServiceWorker対応で、PWA（Progressive Web Apps)がWeb界隈を賑わせましたね。 私は6月にAndroid Bazaar and Conferenceに参加してまいりました。 春は東大の本郷キャンパスでしたが、秋は川崎で開催されます。現在も参加登録できます! 申込はconnpassから。 PWA for WordPress WordCamp Tokyo 2018や、私が参加した日本Androidの会9月定例会で紹介がありました。サイトをPWA化するためには、manifest.jsonとservice-worker.js、他にアイコン用の画像などが必要となります。 これらを非常に簡単に設定してくれるプラグインです！ (利用には対象のWordPressサイトがhttps化している必要があります) 使ってみました！ プラグインをインストールし
【WordPress】カスタムフィールド(ACF)のテキストエリアの改行で気を付ける事 | バシャログ。
みなさんこんにちは 食欲の秋ですね。yamashitaです。 今回はWordPressのカスタムフィールドでテキストエリアを作った時に遭遇した地味に困った事をご紹介します。 極々単純な事なのですが、この改行の設定を知らなかったがためにパニックになって、 自分のエスケープ処理を片っ端から疑いにかかってしまったので戒めとしてメモしておきます。 ※使用プラグイン：Advanced Custom Fields PRO version 5.7.4. 困った設定「改行」 まずテキストエリアのフィールドを作成します。 色々ある設定をしていきます。 「改行」の選択肢は以下の通り こちらがget_field_objectで取得してきた値をテキストエリアにechoしたものです そしてこちらがそのままechoしたものです 注意したいところ 変換と言っているのに変換ではなく、改行コードは残ったまま 変換される設定
[gulp] 本番環境と開発環境を分岐するgulp-mode | バシャログ。
こんにちは、ishidaです。 2年前に半年かけておとした体重が見事にもとに戻りました。 新陳代謝がきっとすげー落ちているんだよ。そうなんだよ。はい。 今回はnpmの紹介です。 開発時と本番時で処理を変更したくなったことはありませんか？ このパッケージではgulpにて開発時と本番時のタスクを簡単に切り分けられます。 本番時 本番時にJSファイルをminifyしてみましょう。 var gulp = require('gulp'); var mode = require('gulp-mode')({ modes: ["production", "development"], default: "development", verbose: false }); var uglify = require('gulp-uglify'); gulp.task('default', function()
![[gulp] 本番環境と開発環境を分岐するgulp-mode | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/294ca83069b165921e9cb3cee0abe51a49c5b779/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_gulp.png)
Googleスプレッドシートで作成したファイルリストをVue.jsで表示する | バシャログ。
ETCマイレージサービスで、ポイントの自動交換を設定していた・・・はずなのにできてなかった！！！と思ったら、カード情報を２年ほど更新し忘れていて、900ポイントほど失効させていた kouraku です。おはこんばんちは。 さてさて今回は、久しぶりに Vue.js を触ろうかと思います。 コーディングするとき、諸々作業しやすくするために、各ページのリンクを貼って対象ページへ簡単に飛べるよう、ファイルリストのHTMLを作っています。 一方、進捗管理・チェック用としてまた別に、Googleスプレッドシート（以下スプレッドシート）でもファイルリストを作ったりしています。 ん・・・？なんだかちょっと無駄があるような気がしませんか？ スプレッドシートでファイルリストを作って、 その内容をHTML側でも表示できるようになれば良いんじゃない？ それができれば、確実に同期できるし、修正もスプレッドシートのみ
【WordPress】万能コマンド wp shell を活用する | バシャログ。
『サガ スカーレット グレイス 緋色の野望 Limited BOX 【邪神】』 の Nintendo Switch 版と PlayStation 4版のどちらを予約すべきか長々迷った挙句、結局 Switch 版を選んだ kagata です。いずれにしてもハードを買ってこないといけません。 今回は、WP-CLI の中ではあまり注目されていないような気がするコマンド wp shell を紹介します。地味ながら、いろいろな場面で活用できる万能コマンドです。 wp shell とは wp shell は、コマンドラインから入力した PHP コードを対話的に実行するコマンドです。WordPress 向けの REPL というと、プログラマーには通りがよいかもしれません。 wp shell | WordPress Developer Resources 使い方はシンプルです。WP-CLI をインストール
プロトタイピングツールを試してみた - その1：「InVision」 | バシャログ。
こんにちは。sitoです。一月程前からAmazonプライムで『ドキュメンタル』を見始めたらすっかりはまってしまいました。現在Season4鑑賞中です。Season5も早く見たくてたまりません。 さて、これまでAdobe XDの記事はいろいろと書いてきましたが、ほかのプロトタイピングツールはどんな感じなのかが気になったのでいろいろと触ってみようと思い至り、今回は、手始めに「InVision」を試してみました。 使いこなすまでには至っていませんが、ひとまず現状のXDと比べて便利だった点や、使ってみての所感など書いてみようと思います。 「InVision」って？ https://www.invisionapp.com/ 無料で始められるプロトタイピングツールです。 無料プランでは1アカウント1プロジェクト作成できます。プロジェクト数を増やしたい場合は有料になるようです。 Sketch（私は使った
【WordPress 】文字エンコーディングをページごとに切り替える | バシャログ。
スマートフォンと Bluetooth 接続できる歯ブラシをつい買ってしまった kagata です。歯の健康維持という点で値段なりの価値があるのかはいまいちわかりませんが、たかが歯ブラシのくせにファームウェアアップデートがインターネットから降ってくるという大げさな雰囲気にはたいへん満足しています。 さて、今回は業務上の必要にかられて書いた WordPress カスタマイズのスニペットを紹介します。 やりたいこと 実案件で出てきた課題を、今回の記事のために少し簡略化します。次のような具合です。 スラッグ foo という固定ページを文字エンコーディング Shift-JIS で出力したい 固定ページ foo 以外は WordPress デフォルトの UTF-8で出力する コード 課題解決のため、次のようなコードを書きました。そんなに長いコードではないので、一挙にどーん。 add_action('w
色のアクセシビリティ対応で役に立ったツール | バシャログ。
こんにちは。2月が28日までしかないことを一昨日思い出したsitoです。 今回は、とある案件でアクセシビリティ：AA レベルのサイトデザインを行ったときに使ってみて便利だった、色のチェックができるツールをご紹介したいと思います。 アクセシビリティって？という方は、以前kourakuが書いたこちらの記事 ▼【アクセシビリティ】HTML/CSSで突っ込まれた点をメモメモ https://bashalog.c-brains.jp/17/09/08-193700.php とか、 ▼Web Content Accessibility Guidelines (WCAG) 2.0 https://waic.jp/docs/WCAG20/Overview.html をご参照くださいませ。 ▼Web Content Accessibility Guidelines (WCAG) 2.0の原文はこちら htt
kouraku的、Macで仕事するときの３種の神器（アプリ）！ | バシャログ。
「シーブレインアドベントカレンダー2017」7日目担当するのは、kouraku です。おはこんばんちわ。 「これがないと仕事にならない！」というテーマの元、シーブレインスタッフが12月1日からクリスマスまで、毎営業日に記事を投稿しておりますが、前回はつぼログ。から fukazawa さんによる「ライムグリーンのぼよいやつ」でしたね。「ぼよいやつ」って何だろう？この不思議なタイトルだけで、ついついクリックしてしまいます（笑） ハイ、ということで、ワタクシ kouraku が思うところの「これがないと！」 MacとWindows、使用状況はハーフハーフ コーダーの仕事として、Windows歴が長い kouraku も、最近はMacで仕事を完結させることが多くなってきました。とはいえ、やはりWindowsでの表示・動作確認は行わないといけないし、案件によってはWindowsでしか開発ができなかっ
HTMLをそのままPDFにできるPHPライブラリ TCPDF | バシャログ。
こんにちは。sagaraです。現在携わっているPHPのプロジェクトで、領収書をPDF出力する処理があって、 どういうプロセスで生成しているのか見てみたところ、 PDF作成ライブラリ TCPDFを使用していました。 というわけで、今回はPDFを作成するライブラリについてのお話です。 PDFを作成するライブラリ HaruPDF PDFlib（商用） FPDF TCPDF といったものがあります。上記のうち、HaruPDFとPDFlibは拡張モジュールでインストールが必要ですが、 FPDFとTCPDFはクラスライブラリなのでサーバーの適当な場所に配置すればいいです。 後者の方が手軽に始められますね。 TCPDFでPDF作成！ GitHubからダウンロードできます。 https://github.com/tecnickcom/tcpdf HTML(XHTML+CSS)そのままPDFに <?php
順番を指定するCSSを使い倒す！-ほにゃらら-childとほにゃらら-of-typeの違いとその辺の便利な使い方- | バシャログ。
調べてみたところこれだけの種類があります。 全部は覚えられないよ！と思うかもしれませんが、実は10個全て覚える必要はありません。 種類＆ほにゃらら-childとほにゃらら-of-typeの違いがわかれば、組あわせでわかっちゃうんです。 ほにゃらら-childとほにゃらら-of-typeの違いは何？ :first-childと:first-of-typeで違いを見てみたいと思います。 //HTML <dl> <dt>dt</dt> <dd>１番目のdd</dd> <dd>２番目のdd</dd> <dd>３番目のdd</dd> </dl> １番目のddを指定する場合、dd:first-childを使うことはできません。 使うのはdd:first-of-typeです。 ほにゃらら-childは要素すべての順番を指定するもので、例のHTMLの場合は最初の子要素はdtなので指定できないわけです。 そ
PHPでの画像処理【ImageMagick編】 | バシャログ。
こんにちは。sagaraです。年齢が20代も後半に差し掛かるのですが、 この間スーパーでお酒を買おうとしたら、久々に年齢確認を要求されてしまいました。 てへぺろやあーねを知っているので、気持ち今でも10代です☆← 今回は、PHPのImageMagick(画像処理モジュール)についてのお話です。 ImageMagickとは ImageMagickは画像処理のためのソフトウェアで、 PHPに限らない様々な言語で使うことができます。 PHPでImagickというモジュール名になっています。 前回の記事のGD拡張モジュールもそうですが、 サーバー側でサムネイルを自動生成したり、 不正コピー防止のために画像に透かしを入れたりするときに使えますね。 ImageMagickは高機能ですので、より使える場面は増えるのではないでしょうか。 インストールから使用準備まで GDはPHP自体に標準で含まれています
CakePHPで日付のバリデーションが気になったので調べてみました | バシャログ。
みなさんごきげんよう。yamashitaです。 ラーメンとつけ麺の話ばかりしていたら「ラーメンの記事でも書いたら？」と周囲から言われています。 味の感想は「おいしい」と「とてもおいしい」の二択なので難しいですね。 さて今回はバリカタ・・・ではなくCakePHPのバリデーションについてです。 といってもあまり実用的ではないので軽い気持ちで読んでください。 きっかけ 先日パイセンが作ったwebページを恐れ多くも検証しました。 生年月日の項目に偉人の生まれや大きな出来事の日付を入れてみたらバリデーションに引っかからず、面白くなっていくつか試してみました。 しかし、織田信長が討たれた本能寺の変、1582年6月21日はバリデーションに引っかかったのです。 ※いちごパンツのムーニーマンと覚えてください。 おや？と思い、何となく予想を立てて以下の二つを入力するとこうなりました。 - 1600年1月1日⇒
PHPで画像を動的に生成する【GD編】 | バシャログ。
こんにちは、sagaraです。秋ですね。週末は関西の母校に寄る予定なのですが、 男子校だったのが共学になっていたりと色々と様変わりしているようで、時代の変遷を感じそうです。 PHPで画像を扱う(GD拡張モジュール) WEBで画像を生成するなら、HTML5のcanvasでしょうか…？ PHPでも画像を生成することができます。ボタンの背景画像にテキストを入れたり、 不正コピー防止のために透かしを入れたりといった使われ方があるようですね。 今回は、PHPで画像を生成する方法について書いていこうと思います。 画像関係の拡張モジュールには、以下のようなものがあります。 gd拡張モジュール Imagick拡張モジュール 今回取り上げるのはGD拡張モジュールです。 PHP4.3以降では、GD拡張モジュール(バージョン2.x)は標準でPHPに同梱されているので、 インストールされていれば使うことができます
PHP で祝日の情報を扱うライブラリ Yasumi | バシャログ。
2丁目から同じ町の1丁目に引っ越す kagata です。 さて、今回は表題のとおり、PHP で祝日を取り扱うのにたいへん便利なライブラリ Yasumi をご紹介します。日本国内ではまだあまり使われていないのか、「PHP 祝日」みたいなキーワードでぐぐってみてもなかなか使用例が出てきません。すごく使い勝手がよいので、ぜひ広まってほしいとの願いを込めてお送りします。 Yasumi のいいところ オフライン対応 祝日の情報を取り扱う方法のひとつに、Google Calendar API をはじめとする外部のリソースからカレンダーを取得する、というものがあります。 これはこれでお手軽なのですが、インターネットに接続できない隔離された環境ではこの手が使えません。また、実装によっては外部 API サービスが落ちているせいで使えなくなる、なんてことも起こるかもしれません。 Yasumi は祝日それぞれの
【アクセシビリティ】HTML/CSSで突っ込まれた点をメモメモ | バシャログ。
来週遅めの夏休みをいただき、東北へ旅行の予定を立てている kouraku です。おはこんばんちは。 さて今回は、とある案件でアクセシビリティ：AA レベルのサイト制作を行ったとき、専門の方から色々と指摘をいただいて、その対応に苦労したり、そんなことしないといけないのか！と思った内容のいくつかを忘れないようにメモしておこうと思います。 ・・・とその前に、アクセシビリティって何？ 「アクセシビリティ」の意味と混同しがちな言葉が「ユーザビリティ」です。ユーザビリティとは、W3Cでは次の内容で定義されています。 Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specifie
Google Maps JavaScript APIで地図が表示されないとき、原因だったこと | バシャログ。
お初にお目にかかります。新人のsagaraです。高校２年の夏、 物理部の部室でパソコンを前に「猫でもわかるC言語」を読んでいましたが、 剣道部で一番人気の美人の先輩の恋人役をするアルバイトに誘われるようなことはありませんでした。 今回はGoogle Maps APIについてのお話をさせていただきます。 Googleマップ(以下マップ)を用いたページを作成していた時、 「あれ？地図が出なくなった！」ということが何度かあったので、 ぶつかった場面と原因を振り返っていきたいと思います。 【前提】 マップの利用にはAPIキーを取得する必要がある Googleマップを利用する場合は、Google Maps APIを利用する必要があります。 ユースケースによって、いくつかのAPIが用意されていますが、 今回対象となるのは、自由度の高いGoogle Maps JavaScript APIです(*1)。
自動でインラインCSS化できるHTML email inline styler | バシャログ。
案件でメルマガのHTML化の作業がありまして、テーブルレイアウトでコーディングするのが初めての体験でした。その旨を上司に伝えたら遠い目をしており、昔の個人サイトに思いを馳せていたのかもしれません。Web Archiveで昔作った個人サイトを検索！ さて、今回はhtmlメルマガのハマったこととそれに伴う便利なツールをご紹介します。 Gmailで異常発生！？ 普通のメルマガをhtml化するということで、メルマガデザインをしコーディングも完了！OutlookやOperaMailなどでテストを行っていきました。左画像はYahooメール（ブラウザ）での表示。きれいに表示されていますね。なんだ簡単じゃないかと余裕ぶっておりました。 が、最後に大正義Gmail（画像右）をチェックしたらなんと、崩れているではありませんか！？ 原因はCSSの記述方法 わかってしまえば簡単なことなんですがGmailは、<st
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【MySQL】ビットフラグで格納されている値を、マスタテーブルで定義された日本語名に変換して出力するSQL | バシャログ。
