All Posts By

Takeshi

固定ページで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+を購入してみてはいかがでしょうか?

新しいARkit2を試してみる

By | アプリケーション, 拡張現実(AR)

WWDC2018でios12などとともにARkit2の発表がありました。
Bata版の公開が始まったので早速試してみます。

新しいARkit2を試すには?

試すのは簡単。WWDC2018で公開されたデモアプリ「SwiftShot」がAppleの開発者ページからダウンロードできます。 あとは、Xcodeとiosを最新のbata版にし「SwiftShot」をインストールします。

ios12bata版へのアップデート

デペロッパーサイトのダウンロードページに行きXcode 10 betaとiOS 12 betaをダウンロードします。

ダウンロードできたらios12を入れる端末をmacにつなぎます。

Apple Configurator2を立ち上げます。

接続している端末が表示されるのでダブルクリックします。

サイドメニューからプロファイルを選択しダウンロードした、iOS_12_Beta_Profile.mobileconfigをドラックアンドドロップで端末に入れます。

端末の画面にプロファイルのインストールのウィンドウが現れるのでインストールを選択します。

インストールが完了したら、設定を開き一般>ソフトウエア・アップデートに行きios12をインストールします。

Xcode10bata版へのアップデート

次にXcode。ダウンロードしたファイルを解凍します。

Xcode-betaができるのでこれをダブルクリックすると必要なファイルがインストールされます。

SwiftShotを起動してみる

Xcode-betaを起動してSwiftShotを開き端末にビルドします。
teamの設定を忘れるとエラーになります。

起動したら動きにくいので、一旦Stopさせて端末の接続を解除し、もう一度アプリを起動します。
これで、「SwiftShot」を試すことができます。

SwiftShotを起動してみる

起動するとホストの選択があり、その後積み木が表示されます。3つあるパチンコから1つを画面全体に移すとパチンコの縁が光るので画面をタップするとパチンコを引っ張ることができ、話すと玉が発射されます。床で行ったのでなかなかパチンコを目標に飛ばすのが難しかったです。

Arkit2