イガラシ研

カテゴリー: 仕事

  • WordPress の新しいテーマ「unitone」を触ってみた

    WordPress の新しいテーマ「unitone」を触ってみた

    この記事は「Snow Monkey / unitone Advent Calendar 2022」の25日目の記事です。

    まず、おことわり

    この記事は、実際 unitone テーマに触れるために、WordPress のインストールからしている風景を録画し、YouTube に公開しましたので、そちらの解説をしていくスタイルになっております。よろしければ上の動画にお付き合いください。

    サンプルのサイトは https://unitone.idw.jp/ になります。しばらく公開する予定です。

    WordPress テーマ「unitone」について

    unitone は WordPress のテーマ Snow Monkey の作者で有名なキタジマタカシさんが今年発表した、WordPress のフルサイト編集（FSE）対応のテーマになります。

    ホーム

    unitone のダウンロード

    WordPress の公式テーマディレクトリではなく、上記 unitone のサイトから手続きしてダウンロードします。テーマ自体は無料、100% GPL となっており、サポートやフォーラムの利用などが有料になるようです。

    WordPress のインストールができていれば、テーマのインストールは簡単です。管理画面の「外観」→「新規追加」から ZIP ファイルをアップロードすれば OK です。

    unitone を試す

    私、Snow Monkey は公私共々お世話になりまくっているわけですが、フルサイト編集対応テーマを触ったことは、Twenty Twenty Three を含めてほとんどありません。

    基本的に、投稿や固定ページの編集画面は普通のブロックエディターとほぼ使用感は変わらないです。次に FSE の本丸たるサイトエディターを試してみましょう。

    「外観」→「エディター」を選択
    unitone のサイトエディター画面

    第一印象としては「さっぱりしてるなあ」という感じです。

    このテーマのコンセプトからしても、これをインストールしただけで何か美しいサイトが完成するのではなく、美しく仕上げるための「土台」としての役割に徹しているのでしょう。

    Every Layout か……積ん読になってる……読まねば……

    ただ、FSE 素人の目線としては、もう少しデザインの手がかりが欲しい気もしました。マニュアルもパターンも用意されているのですが、ある程度自力で習熟する必要があるテーマだという印象です。欲しいパーツが大体用意されている Snow Monkey テーマとの違いを感じた部分です。

    余談: WordPress の手抜きインストール

    さて、WordPress 自体のインストールですが、主要なレンタルサーバを借りている場合は WordPress の簡単インスール機能（例: エックスサーバー）が提供されているので、特に理由がなければそちらを使いましょう。

    しかし、VPS や AWS などのパブリッククラウドを使っている場合、そうもいかないと思います。

    もちろん WordPress 公式サイトからダウンロードして、各種設定をしてもよいのですが、私の環境では WP-CLI という、WordPress をコマンドラインで操作できるツールを導入しているので、この辺りの手間を大分減らすことができます。

    この動画では、私が WP-CLI を入れたクラウド環境で WordPress のサイトを立ち上げています。事前準備として、web サーバの設定と、MySQL / MariaDB で新規データベースを作成、ユーザーも作成して、権限を付与しています。

    動画中で使っている 3 行のおまじないは下記のようなものです。サンプルなので値はそれぞれの環境に合わせてください。

    wp core download --locale=ja && \
wp config create --dbhost=127.0.0.1 --dbname=unitone_idw_jp --dbuser=unitone_idw_jp --dbpass=UseSecurePassw0rd! --locale=ja && \
wp core install --title=unitone --url=https://unitone.idw.jp --admin_name=unitone-admin --admin_email=takeshi.igarashi@example.com

    1 行目で最新の日本語版 WordPress のダウンロード、2 行目で wp-config.php ファイルの作成、3 行目でインストールを行なっています。

    あとは、動画では管理画面で操作していますが、テーマやプラグインのインストール、有効化、無効化、削除もコマンドで可能になります。ぜひ、使ってみてくださいね。

    余談: WordPress を本番環境向けに設定する

    WordPress の初期状態でもすぐブログは始められるのですが、コーポレートサイトなど基本的に固定ページで構成し、投稿はニュースなどに使うというケースも多いかと思います。そういう場合によく行う準備を動画でしています。

  • Snow Monkey のパンくずリストからカテゴリー名を取り除く

    Snow Monkey のパンくずリストからカテゴリー名を取り除く

    WordPress でサイト構築しているみんなが大好きな高機能テーマ、Snow Monkey。

    ホーム

    最近自作テーマから Snow Monkey ベースのテーマに切り替えた案件で、パンくずリストからカテゴリー名を削除する必要がありました。はて、そんなことが可能なのかと考えていたのですが、暫定的な解を思いついたので、実装してみました。

    子テーマの場合は functions.php、My Snow Monkey プラグインの場合は my-snow-monkey.php に書き加えます。

    CSS で消すだけでも事足りるのですが、残念ながら、パンくずリストにカテゴリーであることを表すクラスなどは付いていなかったので、フィルターフックでパンくずリストの出力自体に変更を加えています。

    まず、パンくずリストのフック ‘snow_monkey_breadcrumbs‘ の値を受け取る（ $items ）のですが、この中身は二次元配列になっていて、パンくずの階層の数だけ要素が含まれます。下記のようなイメージです。

    array(3) {
	[0]=> array(2) {
		["title"]=> string "ホーム"
		["link"]=> string "https://example.com/"
	}
	[1]=> array(2) {
		["title"]=> string "投稿一覧"
		["link"]=> string "https://example.com/posts/"
	}
	[2]=> array(2) {
		["title"]=> string "カテゴリー名"
		["link"]=> string "https://example.com/category/category-name/"
	}
	[3]=> array(2) {
		["title"]=> string "投稿名"
		["link"]=> string "https://example.com/post-name/"
	}
}

    トップページを固定ページにしないで、最新の投稿にしている場合は 2 番目の要素（ $items[1] ）は出ないなど、サイトや投稿タイプごとに細かな違いはあると思います。

    今回はカテゴリー名を除去したいので、3 番目の要素（ $items[2] ）が存在して、かつ中の link 要素に /category/ という文字列が存在する場合、という条件にしてみました。あまりスマートな指定でないことは自覚しているので、もしもっとよい if 文がありましたらお知らせください。

    そして、条件に該当する場合、array_splice 関数で 3 番目の要素ごと消しています。これでパンくずからカテゴリー名は消えます。

    こんなニッチな事例が誰かのお役に立つのかは疑問ですが、一応書き残しておきます。ではでは。

  • NGINX Config で nginx 設定を楽しよう

    NGINX Config で nginx 設定を楽しよう

    nginx ―軽快動作の web サーバとしてよく使われていますし、私もここ数年愛用しています。ただ、設定は難解で面倒です。

    とはいえ、以前から HTML5 Boilerplate の Nginx Server Configs という設定集をカスタマイズして使っていたので、これまでも初期設定から自力で作っていたわけではありません。とても便利です。おすすめです。

    以上です！と終わりそうになりますが、最近見つけた、更に便利なサービスがあるのでご紹介します。

    NGINX Config

    スクリーンショットを見るとわかりますが、web 上で個別の設定を入力すると、全体の設定を含めまとめてダウンロード出来ます。セットアップに従って設定していけば、既存の nginx の設定を置き換えて、NGINX Config で作った設定で起動できるようになります。

    NGINX Config のいいところは、GUI というだけでなく、全体設定も含めてシンプルな設計で見通しがよいところです。ページをスクロールすると設定のテキストも見ることが出来ます。

    Mozilla SSL Configuration Generator に基づいた SSL 設定を取り入れていたり、Let’s Encrypt を使うときの設定が入るのもいいですね。

    WordPress でつまづいたところ

    こちら、プリセットに WordPress なんかもあったりするので、そちらもチェックを入れてテンポよく設定していったのですが……

    無事 nginx を起動して、WordPress をインストールしてみたのですが、管理画面の挙動がおかしいのです。管理画面自体は表示されるものの、新規投稿の画面が真っ白で表示されません。

    WordPress のデバッグモードでもエラーは表示されず、HTML ソースは見られるという状態で、Chrome のデベロッパーツールでコンソールを見るとエラーがいくつか出ていました。どうやら CSP (content security policy) により JavaScript を読み込めない、というような内容です。

    NGINX Config に CSP の項目があるかな、と思って探したら、見つかりました。

    add_header Content-Security-Policy   "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;

    /etc/nginx/nginxconfig.io/security.conf に上記の項目があるので、一旦コメントアウトしたら、無事に編集画面が使えるようになりました。CSP 自体は XSS などを防ぐ対策なので、出来れば一律に適用しない方法より、/wp-admin/ 以下は除外するような条件分岐を書くのがよいでしょう。

    現場からは以上です。

  • 時間管理のすゝめ for ずぼらフリーランサー

    時間管理のすゝめ for ずぼらフリーランサー

    ずぼらなフリーランサー、たけしです。今日は私のようなプロ意識の低い、ずぼらなフリーランスでも出来る、ハードルの低い時間管理（タイムマネジメント）のアイディアをご紹介します。

    時間管理の効用

    フリーランスとして仕事をしていると、時間の使い方もある程度自由が効くようになります。メリットである反面、だらっと仕事にとりかかってしまい、結果として時間を使った割に進捗が出せなかった、ということもあるかと思います（私はよくやっていました）。

    いくら時間給で仕事をしていないとしても、ある時間を業務に充てて、成果を作り出していることには変わりはありません。それならば、より有効に時間を使って、家事や趣味、睡眠など業務外に使える時間を増やしたり、成果物の検証や見直しで質を高めることに使いたいものです。

    時間は削らず、時間を見出す

    一日は24時間しかありません。日本においては睡眠の時間がもっとも削られやすいですが、睡眠時間を削るのは心身の回復を妨げ、健康に悪影響が及びます。また、ゲームをしたり、テレビを観たりする時間も、ストレス解消という観点から真っ先に削るものではないと思います。

    ポイントは「あ、気づいたら○○して○時間も経ってた」というような、無意識な時間経過を少なくして、自分の時間を自身で把握することです。そのためにまず自分が使った時間を記録してみましょう。最初は現状をそのまま記録してみて、振り返って見直しが出来る状態にしておけばOKです。

    時間管理の難点

    そうは言っても、時間の記録というのは大変面倒なものです。最近は toggl のようなタイムトラッキングのアプリも出ていますが、挫折しやすいポイントとして「タイマーの切り忘れ」というものがあります。タスクを終わらせた時は充実感、あるいは次のタスクに目が向いていて、そこに「アプリのボタンを押す」というような手間を差し込むのは案外難しいものです。

    ポモドーロ・テクニック

    話は変わりますが、人の集中力には限界があります。集中力は一種の瞬発力なので、そう持続できるようなものではありません。また、人の体は時間単位で同じ姿勢を保つような構造には出来ていません。姿勢を固定することで、特定の筋肉の緊張が持続し、こりや痛みの原因にもなります。

    厚生労働省のモニタとキーボードを使う作業者向けガイドラインでも「一連続作業時間は、1時間を超えないようにすること」「一連続作業時間内において1-2回程度の小休止を設けること」としています。

    そういった点からおすすめ出来る時間管理術の一つに「ポモドーロ・テクニック」と呼ばれるものがあります。一般的には、次のような内容で取り組みます。

    • 25分間、一つのタスクに集中して取り組む。他のことはしない。
    • 25分経過したら、5分程度の休憩をとる。
    • 休憩が終わったら次の25分間、またタスクに集中して取り組む。
    • 上記の繰り返しを4回くらい行ったら、長めの休憩（15〜30分）をとる。
    • 長い休憩の後、また25分の集中作業を行い、5分休憩することを繰り返す。

    個人的には、休憩時間は椅子から立ち上がって、給湯室や台所へ行き、冷蔵庫の飲み物を飲んだり、コーヒーやお茶を淹れたりするのがおすすめです。

    なお、一日8時間働くから、と25分のセッション（ポモドーロ、と呼ぶ）を、例えば15回以上こなすことを事前に予定してしまうのはおすすめしません。経験上、質のいい仕事が出来るのは日に約4時間、8ポモドーロ前後ではないかと思っています。余裕があれば少し追加する、くらいの感覚がよいと思います。他の時間は、例えば経理とか、業務に関わる書籍を読むなどして過ごしてみてはいかがでしょう。

    タイマーで時間を計る

    このポモドーロ・テクニックを実践するには、30分計れるキッチンタイマーだけが必要なのですが、もちろんPCやMac、スマートフォンでも、ポモドーロ・テクニック用のタイマーアプリ（以下、ポモドーロ用タイマー）は数多く出ていますので、アプリストアなどで検索してみてください。

    私が使っているのは、Be Focused ProというMacのアプリで、1ポモドーロの時間や小休止の時間、長めの休憩を入れるタイミングなど、細かい設定が可能です。メニューバーに常駐するタイプなので邪魔にならないのもよいです。無料版もありますので、もしMacをお使いなら試してみてください。

    話を時間管理に戻すと、ポモドーロ・テクニックを使う場合、タイマーは25分（あるいは任意で設定した時間）で切れますので、タイマーの切り忘れがありません。もちろん、タイマーを入れ忘れる可能性は残っているのですが、ポモドーロ用タイマーの場合、小休止の時間が終わったことを知らせてくれるので、タイマーの入れ忘れがしにくいのもよいところです。

    時間を記録する

    ポモドーロ用タイマーの場合、時間経過だけでなく、終わったポモドーロと残りのポモドーロの数も表示されます。あとは、一日の終わりに、カレンダーや手帳に何をやったか記録していけばよいでしょう。タスク管理の便利ツールもいろいろ出ているので、それを組み合わせることでよりタイムマネジメントがしやすくなるでしょう。

    私はweb開発をしていますので、開発に直接関わる作業を時間管理することで、見積もり作成の参考になるという効果もあり、助かっています。

    §

    というわけで、ぜひ一度お試しください。ただ時間を記録しようとするより、楽で副効用も多い方法だと思います。

    （初出: Note）

  • フリーランスを終えて、会社をはじめました

    フリーランスを終えて、会社をはじめました

    たけしです。こんにちは。ここ数年ブログを書くのが億劫で、最近は Twitterや Facebook すらあまり投稿せず、Instagram に日々の写真をアップして、それを IFTTT で各種 SNS にも流して、生存報告をしています。

    プロフィールは別記事をご覧ください。生い立ち（らしきもの）も書きましたので、よろしければお読みください。

    仕事のこと

    2001 年から 17 年ほどフリーランスで web 制作をしています。最近の案件のほとんどは WordPress を使ったサイト構築で、テーマ（テンプレート）をデザインしたり、機能をカスタマイズしたりするお仕事が多いです。一応 VPS やクラウドで web サーバーを構築したりもするので、デザインも出来る web 開発者、と言う感じです。

    「ひとり」の壁

    フリーランスでやるということは、多くの時間は一人で仕事をすることになると思います。会社と違い、同僚という存在は基本的にいません。気軽に相談したい時の相手もいないですし、ふと会話の中からアイディアが浮かんだりするようなことも、そもそも会話がないのでありません。

    個人的な話で、今年ご縁あって常駐で働かせていただいた会社があったのですが、この時所属こそ違うものの、仕事仲間と一緒に働く体験を久しぶりにしました。これがなかなかよくて、プロジェクトの風通しがよく、コミュニケーションがスムーズです。諸々の事情で常駐は終わりにしたのですが、やはり（比喩として）同じ釜の飯を食べる仲間でチームを作って仕事するのはいい、うらやましいと思いました。

    チームを作る、会社を作る

    単にチームで仕事をするならば、会社を作る前から、フリーランス同士でチームを作って連携しながら仕事を始めてしまう、という選択もあり、実際そうされている事例もあります。ただ、今回自分としては、会社を作り、責任の所在を明確にすることで、デザイナーやエンジニアが少しでも安心して参画でき、また顧客に対しても信頼しやすく、気軽に発注できる仕組みにしておきたかったのです。

    会社を作るという構想だけは何年も前から漠然と持っていて、調べ物はいろいろしていたのですが、動いたのは今年の秋に入ってからのことでした。最近はフォームを埋めると書式がダウンロードでき、設立準備から登記まで手軽に出来るサービスがいくつかあって、それの一つである「マネーフォワード 自分で会社設立」を使って、合同会社用の電子定款だけ行政書士に作成依頼をし、あとは自力で手続きを行いました。一発で登記出来てしまったので、正直あっけなかったです。

    五里霧中でも、前に進む

    ひとまず会社は設立出来たわけですが、単に設立しただけでは何の意味もなく、本で例えれば、小説の前書きが終わって本編にやっと入るくらいの段階です。どこまで続けられるかは正直私にもわからないですが、短編小説のように、すぐ会社を畳むことにならないよう頑張りたいと思います。

    なお、弊社では WordPress を使った web サイト構築のご相談を絶賛募集中です。また、パートナーとして協業していただける web デザイナー、エンジニアの方もお待ちしております。こちらの募集は近日公開予定です。何卒よろしくお願いいたします。

    〈この記事はフリーランス Advent Calendar 2018 の第 1 日目の記事です。第 2 日目は @yu_s_1985 さんの「フリーランスになって2年半を振り返る」です。〉

    （初出：Note 2018/12/02）

  • 今どきのテクニック満載！ HTML5 & CSS3 デザインレシピ集

    今どきのテクニック満載！ HTML5 & CSS3 デザインレシピ集

    どうも、ご無沙汰しております。今年はスギ花粉の当たり年なのか、例年になく症状がひどいです（グズッ）。 (さらに…)

  • 「顧客が本当に必要だったもの」

    「顧客が本当に必要だったもの」

    さっそくですが、ここでひとつ名画を鑑賞してみたいと思います。

    What the Customer Really Needed
    (さらに…)

  • E-mailは偉大な発明だったけど、もうみんなが使わなくてもいいよね。

    Facebookに投稿しようとしたものの、長すぎたので久々にブログに書きます。

    3年後の新入社員はメールを使えない場合がある

    ○学習はするが、
    ○「今の10代のPCスキル、なにがそんなに変わったのか」ネットの検索スキルとかはあんまり変わりません。PCもスマホも同じだから。PCとスマホに共有されていない機能に顕著な変化があります。例えばタイピング。キーボード使えないから、スマホでレポート書いてる子が年々増えてる。
    ○この過渡期の勝ち組はネトゲ廃人クラスタ（キーボードが使えるから）
    ○彼らのLINEのスピード感にいちばんデカルチャーを感じます。そりゃメールなんてまどろっこしくてやってられんだろなと思う。
    ○もちろん所得格差が影響しているとまとめ人は考えます。
    ○日刊ゲンダイに類似した趣旨の記事がありました。末尾に追加しています。
    Togetterまとめ – http://togetter.com/li/731063

    入力デバイス？キーボード入力が便利な作業で、使いたい人が使えばいいじゃないですか。レポート？そのうち音声入力の認識能力が上がって、後で誤字を訂正して推敲できるようになるとか、そんなようなサービスを誰か立ち上げることでしょう。

    インフラで言うと、SMTPとかPOP3、IMAPとか考えるのが数年前からいやになって自前でメールサーバは管理しなくなりました（Gmailやメールホスティングサービス、Mailgunとかあればいい）。大体トラフィックの90%以上はspamなのです。

    書く方はと言うと、ジョブズみたいに1〜3行書けばいいなら構わないのですが（http://stevemail.tumblr.com/）、「○○株式会社 ご担当者様　イガラシと申します。いつもお世話になっております。　表題の件についてご連絡申し上げます…」みたいなことを延々書くのはどうなのだろうか、と現代における社会的慣習を頭ごなしに否定するつもりはないものの、常々疑問に思っており、FacebookメッセージやLINEに流れるのは道理だろうと思います。

    E-mailもNetnewsやIRC的に、使いたい人が細々使うサービスになるといいなと思っています。そうすればリテラシーの低い人にリーチしなくなるから、spam mailの意味がなくなり、今ほど面倒臭い状況にはならないでしょう（スパマーはe-mailから他の手段に切り替えるだけですが、賢い人がマシな解決策を考えてくれることでしょう）。

    何かツッコミどころがあれば、適当に@takeshi81にメンションでコメントください。

  • nginxでcgi-bin配下の画像などが表示されない！

    Nginx_logo

    WebサーバでPerlなどのCGIスクリプトを設置するとき、セキュリティの関係でサーバによっては、cgi-binというディレクトリを利用することがあります。一般的にcgi-binにはスクリプトファイルのみを置くことになっているので、スクリプトから参照したい画像やHTML、スタイルシートなどをcgi-bin配下に置いても表示することは出来ません。

    WebサーバがApacheの場合には、「cgi-bin 画像」などで検索すれば対策がわかるのですが、今回はnginxを利用していたので、どうしたらよいかと思案した結果、採った対策をご紹介します。

    手法は目新しいものではなく、Apacheでもしばしばあるのですが、画像やHTML、CSSのファイルをWeb公開用のディレクトリ（「www」「htdocs」「web」等）配下に移してしまうものです。

    それだけだと参照する場所が変わってしまうので、スクリプトを書き直すか、nginxの設定を変更する必要があります。今回スクリプトは単純なものではなかったので、nginxの設定を変更することにします。

    元々 /web/ という公開用ディレクトリ、同じ階層に /cgi-bin/ があって、hoge.cgi、画像を入れた images/ というディレクトリがあったとします。その images/ ディレクトリをごっそり /web/hoge/images/ に移動します。

    次に、nginx.conf（場合により sites-available/example.com.vhost など、ご自分の環境に合わせて）に書き加えます。

    location /cgi-bin/hoge/images/ {
    alias /var/www/example.com/web/hoge/images/;
}

    locationはドキュメントルートから書いていきます。aliasはサーバルートから絶対パスで指定します。

    こんな感じで今回は対応してみました。もっとスマートなやり方があったら教えてくださいね。

    2014/4/26 更新：誤記を訂正しました（site-available → sites-available）。

  • 7月のWordPressとおやつの会はプラグイン作成入門！

    7月のWordPressとおやつの会、水道橋ネコワーキングでやりますよ！

    当日の内容

    はじめてのプラグインを作る！WordPressプラグイン作成入門

    7月の会はいつもと趣向を変えて、全員ノートPC持参で、もくもくとプラグインを作ります。初めてでも大丈夫！最初に簡単なプラグイン作成の説明をして、ごく単純なプラグインを一緒に作ります。初めてじゃない方は、最初から自分の作りたいプラグインをもくもくと作って、おやつタイムに成果を発表してください。

    想定する参加者像

    WordPressプラグインを作ることに興味のある方ならどなたでも。PHPの初歩的かそれ以上の知識がある。

    ただし、上記にかかわらず、初心者からエキスパートまで、様々な方の参加も歓迎いたします。

    注意点

    今回はノートPCの持ち込みが必須です。無線LANと電源があります。またWordPressをテストできる環境が必要です。XAMPPにWordPressをインストールするのがおすすめです（参考記事 for Windows、参考記事 for Mac）。

    会場にはネコがいますので、入室時に注意事項をお読みください。

    ネコおよびその他いかなる事由による損害につきましても主催者、会場運営会社は責を負いかねますので、予めご了承ください。

    日時・会場

    日時は7月6日（土）、15:00から、ネコワーキング（中央線水道橋駅西口徒歩3分）で開催します。

    15:00　開場・ごあいさつ・自己紹介タイム
    15:15頃～15:35頃　プラグイン作成の基本的な説明（経験者は早速作成開始）
    15:40頃〜17:00頃　プラグイン作成タイム（休憩は各自適宜に）
    17:10頃〜17:40頃　おやつタイム
    17:50頃　撤収・閉場

    参加費

    2,000円（会場費＆おやつ代として・当日入館時払い）

    お申し込み

    ATNDのイベントページよりお申込みください。

    主催・お問い合せなど

    インディゴデザインワークス
    幹事：五十嵐武志　@takeshi81
    こちらのフォームからお気軽にお問い合わせください。