All Posts By

Takeshi

無料でホームページ制作(wordpress)を試してみる

By | WordPress

SSL付きのテストサイト(wordPress)が必要だったので、何か方法はないものかと考えてみました。
Google Cloud Platformの仮想マシンの最小スペックは特定の条件で無料のようなので、これにLet’s Encryptを設定することにしました。

まずは、「Cloud Launcher」を使った構築をためしてみました。
Cloud Launcherをクリックすると構築することのできる項目が表示されるので、検索で”wordPress”を検索します。
説明画面の「 Compute Engine 上で起動 」をクリックし、必要な項目を入力します。
無料で使うにはZoneが"US"でMachine Typeは最小の”f1-micro”。 Disk size in GB が”30以下”それぞれを条件に合わせ「デプロイ」をクリックします。

しばらく待つとwordpressの完成です。簡単ですね。
完了すると、アカウント情報が表示されます。あとは、SSLを設定するだけなのですが、うまく設定できませんでした。いろいろ確認したのですが解決しなかったので他の方法にしたいと思います。今度は超高速WordPress仮想マシンKUSANAGIを導入を試してみます。詳しいやり方に関しては配布先に詳しくかかれwているのでそちらを参考にしてください。KUSANAGI for GCP

設定でつまづいたところだけお伝えします。

まず最初にマシンのスペックが低いとKUSANAGIの初期設定にあるKUSANAGIシステムのアップデート

yum --enablerepo=remi,remi-php56 update -y

を行うとうまくいかないようなので、説明で推奨されてる”vCPUx2”を選択し、あとでマシンのスペックを変更するようにします。
KUSANAGIシステムのアップデートが終了後、インスタンスを一旦停止し「編集」をクリックしマシンのスペックを”f1-micro”に変更します。
あとは、説明通り進めていけば問題なく完了します。

僕はこのマシンのスペックの切替でうまくいかずしばらく悩みました。調べた際に参考にしたサイトでは

kusanagi init

の後にマシンのスペックを変更するようにあったのですが、そのごMYAQLがうまく起動することができなくなってしまいました。
仮説ですが、VMインスタンスはデフォルトでは外部IPがインスタンスの起動、再起動を行うたびに変わってしまいます(エフェメラル外部 IP アドレス)。多分MYSQLの動作にこのIPを参照するとこがあり、マシンのスペックの変更をここなった際にIPが変わるので、うまく動作しなくなったんだと思います。

なので、KUSANAGIシステムのアップデートの前にマシンのスペックの変更を行うようにしました。

外部IPは固定することもできる(静的外部 IP アドレス)ので、インスタンスを作成した際に切り替えてしまうのが正しいやり方なのだと思います。

最後に、無事wordpressを立ち上げることができたのですが、SSLがどうもうまく動作してないようで、httpsでアクセスしようとすると、怪しいサイトとブラウザーに警告文が表示されました。これはもう一度SSLを設定するコマンドを実行するとうまく動作するようになりました。

kusanagi ssl --email 任意のメールアドレス

ここまで、進めて有料のマシーンを使っていたり、イメージも有料で数円の初期費用はかかってしまいました(笑)
継続にも、一定の量以上・場所のアクセスは有料なので少しは費用がかかってきそうです。この辺は様子を見ていきたいと思います。

RICOH THETAでも簡単自由編集「 Free Capture」(フリー・ キャプチャー)を行う

By | 仮想現実(VR)

4KVRカメラInsta360Oneの特徴の一つに自由編集「 Free Capture」ですが、RICOHの60度 全天球カメラ THETAでも行うことができます。
前回、Insta360Oneの記事でも書きましたが、Insta360Oneのパソコンでの編集ソフト「Insta360OStudio」ではmp4形式のファイルが読み込むことができます。とゆうことは、THETAで撮影したのでもできるんじゃないかな?と思って試したところ問題なく読み込み編集できました。

持っているのがTHETA Sなのでとりあえず撮影し、パソコンにデータを読み込みます。

次にパソコンのTHETA編集アプリでこれをパノラマに変換。(スマホアプリで変換し読み込んでも良いと思います。)

それをInsta360OStudioに読み込みます。あとは編集して書き出せば完了です。

今回は、THETA SなのでFull HD画質ですがInsta360Oneが4KなのでTHETA Vで撮影したデータも編集できると思います。残念ながらスマートフォンアプリの「Insta360One」にはカメラーロールなど外部データを読み込むことができないので、編集することができませんが、凝った編集をしたい方はスマホよりパソコンの方がやりやすいと思うので良いのではないのでしょうか?

「Insta360OStudio」は無料で利用することができます。THETAで360度動画を面白く編集したい方は試してみてはいかがでしょうか?

さくらのVPSでスケールアップ

By | WEBサーバー, ホームページ制作

さくらのVPSをスケールアップを行った時の気づきをおしらせします。
ところでさくらのVPSって「さくらのVPS」というサービス名なんですね。

まずスケールアップできるサーバーの条件ですが、公式サイトでは次のように明記されていらす。

スケールアップできるサーバーの条件は、v4のサーバプラン(2014年11月27日以降に契約されているサーバー)お客様に限られます。また、以下の条件ではスケールアップはできません。

  • 下位プランへの変更
  • 別ストレージプランへの変更
  • Windowsプランやベアメタルプランのスケールアップ
  • 別リージョン、別ゾーンへのスケールアップ
  • お試し期間のサーバーや、料金が未納状態になっているサーバープラン
  • VPSを申し込まれた当日のスケールアップ

スケールは管理画面のサーバー一覧からスケールアップしたいサーバーを選択し、右上にある「各種設定」から「スケールアップ」を選択します。
ここで、あとは、スケールアップを行うプランを選択し、必要な情報を入力し申し込むだけです。

ただこの際、サーバーを一旦停止する必要があります。
そして、スケールアップが完了するまでそのまま止めておく必要があります。スケールアップ にかかる時間ですが、さくらのサポートに電話で確認したところ、30分〜1時間かかるとのことでした。早くできませんか?と聞いたところ作業は自動で行われるため手動で対応することはできないとのことでした。

今回のスケールアップでは約1時間かかりました。
その後、完了するとスケールアップ作業中の表示が気えるので、それを確認してサーバーを起動して作業終了です。

スケールアップ後サーバーの内容には変更ないので、起動すればもとどおえりサイトなどを見ることができます。

ということで、サーバーをスケールアップする時には、「1時間ほどサーバーを停止する必要があり、完了を確認したあとサーバーを起動する必要がある。」ということへの何らかの対応が必要になります。

お問い合わせフォームにJavaScriptを使って自動カタカナ入力の機能をつける

By | jQuery

ホームページのお問い合わせフォームには、お問い合わせいただいた方に連絡を取るさい、漢字の読み方を間違えないために、かなの入力欄がある場合がありますが、入力する方からすると2度名前を入力しなくてはならず面倒です。そこで、少しでも負担なく入力してもらうために自動入力の機能を実装したいと思います。

今回、JQueryプラグインであるjquery.autoKana.jsを利用します。jquery.autoKana.jsは下記からダウンロードできます。
harisenbon/autokana · GitHub

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" data-semver="2.2.0" data-require="jquery@*"></script>
	<script src="jquery.autoKana.js" language="javascript" type="text/javascript"></script>
	<script type="text/javascript">
    	$(document).ready(
        	 $.fn.autoKana('#your-name-sei', '#your-namekana-sei', {
        		katakana : false  //true:カタカナ、false:ひらがな(デフォルト)
    		});
    		$.fn.autoKana('#your-name-mei', '#your-namekana-mei', {
        		katakana : false  //true:カタカナ、false:ひらがな(デフォルト)
    		});
    	});
	</script>
</head>
<body>
	<div>
    	<label class="">氏名</label>
    	<input type="text" id="your-name-sei">
		<input type="text" id="your-name-mei">
	</div>
	<div>
    	<label class="">カナ</label>
    	<input type="text" id="your-namekana-sei">
		<input type="text" id="your-namekana-mei">
	</div>
</body>

このように必要なファイルを読み込んでjavascriptでそれぞれ対象を指定するだけです。完璧に自動入力まではいきませんが、これで入力はかなり楽になると思います。

360VRカメラ Insta360 ONE ステッチについて

By | 仮想現実(VR)

Insta360ONEの大きな特量に「FreeCapture(自由編集)」があります。撮影した360°映像から自由にカメラ視点を動かしたりリトルプラネットなどの表示方法を変えたりができる編集機能で、スマホアプリとパソコン用のソフト「insta360 studio」どちらでも行うことができるようになっているのですが、実際に使ってみると「insta360 studio」でどうもうまく編集できずいろいろ試した結果うまくできたので覚書です。

Insta360oneで撮影したデータは、静止画は「insp」「dng」、動画は「insv」という形式で保存されるのでこれをカメラ本体から取り込み「insta360 studio」で開くと次のように次のよう表示されます。

「capture」に切り替えると自由編集を行うことができます。
ただ、前後は問題ないのですが、横を表示しようとすると90度傾いたような状況になってしまいます。
横に展開された状態の表示が出ているのですが、水平が出てません。このせいでこのような状況になってしまいます。

スマートフォンアプリでは、こんなことはなくうまく横を表示することができます。
試しにスマートフォンアプリからスマートフォンに保存しこれを、パソコン取り込んで見ます。

スマートフォンアプリからスマートフォンに保存する際にデーターはMP4形式で保存されます。
これをパソコンに取り込んで見てみると水平がちゃんと出ているようです。

「insta360 studio」では、MP4ファイルも読み込めるので、読みこんで「capture」にして横に動かすと問題なく横を表示することができました。

MW WP Form で通知メールに添付ファイルを送らない方法

By | WordPress
WordPressで問い合わせフォームのプラグインでは、「Contact Form 7」 が使われると思うのですが、標準では確認ページや完了画面ページがありません。手を加えれば対応することも可能ですが、確認や完了が必要な場合には「MW WP Form」を利用させていただくことが多いです。 「MW WP Form」には標準で、確認ページや完了画面ページの設定がありそれに加え、フォームに入力された内容をデーターベースに保存する機能も備わっています。 今回、フォームの項目にファイル投稿の項目を追記したのですが、フォームで問い合わせがあった際に送られる管理者宛のメールには外しデーターベースには登録するようにしたいとの要望をいただき対応したので、この方法をご紹介します。 管理者宛のメール内容の編集方法は、「MW WP Form」公式のマニュアルに記載されています。この他にも使い方やカスタマイズに関して詳しく書かれているので困った時には、ここを確認されることをお勧めします。この中で、変数のサンプルコードをみると
/**
 * my_mail
 * @param MW_WP_Form_Mail $Mail_raw
 * @param array $values
 * @param MW_WP_Form_Data $Data
 */
function my_mail( $Mail_raw, $values, $Data ) {
    // to, cc, bcc では {キー} は使用できません。
    // $Data->get( 'hoge' ) で送信されたデータが取得できます。
    $Mail_raw->from = 'hoge@example.jp'; // 送信元を変更
    $Mail_raw->sender = 'hoge'; // 送信者を変更
    $Mail_raw->subject = {お名前}様からの問い合わせ; // 件名を変更
    $Mail_raw->body = '{問い合わせ内容}'; // 本文を変更
    return $Mail_raw;
}
add_filter( 'mwform_admin_mail_raw_mw-wp-form-xxx', 'my_mail', 10, 3 );
とのことで、bodyにファイル項目の{キー} を入れなければいいのかと思ってやったのですが、うまくいきせんでした。本文じゃなく添付ファイルとして扱われているのかな?と次にsubjectやbodyのように項目がないかプラグインのソースコードを眺めていると「attachments」というのがそれっぽいのでこれを空にして見ます。
/**
 * my_mail
 * @param MW_WP_Form_Mail $Mail_raw
 * @param array $values
 * @param MW_WP_Form_Data $Data
 */
function my_mail( $Mail_raw, $values, $Data ) {
    $Mail_raw->attachments = ''; // 添付ファイルを変更    return $Mail_raw;
}
add_filter( 'mwform_admin_mail_raw_mw-wp-form-xxx', 'my_mail', 10, 3 );
これでうまく、管理者宛のメールにはファイルは送られず、データーベースに登録されるようになりました。

記事一覧などで使える画像の中央表示あれこれ

By | HTML・CSS

画像付きの記事一覧などを表示する際、画像のサイズが統一されていればそのサイズで調整しておけないいのですが、記事などはお客様が更新されることが多いので、サイズが同じになるとも限りません。画像の統一をお願いするにも画像加工ができない方もいますし、度々画像を加工するのは面倒です。

そこでCSSを使ってどのサイズの画像でもうまく表示できるように調整します。今回は画像の縦横の比率を保ちつつ画像を中央に表示する方法をいくつかご紹介します。

一番よくやるのがこれです。

See the Pen 画像中央表示 by irodory (@irodory) on CodePen.

もっと簡単にやる場合は、背景画像として設定する方法もあります。
See the Pen 画像中央表示(背景) by irodory (@irodory) on CodePen.

WordPressなどで、画像ファイルをそれぞれ設定したい時には、div要素にstyleで画像設定しこの画像部分をCMSの関数で挿入するようにします。

<div class="col-img" style="background-image: url(https://picsum.photos/640/320) ;">
</div>

ただ、背景画像は印刷するにはプリントの設定が必要の場合があるので、注意が必要です。
最後に「object-fit」プロパティーを使う方法。

See the Pen 画像中央表示(object-fit) by irodory (@irodory) on CodePen.

簡単ですね。「object-position: 横の位置 縦の位置;」で位置の調整も可能です。ただこれIE、Edgeの少し前のものには対応していません・・・。
ただjavascriptなどで対応する方法もあります。今後は、この設定が主流になりそうですがもうしばらくは一番上の方法が良いように思います。

アイキャッチ画像が設定されて無い時は、共通画像を設定する【WordPress】

By | WordPress, カスタマイズ, ホームページ制作

WordPressには、1つ一つの記事にアイキャッチ画像を1つ設定することができます。設定したアイキャッチ画像は、投稿した記事を一覧表示した際の見出し画像としてや、記事詳細のトップ画像などとして使えば、記事を目立たせることが出来ます。

アイキャッチ画像の設定がされてない場合、デフォルトでは空になり何も表示されず、間抜けな見た目になってしまうので、アイキャッチ画像の設定がない場合には、任意の画像が表示されるようにします。

一番簡単な方法はアイキャッチ画像を表示するプログラムにアイキャッチ画像がない場合の処理を追加します。

<?php
	if (has_post_thumbnail() )  {
		//アイキャッチ IDを取得して画像の「URL,横幅,高さ」を取得。
		$size = 'medium'; //thumbnail medium large full
		$image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), $size);
		//URLを返す
		$image_url = $image_url[0];
	} else {
		//アイキャッチがない場合は代替画像を表示。
		$image_url = 'https://placehold.jp/310x200.png';
	}
?>

これで、アイキャッチ画像の設定を忘れた場合にでも、設定した画像が表示され見た目が統一されます。

ただ、これだとアイキャッチを使用するところすべてにプログラムを記述する必要があり、一から作るん場合にはいいのですが、既存のサイトに後で追加する場合などは、修正抜けなどが起こる可能性があります。なのでfunctionで新規投稿の際に、アイキャッチにデフォルトの画像が設定されるようにします。

function default_thumbnail( $post_id ) {
    $post_thumbnail = get_post_meta( $post_id, $key = '_thumbnail_id', $single = true );
    $default_thumbnail_id = '5044';// 画像のポストIDを指定
    if ( !wp_is_post_revision( $post_id ) ) {
        if ( empty( $post_thumbnail ) ) {
            update_post_meta( $post_id, $meta_key = '_thumbnail_id', $meta_value = $default_thumbnail_id );
        }
    }
}

add_action( 'save_post', 'default_thumbnail' );

画像のidはメディアの一覧から指定したい画像の「添付ファイルの詳細」を開いた時のURLの「item=」横に記載されている数字になります。

最終的には、設定項目を管理画面に追加しそこで設定した画像が反映されるように制作すると後で画像の変更なども出来て快適にサイト運営を行うことが出来ます。