All Posts By

Takeshi

お問い合わせフォームに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」にして横に動かすと問題なく横を表示することができました。

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

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

子供でも使えるVR ゴーグルヘッドセット

By | 仮想現実(VR)

VIVEやOculus RiftなどのHMD VRヘッドマウントディスプレイや、スマホを使った安価なVRゴーグルヘッドセットは、擬似的に左右の目に違う映像を投影するなどの構造上、目に大きな負担がかかるので12〜13歳以上の利用が推奨されています。

イベントなどでVRコンテンツを行う場合には、13歳以下のお子さんでも楽しんでいただけるコンテンツも用意し、そちらを楽しんでいただくようにしています。

Read More