All Posts By

Takeshi

新しいARkit2を試してみる

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

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

新しいARkit2を試すには?

試すのは簡単。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を起動してみる

広島で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アクティビティ、1人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(センス)がの導入されています。筐体はスパークリングシルバーとスパークリングブルーの2種類。それぞれで遊べるコンテンツが異なります。 各コンテンツ800円。

VRセンス スパークリングシルバー

VRセンス スパークリングブルー

アルティアルパーク北棟店
住所 広島市西区草津南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」の3つのサービスの提供を各店舗それぞれで行われているようです。

『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/
コンテンツ

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」にして横に動かすと問題なく横を表示することができました。

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

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