Category

ホームページ制作

無料でホームページ制作(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 任意のメールアドレス

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

さくらの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でそれぞれ対象を指定するだけです。完璧に自動入力まではいきませんが、これで入力はかなり楽になると思います。

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=」横に記載されている数字になります。

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

新しいストリートビュー認定機材について

By | サービス, その他

googleがストリートビュー制作に関する機材に4つの分類を新しく設けたようです。→Create your own Street View imagery with new 360 cameras今後発売される製品で該当するものには該当するものが表記されるようです。内容を見ると2017年には20台の360度撮影できるカメラが市場に登場するんですね。

以下4つの規格に分類されます。

Street View mobile ready

スマホなどのモバイル端末でストリートビューの公開までできるものがこれに該当するようです。

【掲載されているメーカ】

  • Giroptic
  • NCTech Ltd
  • 360Fly
  • KenXen

Street View auto ready

自動車や自転車での撮影もできる高速で精度の高い撮影が可能なもの。

【掲載されているメーカ】

  • Sphericam
  • Z CAM
  • Insta360
  • NCTech Ltd

Street View vr ready

360度画像だけではなく空間の情報も収集できるもの

【掲載されているメーカ】

  • MAtterport
  • NCTech Ltd
  • InsideMaps

Street View workflow ready

ストリートビューの編集ツールなど

【掲載されているメーカ】

  • Samsung
  • Gopro
  • HumanEyes Tech
  • iGuide
  • GoThru
  • Garden Gnome
  • Panoskin/LCP360

現状対応機材として掲載されてるRICOHの名前がないんですね。年内に4K対応した次世代THETAが販売されると発表がありましたが、どうなんですかね?分類としては「Street View mobile ready」が該当すると思うんですが、気になります。

※google翻訳を使って内容を確認しているので、誤認識している部分があるかもしれません。

サーバーのphp情報を確認し必要に応じて変更する

By | その他, ホームページ制作

サーバーからサーバーへサイト移行する際に、よくアップロードサイズ制限に引っかかりデータを復元できない時があります。 たいたい2Mくらいで制限がかかっており、サイトで記事や画像を投稿する場合には特に問題はないのですが、サイトのバックアップデータは10M以上になることもあります。大抵はPHPの設定を変更し制限の上限を一時的に上げ対応します。

まず、最初に現在のPHPの設定がどのようになっているかPHP情報を取得します。取得するためには「phpinfo.php」など適当な名前のPHPファイルを作成し、以下のスクリプトを1行記載し保存。わかりやすいようにサイトの一番上にFTPソフトでアップロードします。

<?php phpinfo();?>

ブラウザーでファイルにアクセスします。サイトの一番上にアップロードされていれば「http://サイト名/phphinfo.php」または「https://サイト名/phphinfo.php」にアクセスすると以下のような画面が表示されると思います。

「post_max_size」「upload_max_filesize」の値がアップロードに関する値なのでここの値を変更します。 方法は、サーバーの仕様によって設定方法が異なることがあるので、詳しくはお使いのサーバー仕様を確認してください。 よくある方法は、「PHP.ini」というファイルを作成し、以下の内容を記入し保存します。

post_max_size = 15M
upload_max_filesize = 15M

ここではそれぞれ、上限を15Mに設定してます。この15Mの値を必要に応じ変更してください。保存した「PHP.ini」をFTPソフトを使ってアップロードします。「PHP.ini」が置かれたところ以下に設定内容が反映されるので、これもサイトの一番上におきます。

先ほどの「phphinfo.php」をブラウザーでもう一度開き、値が変更されていることを確認します。変更されていいれば成功です。データの復元などの作業が済んだら、「phphinfo.php」「PHP.ini」共に必要ないので削除してください。