Category

ホームページ制作

2018年1月9日
0

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

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

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

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

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

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

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

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

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

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

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

2018年1月6日
0

お問い合わせフォームに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でそれぞれ対象を指定するだけです。完璧に自動入力まではいきませんが、これで入力はかなり楽になると思います。

2017年11月8日
0

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

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などで対応する方法もあります。今後は、この設定が主流になりそうですがもうしばらくは一番上の方法が良いように思います。

2017年5月13日
0

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

By | サービス, その他

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

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

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翻訳を使って内容を確認しているので、誤認識している部分があるかもしれません。

2017年4月10日
0

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

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

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

まず、最初に現在のPHPの設定がどのようになっているかPHP情報を取得します。取得するためには「phpinfo.php」など適当な名前のPHPファイルを作成し、以下のスクリプトを１行記載し保存。わかりやすいようにサイトの一番上に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」共に必要ないので削除してください。

2017年1月22日
0
wordpress

wordpressのビジュアルエディターとテキストエディターの切り替え

By | その他

wordpressの投稿画面にはビジュアルとテキストの二つの編集モードが用意されています。 ビジュアルはTinyMCEというライブラリーが使われHTMLやCSSといったホームページ編集の知識がなくても簡単にページが作成できるように、ワードのような作成を補助する機能が、アイコンなどでわかりやすく用意されています。一方テキストはHTMLのソースコードをそのまま入力できより複雑で本格的なページを作成することができます。

Read More