Unity上でUDP/IPを用いた通信機能(マルチプレイ)を実装する

こんちゃ!洋梨🍐です。

unityでマルチプレイをはじめとする通信機能を実装したい方、多いのではないでしょうか?

そこでUNET(廃止予定の様ですが…)、Socket.ioなどを使おうと考えた・考えている方も多いと思うのですが私は勉強の為やライセンスの問題、使いやすさの点から1から作ってみたのでそれまでの過程及びソースコードなどを記事にしました。

今回作るもの

今回はUnityの動く端末間で、オブジェクトの位置情報を共有できるようにしていきたいと思います。


PC・スマホ間でステージ内Cubeの位置情報を共有している図

応用次第ではクライアントサーバー形式・p2p形式でのマルチプレイ機能実装など様々なことに使えるのではないでしょうか?

仕様

今回はゲームオブジェクトの位置共有、つまりTransform.positionのVector3 情報を受信及び反映、送信したいとおもいます。

なお、今回行う通信はアクションゲームで使うことを推定し、高速化を図るためUDPで行います。

Tips 「TCPとUDPの違い」
TCP : 安定性は高いが低速。

>ゲームではチャットやマッチメイキングに使われる。
UDP : 不安定だが高速。

>FPSなど速さが大切なゲームの通信で使われている。
(※RUDP : 二つを組み合わせ安定性、高速を兼ねそろえたもの。実装はアプリ側。)

プロジェクト

今回作ったプロジェクト

今回はステージ内に配置したCubeの座標を共有します。椅子とかは距離感をつかみやすい様になんとなくおいた飾りです。Textには現在のCubeの座標を表示しようと思います。

(プロジェクトファイルのダウンロードは下にあります。)

スクリプト

main.cs メイン。主な動作はここに書く。
UdpSystem.cs UDP通信の動作をまとめてあるものです
MyNetwork.cs IPアドレス取得等、ネットワーク関連の基本動作を担当

(ソースファイルのダウンロードは下にあります。)

ポート番号

同じでもいいのですが今回はホスト端末Aには5001、クライアント端末Bには5002としてあります。なお、送信に使うポートは6001としました。

パケット構造

今回は位置情報の共有のみなのでVector3(x,y,z)の情報が入るパケットを作って送ります。パケット情報を管理するクラスは以下の通りです。

DATAクラスはインスタンス生成時の引数(Vector3もしくはbyte配列)に応じてfloat x,y,zの値に変換します。インスタンス生成後、ToVector3(),ToByte()で双方に変換できるようにしています。

Vector3のそれぞれの値(x,y,z)はfloat型なので4byteです。そのためパケットサイズは12Byteになります。パケットの構造は以下の通りです。

今回の送信パケットのデーター構造

※今回は受信側・送信側と1対1での通信で一つのオブジェクトの位置座標共有しかしていないためパケットに識別番号や送信元IPなど情報を含んでいません。なお、TCPなら送信元IP等がなくてもコネクションでわかりますがUDPはそうもいかないため含まないと判別できません。

ソースコード

※なお、今回紹介するソースコードは以前私が作ったマルチプレイ仕様ゲームの一部を切り取り、説明用に編集したものになります。

Main.cs

UdpSystem.cs

ライセンスなんて書いちゃってますけどこの Younaship.com をどっかに紹介してほしいなーって思ってるだけなんであまり気にしなくて大丈夫です。

ソースファイル説明

UdpSystem.cs の説明です。

Class : UDPSystem()

コントラクタ
UDPSystem(Callback)

インスタンス生成時、コールバック関数を引数としてとります。このコールバックは受信時発生するため送信用として生成するときはnullでも大丈夫です。

関数

Set(hostIP,hostPort,clientIP,clientPort)
自分及び相手のIP、ポートをセットします。
Receive()
受信を開始します。受信するとコールバックが呼ばれます。
Send(byte[])
byte[]を「clientIP:Port」へ送信します。
Send_NonAsync(byte[])
byte[]を同期送信します。※同期送信なので送信中はほかの動作は停止します。
Stop()
WebSocket を閉じます。

Class : ScanIPAddr()

自分のIPアドレス取得用のクラスです。
var myIpAddr = ScanIPAddr.IP[n] といった感じで使います。
nには識別番号を入れます。

~NOTE~
例えばスマートフォンの場合、Wi-fi接続時はキャリア回線(4G/3G)でのIPアドレス・Wi-fi上でのIPアドレスが存在してしまうため選ばなくてはいけません。また、PCの場合仮想PCのネットワークアダプタがあるとそのIPアドレスが存在してしまいます。どちらにおいても優先順位が高いほう(接続中)が0になっているはずなのでデフォルトでは0でいいと思います。状況に合わせて変えてください。

Class : ScanDevice()

特に現段階であまり意味ないです。気にしないでください。

ソースファイル・動作説明

・まず通信を開始するためにUdpClientクラスのインスタンスを生成します。

ホスト側 (ipAddr)
udpSystem = new UDPSystem(null);
udpSystem.Set(ipAddr, 5001, ipAddr2, 5002);

クライアント側(ipAddr2)
udpSystem = new UDPSystem((x) => Receive(x));
udpSystem.Set(ipAddr2, 5002, ipAddr, 5001);
udpSystem.Receive();

クライアント側には受信時の動作としてReceive(byte[])を指定しています。
これで指定ポートでの受信時にReceive(byte[])関数が呼ばれるようになります。(引数は受信したByte配列)

・Update()内で繰り返し行う部分を書き込みます

ホスト側
vector3 = gameObject.transform.position;
DATA sendData = new DATA(vector3);
udpSystem.Send(sendData.ToByte(),99);

ホスト側はゲームオブジェクトの座標を取得・送信を繰り返します。
SendData.ToByte()でVector3の座標情報をByte配列に変換し、その内容をudpSystem.Send()で送信しています。

またSend()で送信する際に引数99をとっているのは理由がありまして、私の作ったSend関数は送信に失敗した場合(送信処理中などで)に10回までコンテニューをするようになっているためにループで呼ぶ際は失敗するとどんどん送信待機中のデータが溜まってしまうので引数に10以上の数値を入れることで失敗しても1度しか送らないようにし、回避しています。この辺は各自でカスタマイズしてください。

クライアント側
gameObject.transform.position = vector3;

vector3に保存されている値をゲームオブジェクトに反映させています。

void Receive(byte[] bytes)
{
DATA getData = new DATA(bytes);
vector3 = getData.ToVector3();
}

クライアント側のみサーバーからデータを受信時この関数が呼び出されます。受信したByte配列のデータを使える形に変換及び読み取り用の変数vector3に代入しています。

共通部分
text.text = “(” + vector3.x + “,” + vector3.y + “,” + vector3.z + “)”;

現在のゲームオブジェクトの位置を数値として画面に表示しているだけです。


ダウンロード

「ソースコード見ただけじゃ分からんわ👼」
「いや、動かんやけど♡」

という方などに向けてプロジェクトやソースコードの配布を行います。
※なお、全ての環境における動作保証はしていません事をご理解ください。

当方が確認した動作環境

・「デスクトップPC」- (有線LAN) – (wi-fi) -「スマホ」
・「ノートPC」- (wi-fi) – 「スマホ」
・ 「デスクトップPC」- (有線LAN) -「ノートパソコン」

での通信ができることを確認しました。なお、スマホは「Android(Xperia-Z5及びX)、iphone 6」を用いて確認しました。

ソースファイル ( main.cs、UdpClient.cs )

(2019/01/18 追記) 一応これでも動きますが変な部分・書き直すべき部分があったので一部書き直しています。いつか新しいソースコードに変えておきます。

Unity プロジェクトファイルのダウンロード (zip形式)


ここまで読んでくれてありがとうございました!
沢山の人でゲーム業界・アプリ業界など盛り上げていけるといいですね!

ホームページでは他にも

・様々な記事や作った作品および過程
・ソースコード、3Dファイル
・あらゆる”モノ”の作り方

などなど随時記事を新規公開・更新していますので是非見ていってくださいね!見ていただけると本当に嬉しいです!

また、「このアプリの作り方を知りたい。この部分どうなってるの?」「身の回りのこんなもの作れるの?」などなどご意見何でも受け付けていますので是非連絡くださいね!

NVMe M.2 SSD (970 EVO) を使ってみたレポ

こんちゃ!洋梨🍐です!

私のパソコンのSSDをSATA接続のSSDから、超高速と言われている「Samsung SSD 970 EVO」に改装したので今回はそのレポートです。

970 EVOとは

Samsung V-NAND SSD 970 EVO NVMe M.2 (250GB)

Samsung社製のM.2接続のNVMe SSDです。

このM.2 NVMe SSDはPCIE 3.0 x4 接続で、通常のSATA接続のSSDより高速に保存・読み込みをすることができます。

このインタフェースの差はSATAの最大速度が約600MB/sなのに比べ、PCIE 3.0 x4は 約4000MB/s とかなり違いがあります。

インタフェース別の速度比較 目安

どの位早いのか?

では、このSSDが普通のSSDよりどの位早いのかベンチマークで比較してみたいと思います。

これが私のパソコンで測定したベンチになります。
左が以前使っていたSATA接続のSSD(CFD-S6T240NMG3V)で右が今回買ったNVMe SSD(970 Evo)になります。

測定環境
CPU intel core i7 7700k
M/B H270 Pro4
RAM 28GB(8,8,8,4)

これを見れば一目瞭然。一番上のシーケンシャルアクセスはかなーり早くなっているのが分かると思います。また、ランダムアクセスもたしかに早くなっているのが分かりますね。

使ってみての感想

体感速度

体感に違いはあるかと聞かれると、正直言って「わからない」です。HDD → SSD にしたときは誰もが「早くなった!」と感じられると思うのですが、SATA SSD → NVMe SSD においては「早くなった?」と言ったところでしょうか。

しかし早くなっているのは確かで、実感できる部分はあります例えば「エミュレーターの起動」はびっくりするくらい早くなりました。また、

・仮想PCの起動速度
・新プロジェクトの作成速度
・プロジェクトの読み込み速度

なども早くなったなぁと感じました。大量のデーターを一度に読み書きすることがある方には最適なのではないでしょうか?

温度

M.2のSSDは小ささの為、熱くなると聞きますが以前私が持ち運びのために買ったM.2 SATA SSDは使ってて熱くなるとかは特になかったため気にしたことなかったのですが970 EVOはそうとはいかないようです。

左が起動後しばらくした状態で、右がアプリケーション等使った後です。
かなーり熱くなるようです。連続使用はパフォーマンスに影響しそうですね…
なお、これはヒートシンクをつけてない状態となっています。

また、ほかのデバイスと同じ処理(CrystalDiskMarkで速度測定)をした時の温度の変化を比較してみました。

おなじ処理をした時の変化温度 (なお、ヒートシンクなし)

上図が処理をする前後の温度変化を表したものになります。
いかにM.2は熱くなるものなのかわかると思います。

まとめ

・ 970 EVOはとても速い。(が、玄人向けかも)
・ ヒートシンク無しだと結構熱くなる。

よって、「よく仮想PCを使う」「開発している」など大量のデーター読み込みを頻繁に行う方にはおススメの商品でした。しかし、購入する人は一緒にヒートシンクの購入を検討したほうがよさそうです。


Samsung 970 EVO 250GB – NVMe PCIe M.2 2280 SSD (MZ-V7E250BW) [並行輸入品]

読んでくれてありがとうございました!

よろしければ他の記事も見ていってくださいね^^

「ペイントメモ」アプリ作りました

こんにちは!洋梨🍐です!
先日ペイントアプリを作ったので今回はその紹介です~

LINEで友達に図を描いて送りたいと思ったときに使ったアプリがちょっと不便だったのでせっかくなら作ろうと思って作ってみました!

せっかくなので他のペイントアプリにはない機能を入れたりしてみたので是非試してみてください~

作ろうと思ったきっかけはUnity、.NET以外も触れてみたいと思ったので作ってみた感じです。

需要ないと思うので載せてませんが欲しい方は連絡いただければソースファイル等配布いたします^^

アプリ紹介ページ


また、「この機能が欲しい」「ここ直して」なんて意見ありましたらご連絡していただければ素早く対応させていただきます。

読んでくれてありがとうございました!!

他にも様々な記事を書いてるので是非読んでいってくれると本当に嬉しいです!!

画像合成・編集をする上での用語・使い方 

こんちゃ!洋梨🍐です!

今回の記事は、以前書いた記事「よくあるプレゼント企画の真相・合成画像の作り方」 などの説明用の記事になります!

初心者向けに今回は書きましたので知識がある方はこちらなど別記事を見てください~^^

~基本用語~

拡張子

拡張子というのはコンピューター上で「このファイル種類はどんなものなのか」を記録するための文字列で、ファイル名の末尾に付けられています。
すべてのファイルは[ファイルの名前].[拡張子]という形式で保存されています。コンピュータ上では初期設定では表示されていませんが設定で表示するように変えることもできます。

※Windows10では「エクスプローラー → 表示 → ファイル名拡張子」で設定変更が可能

「拡張子表示オン」でのエクスプローラー

例えばスマホで写真と動画を撮ったとします。これら2つをスマホはどうやって区別しているでしょうか?そうです。ファイルの最後についている拡張子で判断しているのです。

画像ファイルの一般的な拡張子

編集した画像を保存するときは、状況にあったファイル形式を選択します。
ここでは一般的な画像ファイルの形式を紹介します。

JPEG・JPG (.jpg) ・一般的な画像ファイル。スマホで撮った写真などはこれ。

PNG (.png) ・アルファ値(透過情報)を扱うことが出来る画像形式。可逆圧縮形式でスクリーンショットなどはこれで保存される。

GIF(.gif) ・アニメーションを扱うことの出来る画像形式。Web上でちょっとしたアニメーション動画を扱いたい時便利である。なお、扱える色は少ない。

BMP(.bmp) ・圧縮なしのとても大きい画像ファイルである。ペイントで保存するとき大半はこれである。

レイヤー

レイヤーとは階層のことです。レイヤー分けをすることにより、階層別に処理することができるようになります。この機能はかなり使うので大切かと思います。

レイヤー機能(右下ウィンドウ)を用いて重ねて表示している

例として画像を合成する場合、背景と人を合わせたいとします。それを背景、人とレイヤーを分けることによりそれぞれに対する別の処理(移動、サイズ変更など)が後でしやすくなるというメリットがあります。

アルファチャンネル

通常の色情報(赤、緑、青)とは別に”透明度”というデーターを管理することにより「この部分は透明だよ」といった透過情報を保存できるようにするもの。

アルファチャンネル [なし・あり] 比較画像

なお、アルファありで保存するにはPNG形式を使うのが一般的です。

ピクセル・画素

画像、動画などをコンピューター上で保存するとき、一つ一つの色がついた点の集まりとして保存しています。その一つを画素・ピクセルといいます。
撮った写真の綺麗さなどをしばしば「画素数」など言いますが、それはつまり画素数(ピクセル)が多い=保存したデーター量が多い・情報が詰まっている=綺麗というわけです。

どんな画像も拡大すると画素・ピクセルを見ることができる。

RGB

色を表す値。一つの画素ごとに保存されている。
コンピューター上で色のデーターは R(Red) G(Green) B(Blue) のそれぞれの強さで表している。

例えば赤色は (255,0,0) 、黄色は赤+緑で(255,255,0)、黒は全部混ぜた (255,255,255) といった具合に保存されている。

Windows標準のペイント上・色の編集でもRGBそれぞれの値を確認できる。

HSV

それぞれの色の強さで表すRGBとは別で色相(Hue)、彩度(Saturation Chroma)、明度(Value Lightness Brightness)で表した値のこと。
実際、この値を使用する機会は少ない。
※先ほどのRGB説明内画像の「色合い・鮮やかさ・明るさ」など設定項目がこれにあたる。

~画像編集ソフトの機能~

ここからは画像編集ソフト(ここではフリーソフトのGIMP)を使う上で必要な機能・用語を解説していきます。

選択

画像のうち編集する場所を指定すること。最も使うと思われる機能。
四角や丸、自由線などで場所を指定(選択)することができる。

例1:「写真のうち顔だけ大きくしたい!」
➡ 写真のうち、顔のみを選択 → 拡大 → 顔だけ大きくなる

例2:「画像の中にいらない部分がある」
➡ 画像の不要な部分を選択 → 右クリックメニュー内「削除」

> 色域選択・ファジー選択

クリックした色に近い値を選択する。
決まった色で塗りつぶされた画像やほぼ単色の背景を切り取るときなどに使います。しきい値(※後述)の調節がかなり決め手です。

> 電脳はさみ

この機能はかなり便利です。画像から人やモノなどを上手に切り抜きたいときに重宝します。抜き取りたい部分の周りの点をいくつかクリックしていくことで自動で境界線を判断・選択してくれます。

> 前景抽出選択

おなじく 画像から人やモノなどを切り抜きたいときに使います。個人的にはあまり好きじゃないです。

選択部分に対してよく行う処理

切り取り・貼り付け
拡大・縮小
回転
鏡面反射

など沢山あるので試すのが一番ですね!

※しきい値

塗りつぶしや色域選択の時使います。簡単に言うと、色の範囲のことです。
この値を大きくすると選択される色が広い範囲になり、小さくすると狭くなります。境界線に背景色がついているなど、うまく切り抜けない時には調節してみてくださいね!

スポイト

クリックしたところの色を取得し、その色を使うことができる機能

矢印の先をスポイトでクリックして得た色を可視化した図

スタンプ

画像から切り抜いた後、背景を塗りつぶすのに向いてます。最初に選択した位置から一緒に動いてコピーしてくれて便利です。使ってみれば一発で「こーゆーものね!」となります。

ぼかし・シャープ

画像を貼り付けたときなど、どうしても境界線で違和感を覚えてしまいます。
そんな時にこれを使って境界線をにじませたりすると案外よくなります。

ブレンド

グラデーションを作るときに使います。

パス

矢印や図などを描くときにお勧めです。
綺麗な曲面が描きたいときなどに使ってみてはどうでしょうか?

どうだったでしょうか?

「いやwこんくらい知ってるからw」とか思っている方も多いかもしれませんが、初心者向けの記事ということなのでそこのところお願いします^^

もっと他のことも知りたい、その他の記事も読みたいという神様いましたら是非他の記事もこちらから見ていってあげてください!

よくあるプレゼント企画の真相・合成画像の作り方

どうも!洋梨です🍐

Twitterなどでよく見かける「プレゼント企画」というものですが、投稿された画像に信用してしまっている人、もしかして多いのではないでしょうか?

という事で今回はプレゼント企画として人を騙すことのできる画像の作り方を説明したいと思います!これでいかに騙せる画像を作るのは簡単なのか知ってもらい、騙される人が一人でも減ればいいな()なんて思います👼

合成画像の作り方

この記事では合成画像を作るのに、フリーの画像編集ソフト「GIMP」を使用します。

まだ初心者で用語が分からないという人は こちら「GIMPの使い方や画像編集の基礎知識」を読んでからぜひ読んでくださいね!


まず「要らないものがある」「買いすぎて余っている」などと書き込み、たくさんのお金やモノの写真を一緒に投稿するよくあるパターンで使われている画像を作ってみたいと思います。

素材画像がある場合

まず元々の画像があり、自分の名前なりIDだけを入れ込み、あたかも持ってるように思わせる技です。この手法はかなり簡単ですが、拾った画像を使うわけなので、理解力が少しある程度の人(中学生くらい?)にもばれる可能性大です。

1.画像を用意する

背景用 素材画像
追加用 画像

まずは素材となる画像、追加したい画像(自分のIDを書いた紙を持っているのが定番)を用意します。

2.マスク処理をする

GIMP等の画像編集ソフトを用いてマスク処理をします。
切り抜くときは「電脳ばさみ」を使うと綺麗に切り取れますよ!
保存形式はアルファ情報が保存できるPNGにします。

3.ベースにレイヤーを重ねる

レイヤーを重ねるとこうなります。
これだけでもほとんど完成かと思います。

4.後処理をして完成

違和感をなくすために後処理として、

・画像の明るさを揃える (「色」→「明るさとコントラスト」でできます。)
・背景をぼかす (「フィルター」→ 「ぼかし」で出来ます。なお、「ガウスぼかし」がおすすめです。)
・輪郭をぼかす( ツールボックス内「ぼかし/シャープ」を選択後なぞります。)

などします。するといい感じになるかなとは思います。
なお、フォトショなど使えば素早くもっといいものができるかとは思います。

素材がない・使いたくない場合

ネットから拾ってきた素材画像を使うのはいやだ・そもそも見つからないという方はベース画像を作るところから始めます。

作られた合成画像はプレゼント企画として騙すのに使うのが多数だと思うため、ネットから拾ってきたことがばれる訳にはいかないので作るのが多数なのではないでしょうか?

今回はその一例を紹介したいと思います。
お題は何となく「ジュースが余っているからほしい人RT」にします。

1.ベースを作る

今回は三ツ矢サイダーを作ります。
まずモデリングソフト「Blender」でモデリングします。
※また、モデリングしなくても3Dデーターをネットで拾ってくるという手もあります。

モデリングおよびUVマッピング(画像をオブジェクトにつける)をする

2.レンダリングする

3.背景(自分の部屋など)写真と合成する

机の上に3Dモデル(ジュース)を置いてみた

今回ちょっとざっくり作っちゃったので「違和感しかねえwww」とか思った人、やめてください。本気出せばもっとしっかりできます()
今回は缶という金属のモデリングだったため反射とかシェーダーなど設定が大変なのです。

なおこの手で作られた画像はどうしても影処理、反射処理など次第で見分けがついてしまうため画質をわざと荒くしたり、ぼかしたり、暗くしたりするのが王道です。

偽装ページの作り方

Twitterに流れてくる「お金が余っている」「宝くじに当たった」などメッセージと共にある画像で時には口座の画面などみたこと無いでしょうか?

あの画像を作るのはこれまでに紹介したより簡単かつ、リアルにできる別の方法があります。それはページ自体の書き換えです。

書き換え後イメージ お題:「宝くじ当たって使い道ないからほしい人RT」

ブラウザを使った書き換え方

今回使用したのはChromeというブラウザです。

まず書き換えしたいページを開きます。
今回は我がホームページの著者紹介ページを書き換えていきます。

F12を押します。するとデベロッパーツールが起動します。

デベロッパーツールが起動したら、ツール上の左上の矢印のポインターをクリックします。すると選択モードになるのでページ上の変更したい部分をクリックします。

するとホームページソースファイル内の該当する部分にジャンプするのでダブルクリックして書き換えます。

これで書き換えは終了です。
もう一度F12を押してウィンドウを閉じれば完全に見分けがつかなくなります👼

なお、自分の画面の表示を変えているだけなのでもちろん口座内のお金が増えることもありませんし、もう一度読み込むと画面は戻ってしまいます。

↑このように様々な数値・文・画像を書き換えられます。
ネットに上がってる写真なんて信用できませんね~

なお、悪用厳禁です^^。悪用しても当方は一切責任を負いません

フィッシングサイトはこんなイメージで出来ていると言ったらわかりやすいでしょうか?

フィッシングには気を付けましょう^^

まとめ

プレゼント企画は信用してはいけない^^

「嘘で企画してRT、フォローされてもメリットないやん」と思っているなら、プレゼント企画をする人は何かしらのメリットを狙ってやっていることを理解してくださいね。(例:フォロワー増やして業者に売ったろ~。個人情報集めたろ~などなど)

本気でもらえるなんて騙されている人なんて実際そんなにはいないとは思いますが、もしいたならこの事もしくはこの記事を教えてあげてくださいね^^

ここまで読んでくれてホントにありがとうございました♪
TwitterをはじめとするSNSなどでシェアしてくれたりすると本当にうれしいです☆

これからも色々な記事書き続けていきますので応援、ブックマークしてくれたら神です👼

※閲覧数しだいで第2編として合成動画に関する記事でも書くかもしれません♋

著者:YounashiP

HTML+JSでスライドショーを作った時のメモ

今回はホームページに載せるためにJQuery等用いずHTML、javascriptのみで作ったスライドショーについての自分で見直す用のメモになります。使いたい人はいないと思いますが、もし使いたい方いましたら是非一部でもコピペして使ってくださいね👼

ボタン式スライドショー

⬆このようなクリック式スライドショーになります。

HTML+JavaScriptで作っています。

まずはHTMLのソースコードです。

※CSSで整形して使用してください。

次はJavascriptの部分です。

使い方

スライドショーに入れたい画像を複数枚用意し、名前を「オリジナルの名前_○」でひとつのフォルダーに保存します。※○には番号(0,1,2)と振ります。

Javascriptのソースコードの定数「SLIDE_PIC_PATH」をスライド画像の保存されてるフォルダーまでのパスを入力してください。(例 http://younaship.com/img/)

定数「MAX_INDEX_SIZE 」を表示させたいスライドの画像の枚数を入力してください。※(インデックス数なので 枚数 – 1 )

HTMLでボタン、画像を配置して終了です。

⚠このスクリプトではボタンを押される事に画像を呼び出しているので画像サイズが大きい場合、表示にかなり時間がかかる場合があります。

仕組み

仕組みとしてはHTML上でボタンを配置し、onClick属性を付けることで押された時にJavascriptのchange_slide()を呼び出しています。

change_slide()は「変更する画像のID名 及び 画像のファイル名」「移動ページ数」を引数と取っています。

この例では、移動ページ数は左ボタンに-1、右ボタンに1を振ることでページ移動をさせています。

この関数が呼び出されるたびインデックスの数を上下させ対応する画像をdocument.write()で書き換えています。また、スライドショーが複数ある場合を推定して表示中のインデックスを保存する配列を用意してます。

応用

応用例としてこのスライドを自動で動くようにしてみたいと思います。

setInterval()を用いて一定時間ごとにchange_slide()を呼び出すことによりボタンをクリックしなくても自動で動くスライドにチェンジすることもできます。

⬆イメージとしてはこんな感じです。
この場合1000ms(1秒)ごとに次の画像を呼び出しています。

このように応用させて使ってもらうのが一番実用性あるかもしれません^^

読んでいただきありがとうございました♪

<メモここまで>

Youtube Premium 代用手段を考えてみた

こんにちは!洋梨🍐です。

先日、日本でついに登場した「YouTube Premium(プレミアム)」ですが登録すると出来るようになること、または登録しないでも代用できることについて今回は書いていきたいと思います。

そもそも「Youtube Premium 」とは?

この名前は月額1180円で加入(18/12/06 現在)でき、いつも使っているであろうYoutubeにおいて様々な恩恵を受けることができるサービスです。具体的には

・広告が無くなる

・スマホに動画や再生リストをダウンロードしてオフライン再生できる

・YouTubeアプリでバックグラウンド再生できる

・YouTube Originalsの映画などを視聴できる

・Google Play Music、YouTube Music Premiumを料金内でなら利用できる

など様々な恩恵を受けることができます!

ちょっと高い気もしますが沢山あるんですね!

代用手段は?

この様々な恩恵を受けられとても良い「Youtube Premium」ですが、代わりにこれらの機能を使うことができないのか?について考えてみたいと思います。

<注意> この記事は規約違反を進めるわけでもYoutube Premiumに入ることを非推奨しているわけではありません。なんならYoutube毎日見る人は入って損しないサービスだと思っております。

・広告なし機能

このサービスにおいて最もありがたいこの機能。

→ 「Adblock Plus」を使う

PCを使う方はChromeブラウザーに拡張機能として入れることができるこちらがおススメです。スマホで使いたい方は「AdBlock Browser」Android版  ios版 がおススメ!

使い方はどれもインストールしてそのブラウザーで見るだけで簡単です!

<注意>
この機能を使ったままYoutubeを観ると広告がなくなりますが、つまりそれはYoutuberに広告料が渡らないことを意味します。

YouTuber が必死に「YouTubeプレミアムはいいぞ^^」と言っているのはその意味もあります。

YouTuberを応援している方はぜひ入れないか一時無効機能などを使ってくださいね😃

※先日Adblockが入ってないPCでYoutubeを見る機会がたまたまあったのですが「え、皆よくこんな広告我慢してまで観るんや?」って思ったのは別の話

・オフライン再生

ダウンロードし、30日間オフラインでの再生が可能になるこちらも便利な機能。

→ TubeMate」アプリを使う

PCを使う方はこの機能はいらないと思うのですがスマホではほしいかもしれないダウンロード機能はこの動画ダウンロードアプリで代用することができます!

ダウンロードした動画はこのアプリではもちろん他アプリでも再生することが可能です。

<注意> Youtubeの動画ダウンロードは規約違反です。主はしてません。

・バックグラウンド再生

他のアプリ起動中などバックグラウンドでも動画再生(音楽など)ができる機能。

→ 自分でブラウザアプリを作る。

この機能はなかなかにあると便利ですね。パ〇ドラやりながら音楽聞きたかったりします。アプリを作るとなるとハードル高すぎ!って思うかもしれませんが、バックグラウンドでも閉じないブラウザー程度ならAndroid Stadioですぐ作れるので自信がある方はやってみてはいかがでしょうか?

※具体的には
・WebView を Layout 上に配置
・webview.loadUrl(YoutubeのURL); で開く
・onpause()等でも閉じないようにする
といった感じです。

また、「バックグラウンド再生」等ワードを用いて、アプリストアで検索すればあるようです()

→ YouTube Originals を観る
→ Google Play Music、YouTube Music Premiumを無料で利用

これは不可能です。当たり前ですね。

しいて言うなら、今無料で1ヶ月間のトライアルがあるので 公式ページ で登録してみて体験することが可能です。

まとめ

Youtubeプレミアムは色々な恩恵があるのでまずは無料キャンペーンが行われている、今!ためしに登録してもいいのではないでしょうか?

Youtube Premium 公式ページへ

※ちなみにこちらリンク等にアフィリエイト等ございません👼

アフィリエイトでリンクを紹介しているサイトは偏った意見しか書いてないのでまっっったく参考になりませんよね🍆