MENU

BLOG

2017

AUG

08

2017.08.08

sawazakisawazaki

WordPressプラグインDuplicate Postについて

TRIADがWordPressサイト制作で利用しているプラグインを紹介する第5弾「Duplicate Post」です。
Duplicate Postのダウンロードはこちらから

このプラグインは、これまでご紹介したプラグインの利用方法とは、少し違った使い方をしています。
TRIADは基本的にサイトの制作作業を行うので、コンテンツ(記事)の内容はクライアント側で入力したいという要望が多くあります。
サイト構築時点でコンテンツ(記事)が全て揃っていれば問題ないのですが、サイト構築と並行して用意していただくので事前に全て揃っていることはほとんどありません。
そういう状況下でも、記事の一覧ページやトップページでの最新記事の表示などはテストをしなければなりません。
ある程度の記事数がないと表示確認ができないのですが、1つずつ投稿していくのに手間が掛かってしまいます。
そういう時に、Duplicate Postを使ってダミーの記事を複製して一覧ページに表示したい件数分の記事を投稿して確認します。

Duplicate Postの使い方

Duplicate Postを有効にし、プラグイン一覧から「設定」画面を開きます。

プラグイン管理画面

カスタムポストタイプを利用している場合は、Duplicate Postを使えるようにするため「権限」タブを開きます。

Duplicate Post設定画面

適用したいカスタムポストタイプにチェックを入れます。

Duplicate Postカスタムポストタイプ設定画面

変更を保存して、記事一覧に移動します。

クイック編集画面

タイトル下の項目に「複製」が追加されました。
複製したい記事で、「複製」ボタンを押すと記事が複製されます。
複製した記事は一旦下書きとして保存されるので、必要に応じてスラッグやタイトルを変更して公開します。
クイック編集を許可して入れば、この操作は簡単なので記事を1つずつ手動で複製するよりは時間がかからずに複製できます。

トライアドでは、制作の際の記事の複製に使っていますが、お知らせなどで同じような内容の記事を何度も投稿しなければならない時も便利です。
これまで何度も記事をコピペして手動で増やす作業がなくなるだけで、制作効率は格段にアップしますし、無駄な時間を削ることができます。

2017

AUG

01

2017.08.01

sawazakisawazaki

WordPressのプラグインCustom Field Suiteの紹介

TRIADで提供するWordPressサイトで利用しているプラグインの紹介第3弾は「Custom Field Suite」です。
Custom Field Suiteプラグインのダウンロードはこちら

WordPressで一番利用されているのはカスタムフィールドだと思います。
デフォルトの機能として存在し、投稿に対して様々な内容を追加情報として付与することができます。ただ、デフォルトのものだとインターフェースが直感的に使いづらく、あまり知識のない方が活用するのが難しいと思います。
カスタムフィールドをカスタマイズするプラグインはたくさんありますが、その中でTRIADが活用しているプラグインは「Custom Field Suite」になります。

Custom Field Suiteの使い方

Custom Field Suiteを有効にすると、管理画面の左のメニューに「フィールドグループ」というメニューが表示されます。

フィールドグループを選択すると、投稿一覧のような画面が開きます。

Custom Field Suiteの管理画面のメニュー

「新規追加」ボタンを押して、追加したいカスタムフィールドのグループを設定していきます。

Custom Field Suiteの新規追加画面

タイトル

グループ名を管理する名称をタイトルとして入力します。
後から一覧に表示される名称になるので、わかりやすい名前にしておきます。

フィールド

「新規フィールドを追加」ボタンを押して、カスタムフィールドに反映させたい項目を追加していきます。

フィールドタイプ

プルダウンを選択肢すると、下記の選択肢が表示されます。

  • 単一行テキスト
  • テキストエリア
  • リッチエリア
  • ハイパーリンク
  • 日付フォーマット
  • カラーピッカー
  • 真/虚(簡易チェックボックス)
  • セレクト(ドロップダウンリスト)
  • 関連ポスト選択
  • Term
  • ユーザー
  • ファイルをのアップロード
  • ループ(複製フィールド)
  • タグ

プルダウンからカスタムフィールドに設定したい項目を選びます。
例えば、画像をアップロードしたければ、ファイルをのアップロードを選択します。
選択した項目によってフィールドタイプの下の内容が変わりますので適宜設定をします。
ファイルアップロードの場合は、file typeを選ぶプルダウンが表示されて、ImageやMovieなどのアップするタイプを選択できます。
画像以外のファイルをアップロードさせたくない場合は、Imageを選択すれば動画や音声ファイルなどをアップすることができなくなります。

カスタムフィールドを任意で増やすことができる「ループ」を選択した場合は、増やしたい項目をこのフィールドに追加する形になります。

Custom Field Suiteのループ設定

フィールドの設定が終わったら、配置ルールの設定をします。

配置ルールの設定画面

カスタムフィールドを使用したい、カスタムポストタイプや固定ページを選択します。
ここで設定した投稿画面以外は、カスタムフィールドが表示されなくなります。

エクストラにある表示設定で、「コンテンツエディタを隠す」にチェックを入れると、デフォルトの投稿欄が非表示になり、カスタムフィールドしか入力欄が表示されなくなります。

これで設定が完了しましたので、右サイドに表示されている「更新」を押して確定をさせます。
これでカスタムフィールドの設定が完了したので、カスタムポストタイプや固定ページなど設定を反映したい記事の投稿画面で確認をします。

これで、直感的に操作できるカスタムフィールドを利用して、記事を投稿することができます。任意の数を増やせる項目などを利用して、レイアウトは固定の中でも内容を状況に合わせることができ、HTMLを書く必要もなく増やせるようになります。

テンプレートの記述

設定したカスタムフィールドの値をテンプレートで表示しなければなりません。

値の取得の仕方

<?php echo CFS()->get( 'フィールドの名前' ); ?>

カスタムフィールドの値を出力できます。
しかし、この記述だと単一の値しか出力することができません。
ループの出力は下記になります。

<?php
$loop = CFS()->get( 'ループの名前' );
foreach ( $loop as $row ):
?>
<dl>
<dt><?php echo $row['フィールドの名前']; ?></dt>
<dd><?php echo $row['フィールドの名前']; ?></dd>
</dl>
<?php endforeach; ?>

これで、ループ内にある値も出力されます。
テンプレートには、設定した全てのフィールド名を記述しなければならないので、運用中にカスタムフィールドを増やした場合、テンプレートにも記述を追加する必要があります。

カスタムフィールドを強力にカスタマイズ

WordPressのデフォルトの投稿欄にHTMLを書いて、自由に表現をすることができますが、HTMLの知識がない方にとっては苦痛でしかありません。
画像のアップやURLの追記などは、カスタムフィールドを活用することでできますが、デフォルトのものでは操作しづらく、こちらも更新作業の大きな壁になってしまいます。
これらのネガティブな要素を全て解消してくれるのが、Custom Field Suiteプラグインだと思います。
投稿欄の全てを簡単にカスタムフィールドで構成するようにでき、操作を直感的に行えるので知識がない方にとっても入力しやすい管理画面になります。

TRIADでは別のプラグインも利用していましたが、現時点ではCustom Field SUiteプラグインが最良の選択肢だと思いますので、ご依頼いただいたWordPress案件で更新が必要なサイトに採用しています。

2017

JUL

25

2017.07.25

sawazakisawazaki

iPad Pro 10.5を仕事で使ってみた

これまでiPad airでBluetoothのキーボードを使って仕事をしていたので、リプレイスとしてiPad Pro 10.5を購入しました。
また、TRIADではリモートワークを採用しているので、外で仕事する機会が多く、wifiがつながらなかったりテザリングが面倒だったりするのでセルラー版を採用しました。

iPad Pro 10.5の仕様

今回選んだのは、iPad Pro 10.5シルバーのセルラー版です。
Wifiのない環境でもインターネットに繋げられるように、セルラー版を選択しました。
これまでのiPad Airでもセルラー版で、Wifi版よりは仕事で使いやすかったので同じ環境にしました。
一番迷ったのは容量です。
これまでのiPad Airは128GBで、実際に使用中していた容量は半分もいかないぐらいでした。これは、容量を気にしてあまり大きなファイルをローカルに保存しないようにしていたのもあり、そこまで容量がなくても良いかと思っていたからです。
同じぐらいの容量で良いかなと思っていましたが、ラインナップから128GBが消え64GBの次が256GBと512GBと容量がかなりアップしてしまいました。。。
必然的に選択肢が256GBしかないかなという状況だったので、今回は256GBを選択肢しました。

純正のキーボード Smart Keyboard

iPad Airの時は、Bluetoothのキーボードしか選択肢がなかったので、サードパーティ製のキーボードを利用していましたが、いちいちBluetoothを接続しなければならなかったり、接続が不安定だったり、キーボード事態を充電しなければならなかったりと、不満要素しかなかったです。
そのため、今回のiPad Proには純正のSmart Keyboardを利用しようと思いました。
専用のコネクタで接続され、Bluetoothのようにペアリングの必要もなく、充電をしなくても良いので理想的なキーボードだと思います。
懸念していたキーボードの打鍵感も、初代のMacBookのキーボードに慣れているので、特に気にならずむしろこのタイプのキーボードとしては、非常にタイピングがしやすいと個人的には思います。
今回からJIS配列のキーボードも発売されたのですが、iPad Airの時にUS配列のキーボードで慣れていたので、今回もUS配列を選択しました。
US配列だと日本語の入力がしづらいという意見も聞かれますが、MacではJIS配列を利用して自分としては特に問題ないかなと思います。正直なところ慣れの問題だけな気がします。

Apple Pencilの利用

Smart Keyboardと同様に使ってみたいなと思っていた、Apple Pencilも一緒に購入しました。
仕事がら打合せに行ったり、資料をもらって確認したりすることが多く、紙を持ち歩くのは荷物になるため避けたい事でした。
また、TRIADではリモートワークを採用しているので、オンライン上でのやり取りが多くなります。
アイデアの共有なども、デジタルツールがベースになるのですが、手書きのニュアンスを伝えるのが非常に難しいと感じていたので、デジタルで手書きができる環境が必要だと思いました。
これまでも、サードパーティのペンを利用していたのですが、入力のラグや細かな文字は書けないなど不満だらけで、買っては捨て買っては捨ての繰り返しでした。
Apple Pencilはさすがに純正だけあって、ラグもほとんどなくスムーズで手書きと遜色ないほど細かな文字も書けます。
高価なペンではありますが、その分の利用価値の方が高くコストパフォーマンスも良いと思います。

使用しているアプリケーション

iPad Pro 10.5の仕事で利用しているアプリは下記になります。

  • Working Copy
  • Textastic
  • FTP Manager
  • Trello
  • Slack
  • Dropbox
  • Google Drive
  • Note Always
  • iAnnotate
  • iZip
  • PSExpress
  • iA Writer

iPad Proを利用する前からほとんど同じアプリを利用していましたが、Apple Pencilを活用できる「Note Always」が増えました。
このアプリはApple Pencilの良いところを全て引き出してくれ、操作感も他のアプリとは違って直感的に使えるところが気に入っています。
例えば、打合せの内容をNote Alwaysでメモして、その内容をそのままGoogle DriveやDropboxにPDFとして共有できます。TRIADのメンバーとの情報共有がスムーズになり、クラウドのファイル共有の利点も最大限に活かせるようになりました。
コーディング作業では、「Working Copy」でソースコードを管理しているGitHubと連携し、強力なエディタの「Textastic」でコーディングしFTPでテストサーバーにアップすることができます。FTPはファイルのアップ・ダウンロード程度はできるのですが、細かなパーミッション設定ができません。その時に、FTPManagerを利用してディレクトリに書き込み権限などを与えます。  
この3つのアプリがあれば、とりあえずWordPressを利用したサイトを構築することができます。
デザインファイルを作業のしたりするのは難しいですが、投稿に使用する画像は「PSExpress」で作成してアップできます。
管理画面のスクリーンショットなどをiPad Proでキャプチャし、それをPSExpressでトリミングしてアップすれば、記事内の画像として活用できます。
その他のアプリも、クラウド環境を活用してiPad Proだけで完結しないように全てのデバイスでファイルを共有してシームレスに仕事ができるようにしています。

仕事で使えるか?

業務にiPad Proをメインとして利用できるかと言われれば、作業内容によって使えるという答えになります。
様々なアプリを駆使すれば、PC環境と同じように作業はできますが、アプリやサービスによってはiPad版に制限をかけていて、PCと同等の操作感が得られない時があります。
もちろん、ブラウザを利用してウェブサービスとして利用すれば良いのですが、せっかくのアプリが活用できないことになってしまいます。
マシンパワーは十分あるので、今後はアプリやサービスの対応具合によって、ラップトップの代替手段としての選択肢の一つにはなるかと思いますの。
秋ごろ登場予定のiOS11では、様々なアップデートが控えているようですので、次世代のOSでどうなるかも注目したいところです。

2017

JUL

20

2017.07.20

nishimotonishimoto

ゲームのスタッフロールに!?

こんにちわ、@nihimoto です。

今回は最近お仕事で嬉しいことがありましたのでそのお話をしようかと思います。

 

いきなり昔話になりますが、私は格闘ゲームが小さい頃から好きでした。
最初に遊んだ格闘ゲームは小学生の頃に買ってもらったスーパーファミコン版のストリートファイター2でした。
それ以来、コンシューマーやゲームセンターで色々な格闘ゲームを遊んできました。ストリートファイターシリーズ、ヴァンパイアハンター(セイバー)シリーズ、キングオブファイターズシリーズ、鉄拳シリーズ、ソウルキャリバーシリーズ、などなど・・
今回のお仕事で昔大いに遊んでいたシリーズの中の一つを弊社トライアドでお手伝いさせていただきました。

 

お手伝いさせていただいたゲームは、こちら!

 

GUILTY GEAR Xrd REV 2

 

Read more

2017

JUL

18

2017.07.18

sawazakisawazaki

WordPressのプラグインUser Role Editorの紹介

TRIADで提供するWordPressサイトで利用しているプラグインの紹介第2弾は「User Role Editor」です。
プラグインのダウンロードはこちら
User Role Editorは、ユーザー権限を管理するプラグインです。
WordPressにデフォルトで設定されているユーザー権限は下記になります。

  • 管理者
  • 編集者
  • 投稿者
  • 寄稿者
  • 購読者

この名称だと、どんな権限が付与されれいるのか不明ですね。
編集者の中でも、知識がある方はWordPressの設定を少しだけ変えたい場合も出てきます。
その反対に、知識があまりないのでもう少し権限を少なくしたい場合もあると思います。
前回の記事で書いた、知識レベルの違いがある担当者がいる場合、細かな権限付与が必要になります。

User Role Editorを利用して、細かく権限を付与すればアカウントと同数の権限を増やすことができます。
権限の種類が少ないために、担当者の方には不要な権限が付与されてしまうと、操作ミスが発生してしまうかもしれません。
無駄なリスクを無くすために、ユーザーアカウント毎に細かく権限を設定していきます。

User Role Editorの使い方

User Role Editorを有効にすると、「ユーザー」に「User Role Editor」の項目が増えます。

デフォルトの権限の項目が表示されます。
画面右側の「権限グループを追加」ボタンを押すと、任意のグループを作成することができます。

ここで入力した権限グループが、「編集者」や「購読者」などのリストに追加されて表示されます。
全ての権限を新規で設定することができますが、それでは手間がかかりすぎるのでデフォルトの権限をコピーして必要または不要な権限を設定することができます。

[ユーザー]から[新規追加]を選択して、新しいユーザーを登録します。
権限グループのプルダウンに、User Role Editorで作成した権限グループが表示されます。

追加した権限グループを選択すれば、作成した権限グループのユーザーアカウントを作成することができます。
これで、必要な権限が付与されたアカウントになり、不要な権限がなく操作ミスのリスクも減ると思います。
TRIADでは、デフォルトの編集者権限ベースにして、必要または不要な権限を設定する方法を採用しています。
細かな権限の設定よりも、編集者の知識に合わせる形が多いので、基本的な編集権限をベースにすることで設定の時間を節約しています。

次回は、デフォルトのカスタムフィールドは使いづらいので、直感的に使えるようになるプラグインを紹介します。

2017

JUL

11

2017.07.11

sawazakisawazaki

WordPressのプラグインAdminimizeの紹介

WordPress管理画面

TRIADで提供するWordPressサイトで利用しているプラグインの紹介第1弾は「Adminimize」です。
どんなプラグインかというと、Adminimizeを利用するとユーザー毎に管理画面の表示項目を制御できるようになります。

プラグインのダウンロードはこちら

なぜ、このプラグインを利用するようになったのか?
クライアントの中にはPCの操作に不安があり、わからない項目や設定があるとどうしたら良いか困ってしまいます。
特に、WordPressの管理画面を開くと様々な項目が左のメニューに表示されていて、それを見るだけで更新の意欲が削がれてしまいます・・・。

代表的な例

  • 間違った操作をしたらどうしよう?
  • このボタンを押すとどうなるんだろう?
  • 外観って何に使うの?
  • プラグインって何?
  • どこから更新するんだっけ?
  • 画像はどこに入っているの?
    などなど・・・

わからないものがあるだけで嫌悪感をいだき、せっかくWordPressで作った更新できるコンテンツも、気づけば記事の日付が二年前になっている・・・ということがよくあります。
その状態を防ぐにはどうすれば良いかと考えている時に、Adminimizeを利用してみました。

Adminimizeの使い方

Adminimizeを有効にすると、「設定」に「Adminimize」の項目が増えます。

WordPress管理画面の設定

そこから、Adminimizeの設定画面を開くと、詳細な設定画面が開きます。

WordPress管理画面のAdminimize設定

デフォルトで設定されているユーザー権限毎に、管理画面で表示させる項目を選択します。
チェックボックスにチェックをすると、その項目が管理画面から非表示になります。
ユーザー権限で操作可能な機能については制限がされていますが、そもそも制限されているのであれば、表示しない方が迷わずに操作できると思います。
(例えば、管理者はプラグインの追加やテーマの変更ができますが、閲覧者はそれらの操作ができません。)
ここでは、編集権限に対して、投稿(カスタムポストタイプを含む)の項目と、メディア(画像など)の機能を表示させ、その他については非表示にする設定をしてみます。

WordPress管理画面のAdminimize設定のチェック

設定を確認するために、管理者権限からログアウトし、編集権限のアカウントでログインします。
左側のメニューが、更新に必要な投稿とメディアのみになっています。

WordPress管理画面の設定後

更新したい人がログインすると不要な項目は表示されず、必要な項目しか表示されないので次の操作を迷わず行え、操作ミスの恐れもなくなります。

これだけの設定で、更新したい人が必要としない項目を非表示にできます。
項目を非表示にすると、管理画面の見た目もスッキリして、項目数の多さに嫌悪感を抱かなくなると思います。
実際の案件で、項目数を減らした管理画面にすると、できることだけに絞り込まれたのでわかりやすくなったという感想もいただきました。

メリットとデメリット

このプラグインにもメリットだけではなく、もちろんデメリットもあります。
メリットとして、操作できる項目を制限するので、操作ミスや管理画面の設定項目の多さに疲れることもなく作業を行えます。
デメリットとして、更新する担当者の知識が、WordPressを知っている方から全く知らない方までの幅があると、知識のある方にとってはできることが減ってしまうので不都合を感じるかもしれません。
更新する人によって必要な項目が大きく違う場合は、どちらに合わせるかよく検討する必要があります。
しかし、アカウントを複数用意して権限を細かく分けていく方法で、更新者の知識レベル毎に管理画面の項目を切り替えられます。

次回は、ユーザー権限を細かく設定できる「User Role Editor」をご紹介したいと思います。

2017

JUL

04

2017.07.04

sawazakisawazaki

TRIADで利用しているWordPressプラグイン

弊社では、Wordpressでサイトを構築する際に、デザインの自由度を上げるためオリジナルのテーマを作成して構築します。
全てをフルスクラッチで制作すると、作業工数が多くなり費用も増えてしまうため、Wordpressの機能であるプラグインを利用しています。
今回は、弊社で利用しているプラグインを、備忘録の意味も含め紹介したいと思います。

TRIADで利用しているプラグイン

※それぞれのプラグインダウンロードページへのリンクになっています。

ただ、全てのプラグインを利用しているわけではなく、開発段階で便利だから利用していたり、環境を移動しなければならない時に利用したりと、臨機応変に切り替えています。
下記が理由になります。

避ける理由

  • 動作速度が遅くなる可能性がある
  • 競合が起きる可能性がある
  • セキュリティホールになる可能性がある
  • デザインの自由度が下がる可能性がある
  • プラグイン自体をカスタマイズする必要が発生する可能性がある

ユーザーに届けたいはずのコンテンツが、サイトのパフォーマンスが下がることで、ユーザーに届く前に離脱してしまう可能性もあります。
プラグインのメリット・デメリットを考慮して、適切な利用を進めながらサイトを構築します。

次回からは、それぞれのプラグインの利用方法について記事にしていきたいと思います。