Category

ホームページ制作

固定ページでGutenberg(ブロックエディタ)を無効化する方法

By | カスタマイズ

入力欄などカスタマイズしている場合など、新しい編集画面(Gutenberg)が邪魔になる事があります。

特定の投稿タイプでGutenbergを無効化したい場合は、functions.phpに下記のように記述します。
このサンプルコードは「固定ページ」のみ無効化されるようになります。

add_filter( 'use_block_editor_for_post_type', 'hide_block_editor', 10, 10 );
function hide_block_editor( $use_block_editor, $post_type ) {
  if ( $post_type === 'page' ) return false;
  return $use_block_editor;
}

WordPressの投稿編集画面をカスタマイズする

By | WordPress

WordPress5から投稿画面に、新しい編集エディタ「Gutenberg」に変わりました。
編集機能は以前より直感的になったり、簡単に記事がかけるようになりました。

みにくい「Gutenberg」

機能はよくなったのですが、タイトルの文字サイズなどアンバランスでみにくいのでCSSを使って調整したいと思います。

編集エディタ用の外部CSSを設定する

外部CSSを読み込むためには、functions.phpに次のコードを追記します。

add_editor_style( get_stylesheet_directory_uri() . '/css/editor-style.css' );
add_theme_support( 'editor-styles' );

ここではcテーマのcssファルダーにある「ditor-style.css」を読み込んでいます。

変更したい部分のCSSを追記

あとは外部CSSに、変更したい部分のスタイルを設定し実際に反映されている確認していきます。
例えば、タイトルの文字サイズを小さくしたければ、

.editor-post-title__block .editor-post-title__input { font-size: 21px; padding: 9px 14px; }

タイトルの文字の大きさが変わりました。あとはこれを繰り返し必要な変更を加えて胃kwばかんせいです。

サイトにJavaScriptでグラフを表示する

By | JavaScript

Chart.jsはグラフ作成用のJavaScriptライブラリーです。簡単にアニメーションのついたグラフを表示することができます。折れ線グラフ、円グラフ、棒グラフ等、様々な種類が用意されています。

使い方

<canvas id="myChart" ></canvas>

まず、Chart.jsのライブラリーを読み込みます。今回はCDNを利用します。
他にもいくつか方法はあるので、公式サイトで確認してみてください。

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js

JavaScriptでグラフの内容を記載します。

<script type= text/javascript >
    var ctx = document.getElementById('myChart').getContext('2d');
    var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',data: {
            labels: ["Red", "Blue", "Yellow"],
            datasets: [{data: [300, 50, 100],
                backgroundColor: ["rgb(255, 53, 92)","rgb(1, 145, 255)","rgb(255, 186, 45)"]
            }]
        }
    });
</script>

グラフを表示したいところにcampusタグを記入。

<canvas id="myChart" ></canvas>

Ward Press新編集エディタ(Gutenberg)の日本語化

By | WordPress

新しいWard Pressから編集エディタが新しい仕様に変更されました。
事前にプラグインの形で提供されていたものはちゃんとされていたのですが、日本語への対応が一部しかされていません。

一部日本語化していない

アップデートや新規インストールなどいろいろ試したのですが、日本語化されませんでした。
唯一、日本語で利用できるのは、プラグイン版の新しい編集エディタ(Gutenberg)を利用することのようです。
Gutenbergプラグインプラグインでは日本語化できているので、アップデートで近いうちに対応されてるとは思いますが、しばらくはプラグインを利用した方がいいようです。
Gutenbergプラグインを追加

 

WordPress新投稿エディタGutenbergのプラグイン対応確認

By | WordPress

WordPress5.0が12/7に配信されはじめました。
今回のアップデートでは、以前から予告されていた通り記事を作成する編集エディタがGutenberg(グーテンベルク)と呼ばれる新しいものに変更されました。

今回は、よく利用するプラグインでの対応状況を確認したいと思います。

 

高度なカスタムフィールドプラグイン Advanced Custom Fields

最新バージョンではWordPress5にも対応しているとのことですが、フィールドタイプにブロックエディタ(Gutenberg)はないようなのです。また、表示位置や画面の非表示などが新しいエディタではうまく反映されまあせん。Classic Editorプラグインを入れ従来のエディタにすると問題ないようです。
Advanced Custom Fields

 

カスタム投稿タイププラグイン Custom Post Type UI

WordPress5にはまだ対応していません。投稿タイプを追加すると新しい編集エディタ(Gutenberg)が適応されます。サポート項目の各表示非表示も機能するようです。Classic Editorプラグインを有効にすると、追加したカスタム投稿タイプも従来のエディタに切り替わります。現在Custom Post Type UIには編集エディタを従来とGutenbergに切り替える項目はないのですが、新しい編集エディタ(Gutenberg)はREST APIを使っているので「REST API で表示」の項目を”false”にすると従来のエディタに切り替わるので、REST APIが必要なければ投稿ごとにエディタを切り替えると言った使い方もできそうです。

Custom Post Type UI

 

投稿画面の編集機能拡張プラグインTinyMCE Advanced

最新バージョンではWordPress5にも対応しています。設定画面には新旧それぞれ設定できるようになっています。
新しい編集エディタ(Gutenberg)では、ブロックにClassicという項目がありこの編集機能の設定ができるようになっています。
高度な設定に「Add “Classic Paragraph” Block.」がありデフォルトではチェックが入っておりClassic Paragraphというブロックも追加されます。項目などはClassicと同じで、説明ではメリットがあると書かれてはいるのですが、使った感じではメリットがよくわかりませんでした。

ClassicParagraph

 

3つのプラグインを試してみたのですが、 意外と問題は無いように思いました。Advanced Custom Fieldsに関してもβ版ではカスタムブロックを追加できる機能など、が盛り込まれているので随時対応されていきそうです。今回は新規にテスト環境を用意しての確認だったので今度は既存のサイトデータを使って、切り替え時のデータの反映を確認していきます。

Cloudflareを使って共有型レンタルサーバーのSSL対応

By | WEBサーバー
フォームなど個人情報やクレッジトカードなどの重要なデータを扱うところでは、非httpsページでは警告が表示されていましたが、最近ではサイト全体がhttps化されていない全てのサイトに対して警告が表示されるようになりました。 httpsは、具体的には認証局により署名されたSSLサーバー証明書を使ってデータのやり取りが行われます。SSL証明書を使ってSSL通信を行うことで情報が暗号化されるため、盗聴、改ざん、なりすましを防止することができ、パスワードやその他の個人情報を送信しても安全におこなえます。 今までは、年数万円の費用でSSL証明書を取得、設定し対応していたのですが、共有型レンタルサーバーではこの流れに合わせ低価格または無料のSSLが提供されるようにんなってきました。しかし無料のSSLは、制約がある場合があるので用途や運営には注意が必要なことがあります。 ですので、個人のブログなどの場合は費用をかけにくいと思うので、無料のSSLで良いと思うのですが企業などの場合は有料のSSLを利用されることをお勧めします。 使い勝手がいいので、よくCPIの共用型レンタルサーバーACE01を利用するのですが、残念ながらCPIの共用型レンタルサーバーACE01には無料のSSLが用意されていません。先ほども書いたようにテストやサンプルまたは個人的なものでSSLが必要な際に有料のSSLを用意するのは辛いので、何かないかと探して見たところ対応方法がみつかったので試してみました。 CloudFlareを使ってSSL Cloudflareというインターネットセキュリティサービス、分散型ドメイン名サーバシステムなどユーザーとサーバーの間に入って色々なサービスを提供するサービス。利用するサービスによっていくつかの料金プランが用意されているのですが、この中にSSLがあり無料プランでも利用できるようです。 設定は簡単です。まずCloudFlareでアカウントを作成します。 次にプランを選択、今回は無料のものを選びます。 次にSSLを設定したい、ドメインを入力します。 その後、DNSレコードと通信方式の設定が表示されるので、必要な設定をしていきます。デフォルトで必要な設定はされていると思います。 ネームサーバーの情報が表示されるので、これをメモしてドメインを管理しているサービスのネームサーバーの情報を書き換えます。 お名前だとこんな感じ。 しばらく待つとDNS情報が反映され、設定完了。httpsでサイトが表示できるようになったことが確認できます。 ただこれはあくまで見せかけだけです。CloudFlareにはSSLの設定がいくつか用意されています。本来と同じような使い方をするには有料版にプランを切り替える必要があるようです。また、WordPressなどを使う場合にもいくつか手を加える必要があったりするようです。CPIではGet a Fileというファイル転送サービスが利用できるのですが、CloudFlareの設定をするとうまく機能しなくなりました。解決策はあるかもしれませんが、このようにいつもとは違うことが起きる可能性があります。 癖はありそうですが、CPI以外でもCloudFlareを利用してSSL化することは可能のようなので、テストや個人的な何かでSSLが必要で費用をかけれない場合には良いのではないかと思います。

DJI カメラ付きスタビライザー Osmoでパノラマ撮影

By | お役立ち・知識
DJI カメラ付きスタビライザーはOsmoは、なんの調整もせずに搭載された3軸スタビライズシステムで、三方向の振動を制御し、 滑らかな4K映像を撮影することができます。またそのほかにも一台でモーション・タイムラプス(動きのあるタイムラプス撮影)やスロー撮影などいろいろな機能が備わっています。その一つにパノラマ撮影機能があります。

OSMOでパノラマ撮影後のデータ

OSMOには180度、360度のパノラマ撮影とマトリクスがあり、それぞれ自動でカメラ位置を移動させ複数枚撮影を行い撮影後にそれを結合し1枚の画像を生成され接続しているスマートフォンに保存されます。ただ、これはサムネールなのか画像サイズが小さい。また、SDカードに保存されるデータは結合前の元画像のみ。パノラマ画像は保存されていません。

簡単にパノラマ画像を作る

保存された画像を並べただけではうまくパノラマ画像になりません。何か簡単に作れないかと考えていると・・・ありました!Photoshopの自動処理の中に複数の画像を結合する機能がありました。 Photoshopのメニューからファイル>自動処理>Photomergeを選択します。 開いたPhotomergeウィンドウで参照ボタンをクリックし結合したい写真を選択し開きます。 レイアウトは「自動選択」。ソースファイルの「画像を合成」「周辺光量補正」「歪曲収差の補正」「コンテンツに応じた塗りつぶしを透明領域に適応」全てにチェックを入れOKをクリックするだけ。あとは待ってればPhotoshopが綺麗に合成してくれます。 Photomerge パノラマ画像完成

パノラマ画像完成

とても自動でパノラマ画像ができました。端の方や足りない部分は「コンテンツに応じた塗りつぶし」自動生成されているのであまりうまくできていない場合があるので、手動で修正するか面倒なら切り抜くといいと思います。OSMOはRAW撮影にも対応しており。PhotomergeはRAWも合成できます。 試した感じでは、RAWを色調整しても合成後は調整前の状態で合成されるようでした。

JPEG画像で作ったパノラマ

RAW画像で作ったパノラマ

残念ながら生産終了するようです。

OSMOの光学ズーム機能がついたOSMO+が生産終了するようで、各ショップで特別セットなど今ならお得に手に入れそうです。 パノラマ撮影以外にも色々な撮影機能がありぶれのない滑らかな4K映像が取れるOSMO+を購入してみてはいかがでしょうか?

2018年7月からHTTPS非対応に警告表示

By | お役立ち・知識, ホームページ制作

googleは以前からサイト全体のSSLサーバー証明書(以下SSL証明書)を導入を推奨してきましたが、
2018年7月リリース予定のChrome 68より、SSL証明書を導入していない全てのウェブサイトで「保護されていません」の警告表示が開始されます。

Chrome 68 では、すべての HTTP ページのオムニボックスに「保護されていません」と表示されます。(出典:Google)

Chrome 68 では、すべての HTTP ページのオムニボックスに「保護されていません」と表示されます。(出典:Google)

httpsの利用状況

Googleの調査よると、現在ウェブサイトのhttps化の状況は以下のようになっています。

    • Android と Windows の Chrome トラフィックの 68% 以上が保護されています。
    • Chrome OS と Mac での Chrome トラフィックの 78% 以上が保護されています。
    • ウェブ上のトップ 100 サイトのうち、81 がデフォルトで HTTPS を使用しています。

googleウェブマスター向け公式ブログより

2017年以降特に増加しているそうです。
これトラフィックなのでSNSやECなどが牽引しているのではないかと思います。
まだ一般的な企業や店舗で対応しているとこは、日本では少ない感じがしますし追加費用をかけてまで行うとこは特に広島など地方ではまだ少ない気がします。

セキュリティ警告表示の経緯

Google Chrome ブラウザは、SSLサーバー証明書(以下SSL証明書)を導入していないウェブサイトに対して、アドレスバーによる警告表示を段階的に以下のような強化してきました。
これに合わせそのほかのブラウザーも同じような警告表示が実施されています。

2017年(Chrome 56) Chrome 56 HTTPサイトで提供されているパスワードやクレジットカード番号の入力フォームで警告表示開始
2017年(Chrome 62) Chrome 62 HTTPサイトで提供されている全てのフォームで警告表示開始

今後について

今回はHTTPS非対応のサイトに対してグレーでの警告表示ですが、10月以降の新しいChromeでは、赤字や赤斜線などさらに警告表示のが目立つように強化していくそうです。
他のブラウザーでも同じように警告表示を行ってくると予想されます。今の所HTTPS非対応であることが検索順位には関係ないようですが、今後はわかりません。

HTTPページのChrome 70の処理(出典:Google)

HTTPページのChrome 70の処理(出典:Google)

ただ、googleが検索結果に反映しなくても、開くと警告が表示されるサイトを見たいユーザーは少ないと思いますので、自然にアクセスが減ることが想像されます。
とはいえ、HTTPSが何かわからなくても自社サイトに警告が出て入れば対応を検討をされるところは増えてくると思います。

SSLサーバー証明書(以下SSL証明書)の導入

昔は高価だったSSLサーバー証明書(以下SSL証明書)も今は、無料や年数千円など安価のものも提供されているので導入の敷居を下がっていると思います。
SSLサーバー証明書(以下SSL証明書)の対応は、意地悪ではなく情報が途中で盗み取られるのを阻止やウェブサイトへのなりすましを防ぐことなど安全を確保なので導入してみてはいかがでしょうか?いろどりでも既存のウェブサイトへのSSLサーバー証明書(以下SSL証明書)対応のご相談や導入のお手伝いを行っていますので、お気軽にお問い合わせください。