All Posts By

Takeshi

2018年12月28日
0

固定ページで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;
}

2018年12月27日
0

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

By | WordPress

WordPress５から投稿画面に、新しい編集エディタ「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ばかんせいです。

2018年12月25日
0

サイトに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>
2018年12月19日
0

Ward Press新編集エディタ（Gutenberg）の日本語化

By | WordPress

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

一部日本語化していない

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

 

2018年12月18日
0

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

 

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

2018年10月2日
0

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が必要で費用をかけれない場合には良いのではないかと思います。
2018年6月26日
0

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

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

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

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

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

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

パノラマ画像完成

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

JPEG画像で作ったパノラマ

RAW画像で作ったパノラマ

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

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

新しいARkit２を試してみる

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

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

新しいARkit２を試すには？

試すのは簡単。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つあるパチンコから１つを画面全体に移すとパチンコの縁が光るので画面をタップするとパチンコを引っ張ることができ、話すと玉が発射されます。床で行ったのでなかなかパチンコを目標に飛ばすのが難しかったです。

Arkit2
2018年6月18日
0

広島でVRが遊べる体験できるスポット一覧

By | アプリケーション, 仮想現実（VR）

広島県内で体験できるVR施設をまとめて見ました。ネットカフェでは視聴型。アミューズメンとでは複数人で体験できるものなど色々なコンテンツが楽しめる様です。13歳以下のお子さんでも楽しめるや大人向けのものなど施設ごとにターゲットにしてる年齢層も違うようなので以下参考にVR体験を楽しむ参考にしていただければと思います。

プラサカプコン 広島店

「THE OUTLETS HIROSHIMA(ジ アウトレット ヒロシマ)」内にあるVRコーナーをはじめとする、ボーリング、キッズコーナー、カラオケ、体験型スポーツなどが楽しめるアミューズメント施設。カプコンの人気ゲーム「モンスターハンター」とコラボレーションしたタイトルや、6人同時プレイが楽しめる「ゾンビウェイ」などが設置されます。各ゲームはチケット制です基本チケット2,500円/5枚。

プラサカプコン 広島店
住所 広島県広島市佐伯区石内東4丁目1-1ジ アウトレット広島1F
電話番号 082-275-4165
営業時間 11時00分 ～ 23時00分（最終受付：22:00）
7歳未満：入場は可能ですが、ご利用できません。
12歳以下：保護者の同伴が必要となります。
16歳未満：18:00以降は、保護者の同伴が必要となります。
18歳未満：22:00以降は、保護者の同伴が必要となります。
対象年齢 12歳以上※詳しくは施設にお問い合わせください。
公式サイト プラサカプコン 広島店
コンテンツ
  • ZOMBIE WAY（体験型ゾンビシューティング）
  • ゾンビジェイル（ゾンビシューティング）
  • ゾンビジェイル II（ゾンビシューティング）
  • Dimension 12（アクションシューティング）
  • サークル オブ セイバーズ×モンスターハンター（アクション）
  • PHOTON BIKE（新感覚レースゲーム）

イオンモール広島府中店(VR ZONE Portal)

子供から大人まで楽しめる地域最大級のアミューズメントコーナー。草原をロボットのわんちゃんと一緒にお散歩する初めてVRに触れる方にも分り易い内容のコンテンツを無料で楽しめる無料お試し台も設置されています。『マリオカートアーケードグランプリ』の世界に入り実際にコースを走るレーシングゲーム『マリオカート アーケードグランプリ VR』。ガンダムの手に捕まってザクと応戦する『ガンダムVRダイバ強襲』。廃病院から車椅子に乗って脱出する『ホラー実体験室 脱出病棟Ω』などが楽しめます。１アクティビティ、１人1,000円。

マリオカート アーケードグランプリ VR

ガンダムVRダイバ強襲

ホラー実体験室 脱出病棟Ω

namcoイオンモール広島府中店(VR ZONE Portal)
住所 広島県広島市安佐南区祇園3-2-1
電話番号 082-284-5891
営業時間 10:00～22:00
対象年齢 13歳以上※詳しくは施設にお問い合わせください。
公式サイト namcoイオンモール広島府中店(VR ZONE Portal )
コンテンツ
  • ホラー実体験室 脱出病棟Ω（オメガ）
  • ガンダムVRダイバ強襲
  • マリオカート　アーケードGP　VR

アルティアルパーク北棟店

広島西地区最大級の大型複合書店「アルティアルパーク北棟店」。この中のアミューズメントコーナーに株式会社コーエーが提供する体感型VR筐体VR SENSE（センス）がの導入されています。筐体はスパークリングシルバーとスパークリングブルーの２種類。それぞれで遊べるコンテンツが異なります。 各コンテンツ800円。

ＶＲセンス　スパークリングシルバー

ＶＲセンス　スパークリングブルー

アルティアルパーク北棟店
住所 広島市西区草津南4丁目7－1
電話番号 082-270-5734
営業時間 10:00～0:00
対象年齢 13歳以上※詳しくは施設にお問い合わせください。
公式サイト アルティアルパーク北棟店
コンテンツ
  • スパークリングシルバー
    搭載タイトル：『超 真・三國無双』『G1 JOCKEY SENSE』『DEAD OR ALIVE Xtreme SENSE』
  • スパークリングブルー
    搭載タイトル：『3 Majesty × X.I.P. DREAM☆LIVE』『ホラーSENSE 〜だるまさんがころんだ〜』『超 戦国コースター』

モーリーファンタジー

ファミリーを対象として、大型ショッピングセンター内にあるアミューズメント施設。運営先のイオンファンタジーとグリーは、「子どもも遊べて笑顔になれるVR」をテーマに「未来をあそぼ。ファンタジープロジェクト」を展開。13歳未満の子どもでもVRで遊べるオリジナル単眼HMD（ヘッドマウントディスプレイ）「VRメット」を開発しオリジナルコンテンツが提供されています。

世界初！子どもも遊べるVR

モーリーファンタジー 広島祗園
住所 広島県広島市安佐南区祇園3-2-1
電話番号 070-3100-4142
営業時間 9:00～21:00
対象年齢 3歳以上※詳しくは施設にお問い合わせください。
公式サイト http://www.fantasy.co.jp/
コンテンツ
  • VRどっかん!ブロック
  • VRびっくり！スライダー
モーリーファンタジー 広島府中
住所 広島県安芸郡府中町大須2－1－1
電話番号 070-3100-4737
営業時間 10:00～22:00
対象年齢 3歳以上※詳しくは施設にお問い合わせください。
公式サイト http://www.fantasy.co.jp/
コンテンツ
  • VRどっかん!ブロック
  • VRびっくり！スライダー

各ネットカフェ

ネットカフェで楽しめるのは、「Virtual Gate」「VRカフェ」「VR THEATER」の３つのサービスの提供を各店舗それぞれで行われているようです。

『VIRTUAL GATE』プロモーションビデオ ver キズナアイ

VR THEATER公式 PV2016

メディアカフェポパイ 本通店
住所 広島県広島市中区本通3-10 サザンビル4F-6F
電話番号 082-545-0369
公式サイト http://www.media-cafe.ne.jp/tenpo/hondori/
コンテンツ ・Virtual Gate
フタバ@アットカフェ 紙屋町店
住所 広島県広島市中区紙屋町2-2-33 フタバ図書紙屋町B1F
電話番号 082-542-5455
公式サイト http://futaba-at-cafe.com
コンテンツ
アプレシオ 広島駅前店
住所 広島県広島市南区松原町10-3 広島フルフォーカス5F
電話番号 082-506-1323
公式サイト http://www.aprecio.co.jp/shop/hiroshima_ekimae/
コンテンツ
フタバ@アットカフェ GIGA広島駅前店
住所 広島県広島市南区松原町2-22 6F
電話番号 082-568-4792
公式サイト http://futaba-at-cafe.com/giga_hiroshima.html
コンテンツ
フタバ@アットカフェ アルティ福山本店
住所 広島県福山市明神町1-14-20
電話番号 084-973-8785
公式サイト http://futaba-at-cafe.com/altifukuyama.html
コンテンツ
メディアカフェポパイ本通店
住所 広島県広島市中区本通3-10 サザンビル4階
電話番号 082-545-0369
公式サイト http://www.media-cafe.ne.jp/tenpo/hondori/
コンテンツ
快活CLUB 広島中央通り店
住所 広島県広島市中区堀川町5-5 ヒロヤビル
電話番号 082-544-8548
公式サイト http://www.kaikatsu.jp
コンテンツ Virtual Gate
VR THEATER（見放題）
快活CLUB 五日市駅前店
住所 広島県広島市佐伯区吉見園1-27 アビィーユビル4F･5F
電話番号 082-925-5288
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 広島祇園店
住所 広島県広島市安佐南区西原9-15-20
電話番号 082-832-4088
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 廿日市店
住所 広島県廿日市市地御前1-10-33
電話番号 0829-36-4288
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 広島横川店
住所 広島県広島市西区横川町2-6-1 2F-3F
電話番号 082-532-7188
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 東広島西条店
住所 広島県東広島市西条土与丸6-1-16
電話番号 082-493-7188
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 福山東深津店
住所 広島県福山市東深津町3-14-11
電話番号 084-973-0688
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 福山松永店
住所 広島県福山市松永町6-11-38-21
電話番号 084-930-6858
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 福山緑町店
住所 広島県福山市松浜町4-5-35
電話番号 084-973-1488
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 福山東深津店
住所 広島県広島市中区本通3-10 サザンビル4階
電話番号 082-545-0369
公式サイト http://www.kaikatsu.jp
コンテンツ
コミックバスター Ease 福山西店
住所 広島県福山市高西町4-3-61
電話番号 084-930-0904
公式サイト コミックバスター Ease 福山西店
コンテンツ
自遊空間広島本通店
住所 広島県広島市中区本通9-30　ランドマークビル3階
電話番号 082-545-5200
公式サイト https://jiqoo.jp/shop/9931679/
コンテンツ
自遊空間広島海田店
住所 広島県安芸郡海田町南大正町8-6
電話番号 082-824-4119
公式サイト https://jiqoo.jp/shop/9931673/
コンテンツ
自遊空間福山駅前店
住所 広島県福山市東桜町1-41
電話番号 084-973-7760
公式サイト http://localplace.jp/t100046288/
コンテンツ