「HTML5」カテゴリーアーカイブ

UnityでGoogle Cloud Natural Languageにアクセスする

APIキーが見えるのであくまでも実験用です※PHPだからクライアントには見えないか,,

流れ

Google Cloud Natural LanguageのAPIキーを取得

(がんばってとってください)

  1. 作成するとこんな画面がでてきます
  2. HTTPリファラかIPアドレス制限(サーバのIPアドレス)を使用します
  3. PHPファイルを作成します(test2.php)
<?php
if(isset($_POST["comment"])){
$comment = $_POST["comment"];
$url = 'https://language.googleapis.com/v1/documents:analyzeSentiment?key=(ここに自分のAPIキーを入れる)';
$document = array('type' =>'PLAIN_TEXT','language' =>'ja','content' =>$comment);
$postdata = array('encodingType' => 'UTF8', 'document' => $document);
$json_post = json_encode($postdata);
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $json_post);
$result = curl_exec($ch);
curl_close($ch);
 
$result_array = json_decode($result,true);
    
echo $result_array[documentSentiment][score];
 
}
?>

サーバにアップロードし,そのページまでのURLを確認します

 

Unit側のC#ファイルを作成します

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//<--追加
//using System;

public class test2 : MonoBehaviour
{

    public Text ResultText_;
    public Text InputText_;
    public string ServerAddress;//サーバアドレスをエディタで入力する


    // Update is called once per frame
    void Update()
    {
        
    }

    void Start()
    {
        ResultText_.text = "";//画面表示を消す

    }

    //UIのボタンにアサインするスクリプト
    public void SendSignal_Button_Push()
    {
        StartCoroutine("post_data");//ボタン押されたらコルーチンを開始
    }



    private IEnumerator post_data()
    {
        WWWForm form = new WWWForm();
        form.AddField("comment", InputText_.text); //Input Field等から渡された変数をcommentのタグ付けして内容を送信
        WWW post = new WWW(ServerAddress, form);
        yield return post;//データの戻りを待つ
        Debug.Log(post.text);//コンソールに表示(この出力内容はPHPで変更可能)
        ResultText_.text = post.text;
    }




    }

Unityでの操作

  1. Unityで空のGameObjectを作成し,test2.csを貼り付けます
  2. PHPへのURLを入力します
  3. GameObject>UI>InputFiledGameObject>UI>Textを作成し,下図のように割り当てます
  4. GameObject>UI>Buttonを作成し,Inspectorからボタンを押せるようにします
  5. InputFieldはMuli Line Newlineの設定します
  6. Unityを再生し,文字を入力すると,感情が帰ってきます
  7. 「課題が終わらない」は-0.2でした

 

スクリプトのなんとなく対応みたいなの

複数のcanvasをレスポンシブに配置

小さいcanvasをレスポンシブに配置するテスト

こんなのできる.一色ずつcanvas作成

要bootstrap4,jQuery

(任意)

chroma.jsライブラリ読み込み

    <!--chroma.jsライブラリ読み込み-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>

スタイルシート作成(レスポンシブ用)

    <style>
    .wrapper{
  width: 100%;
  height: 100%;
}</style>

 

canvasの外側のDIV作成 wrapperクラスのサイズ

<div id="scales" class="wrapper"></div>

 

JSでcanvasを複数作成

<script>
    
    //chroma.js使用
var scales = document.getElementById('scales');
var color_list = chroma.scale(['blue', 'crimson']);//blueからcrimsonへの色変更
var divide = 5;//色変更の分割数
var i;

    //forでcanvasを複数作成
for (i = 1; i <=divide; i++) {
    
    //canvasを次々作成
    var mem_canvas;
    mem_canvas = document.createElement("canvas");
    mem_canvas.setAttribute("id","scaleCanvas" + i);//ID変更し複数作成可能に
    
    //jQueryでこのDIVの縦横を取得
    var w = $('.wrapper').width();
    var h = $('.wrapper').height();//未使用
    mem_canvas.width = w/divide;//canvas幅はwrapper÷分割数にする
    mem_canvas.height = w/divide;//正方形にする
    //作成するcanvasのCSS設定
    mem_canvas.style.width = (100/divide) + '%';//canvasに独自のCSSを入れる
    mem_canvas.style.height = 'auto';//高さはwrapper比にはできないんでautoにする    
    //色を塗る
    var context = mem_canvas.getContext('2d');
    context.fillStyle = color_list(i/divide);//
    context.fillRect(0, 0, w/divide, w/divide);//正方形に塗りつぶす
    //HTMLに追加
    scales.appendChild(mem_canvas);//親のDIV scalesに子として追加
}
    
    </script>

 

参考

http://shiru-web.com/2017/04/20/01-24/

https://qiita.com/ShinyaOkazawa/items/9e662bf2121548f79d5f

Bootstrap4でcanvasをレスポンシブ

メモ

cssファイル読み込むか,headあたりに<style>で以下を入れる

canvas {
  background-color: blue; 
  width: 100%;
  height: auto;
}

 

canvasを作成

<canvas id="canvas" width="300" height="300">
</canvas>

 

JS実行(jquery)

$( document ).ready(function() {

    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

});

 

 

参考

https://stackoverflow.com/questions/23973932/responsive-canvas-in-bootstrap-column/23974225

Swift2

HTMLのあれをとってくる

https://qiita.com/_tid_/items/8705275813e740d693ef

webView.evaluateJavaScript("document.documentElement.innerHTML") { value, error in
    print(value as? String as Any)
}

これはHTML全文になるので

 

webView.evaluateJavaScript("document.getElementById('tes').innerHTML") { value, error in
    print(value as? String as Any)
}

で,HTML内に

<p id="tes">2019</p>

いれておくと,

optinal(“2019”)と表示される.

 


IDをWKWebkitからとれなかったので,cookieから取る

まずPHPでcookieにuseridを設定

//cookie設定(Swift用)
$userid = $_SESSION["id"];
setcookie('userid', $userid,time()+60*60*24*7);
echo $_COOKIE[‘userid’];

 

Swiftでcookieを取得・ただしこれはiOS11用

        //セッション取得
        let cookieStore = webView.configuration.websiteDataStore.httpCookieStore

//        webView.configuration.websiteDataStore.httpCookieStore.getAllCookies {
//            print($0)//全部取る
//        }

                cookieStore.getAllCookies() { (cookies) in
            for cookie in cookies {
                if cookie.domain == "hoge.com" &&
                    cookie.name == "userid" {
                    // UserDefaultsに保存
                    let cookieData = NSKeyedArchiver.archivedData(withRootObject: cookie)
                    UserDefaults.standard.set(cookieData, forKey: "Cookie")
                    UserDefaults.standard.synchronize()
                    print(cookie.value)//これでuseridだけとれる
                }
            }
        }
        //

XCODEのコンソールに表示される

参考

https://qiita.com/haru15komekome/items/fdbdea6d755545468ac8


特定のURLで実行させたい(途中)

 

extension ViewController: WKNavigationDelegate {//の中に書く

// 読み込み開始後に実行
 func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
     //URLチェック
     //0.5秒後に実行する
     DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
         // 0.5秒後に実行したい処理
         
     }
 }

参考
https://swift.tecc0.com/?p=669

https://qiita.com/s_emoto/items/dc3d61626155f5cf83e7

これのまとめ

extension ViewController: WKNavigationDelegate {

の中にかきます

// 読み込み開始後に実行
   func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
       //URLチェック
       let currentUrl:URL? = webView.url
       let url = currentUrl?.absoluteString
       
       // 特定のURLで分岐処理
       if url!.contains("https://hoge.com") { //動的URLなのでcontain使用url!<-は
           
           //print("URLが含まれる")
           // 0.5秒後に実行したい処理
           DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
               
               //セッション取得
               let cookieStore = webView.configuration.websiteDataStore.httpCookieStore
               //        webView.configuration.websiteDataStore.httpCookieStore.getAllCookies {
               //            print($0)
               //        }
               cookieStore.getAllCookies() { (cookies) in
                   for cookie in cookies {
                       if cookie.domain == "life-log.org" &&
                           cookie.name == "userid" {
                           // UserDefaultsに保存
                           let cookieData = NSKeyedArchiver.archivedData(withRootObject: cookie)
                           UserDefaults.standard.set(cookieData, forKey: "Cookie")
                           UserDefaults.standard.synchronize()
                           print(cookie.value)//cookieのuseridをsessionに表示
                       }
                   }
               }
               ////セッションここまで
               
           }
       }
       
   }

 

containsの参考

https://qiita.com/osamu1203/items/3ee63291c37d91428b55

 


 

Clarifai使い方

2017年11月現在のClarifai使用方法

用意するもの

3つのファイルを用意してサーバにアップロードしてください

  • WEB表示用のHTMLファイル
  • 実行用のjsファイル
  • 解析用画像

このほかにCLIENTキーが必要とかなんとか,,(詳細はここ)これなしでも動いてるけど,,,

HTMLファイル

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Clarifaiサンプル</title>
  </head>
  <body>
    <h1>Clarifaiサンプル</h1>
<script type="text/javascript" src="https://sdk.clarifai.com/js/clarifai-latest.js"></script>
<script type="text/javascript" src="const.js"></script>


  </body>
</html>

 実行用のjsファイル

// instantiate a new Clarifai app passing in your api key.
const app = new Clarifai.App({
 apiKey: 'Your API KEY'
});

// predict the contents of an image by passing in a url
app.models.predict("e0be3b9d6a454f0493ac3a30784001ff",'YOUR IMAGE URL').then(
  function(response) {
    console.log(response);
  },
  function(err) {
    console.error(err);
  }
);

Your API KEYの部分には自分の作成したAPIキーを

YOUR IMAGE URLには自分のURLを

画像

画像を同じサーバに保存して実行

実行結果はWEBのコンソールに表示されます

Denim Jacket 91.7%

Peacoat 80.8%という結果が表示されています

このデータを自動的にWEBに表示するには

ObjectデータをJsonで解析する方法と,InnetHTMLあたりで実行できるかも

参考ページ

MonacaのCordvaバージョンについて

Cordvaのバージョンは4.1.1以降にしろとGoogleさんより警告.

でないとアプリを削除するよと.

Moancaでビルドしたとこcordva5.xだと20MB越えてとてもデータ容量に見合わないと,cordvaの古いバージョンで作成したため出たエラー.

まとめ

Cordva5系 何もしなくても18MBファイルサイズが増える

Cordva3.x ビルドサイズは小さいけど,Googleさんよりセキュリティエラーが出る 3.5MB

Cordva4.x ビルドサイズ小,セキュリティもクリアしているはず 3.7MB 0.2MBの増で収まった

なお、元データは274KB.オリジナルのスプラッシュスクリーンつけるととたんに数メガ増える,,

占いのようなスクリプト2

ちょっと加工して,CSSをつけるとこうなります.

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>uranai2</title>
      <link rel="stylesheet" type="text/css" href="uranai.css" />
  </head>
  <body>
  
 利き腕動物占い
 <div class="myselect">
<select name="hand_select" onChange="result(this.value)">
<option value="none" selected>利き腕を選んで</option>
<option value="right">右きき</option>
<option value="left">左きき</option>
</select>
</div>

<div class="spacer"><!—-></div>

<div id="type_" class="block"></div>
  
    <script type="text/javascript">
  
 var txt = 	{ //javascriptの配列を作りtxtに入れる
 	"none":{
		0:"利き腕を選んで",
		1:"利き腕を選んで",
		2:"利き腕を選んで"
	},
	"right":{
		0:"あなたは犬タイプです",
		1:"あなたは猫タイプです",
		2:"あなたは牛タイプです"
	},
	"left":{
		0:"あなたはタヌキタイプです",
		1:"あなたはキジタイプです",
		2:"あなたはキリンタイプです"
	},
 }
 
 
 function result(myvalue){//上のselectでonChangeで関数を呼びthis.valueに入ったvalue値がmyvalueに入る

	 var randnum = Math.floor( Math.random() * 3); //0〜2の乱数を発生させよ
 var mytxt = "" + txt[myvalue][randnum];//txt配列のmyvalueの乱数値randomで配列の中身を取り出し,ダブルクォーテーションをつけて,mytxtに入れる
document.getElementById("type_").innerHTML = mytxt;
	//html内のtype_というIDのついたタグを探し,mytxtの中身を入れなさい
}
 
 
  </script>
 </body>
</html>

CSSはこちら

@charset "UTF-8";

body    {  
    background-color: #f0f8ff;  
} 



.myselect select {
	position: relative;
	width: 90%;
	padding: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	background: #eee;
	background: -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background: linear-gradient(to bottom, #fff 0%,#efebe1 100%);
	    font-size: 1.4em;

    /* 文字の太さをboldに指定 */
    font-weight: bold;
}

.block {
	    font-size: 1.0em;
    color: #fff;
    background: #3cb371;
	width: 90%;
    padding: 10px;
    border: 2px dashed rgba(255,255,255,0.5);
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
}
.spacer {
    clear: both;
    width: auto;
    height: 10px;
    }

/* CSS Document */

実際の動作はこちら

http://filmm.info/liub/uranai2.html

占いのようなスクリプト

利き腕を選ぶと,占いの結果が表示されるものです.

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>array test3</title>
  </head>
  <body>
  
 利き腕動物占い
<select name="hand_select" onChange="result(this.value)">
<option value="area0" selected>利き腕を選んで</option>
<option value="right">右きき</option>
<option value="left">左きき</option>
</select>


<div id="type_"></div>
  
    <script type="text/javascript">
  
 var txt = 	{ //javascriptの配列を作りtxtに入れる
	"right":{
		0:"犬",
		1:"猫",
		2:"牛"
	},
	"left":{
		0:"タヌキ",
		1:"キジ",
		2:"キリン"
	},
 }
 
 
 function result(myvalue){//上のselectでonChangeで関数を呼びthis.valueに入ったvalue値がmyvalueに入る

	 var randnum = Math.floor( Math.random() * 3); //0〜2の乱数を発生させよ
 var mytxt = "" + txt[myvalue][randnum];//txt配列のmyvalueの乱数値randomで配列の中身を取り出し,ダブルクォーテーションをつけて,mytxtに入れる
document.getElementById("type_").innerHTML = mytxt;
	//html内のtype_というIDのついたタグを探し,mytxtの中身を入れなさい
}
 
 
  </script>
 </body>
</html>

実働例はこれです

http://filmm.info/liub/uranai.html

ボタンを押すとJavascriptを実行してHTMLを入れる

ボタンをクリックすると,jsを実行して,htmlに文字を入れるサンプルです

<!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>test4</title>
   <link rel="stylesheet" type="text/css" href="test4.css" />
  </head>
  <body>
  
<button type=button onclick="showtest1()">
1つめのボタン
</button> 

<div id="1st"></div>


<button type=button onclick="showtest2()">
2つめのボタン
</button> 
<div id="2nd"></div>
  
<script type="text/javascript">
 
 
 function showtest1(){
	var mytxt = "test1";
	document.getElementById("1st").innerHTML = mytxt;
	 
 }


function showtest2(){
	var mytxt2 = '<a href="http://nantoka.filmm.info/blog/">ひみつのページへ</a>';
	document.getElementById("2nd").innerHTML = mytxt2;
	
}
 
 
  </script>
 </body>
</html>

このボタンはcssでデザインしています

@charset "UTF-8";

body    {  
    background-color: #fff799;  
} 


button{
    /* 文字サイズを1.4emに指定 */
    font-size: 1.4em;

    /* 文字の太さをboldに指定 */
    font-weight: bold;

    /* 縦方向に10px、
     * 横方向に30pxの余白を指定 */
    padding: 10px 30px;

    /* 文字色を白色に指定 */
    color: #fff;

    /* ボーダーをなくす */
    border-style: none;

    /* ボタンの影の指定
     * 影の横幅を2px
     * 縦長を2px
     * ぼかしを3px
     * 広がりを1px
     * 色を#666(グレー)に指定 */
    box-shadow: 2px 2px 3px 1px #666;
    -moz-box-shadow: 2px 2px 3px 1px #666;
    -webkit-box-shadow: 2px 2px 3px 1px #666;

    /* テキストの影の指定
     * 影の横幅を1px
     * 縦長を1px
     * ぼかしを2px
     * 色を#000(黒)に指定 */
    text-shadow: 1px 1px 2px #000;

    /* グラデーションの指定 */
    background: -moz-linear-gradient(bottom, #36d, #248 50%, #36d);
    background: -webkit-gradient(linear, left bottom, left top, from(#36d), color-stop(0.5, #248), to(#36d));
}

button:hover {
    /* 透明度を20%に指定 */
    opacity: 0.8;
}
div {
    background-color:#ddeeff;
    margin:20px;
    padding:5px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    box-shadow:0px 0px 0px 6px #aedaf2;
    -moz-box-shadow:0px 0px 0px 6px #aedaf2;
    -webkit-box-shadow:0px 0px 0px 6px #aedaf2;
}

/* CSS Document */

 

実際の動作の様子

http://filmm.info/liub/test4.html

角度で色が変わる(加速度)

スマホの角度で色が変わります

<!DOCTYPE html>
<html>
<head>
<title>touch color</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで スマホの挙動を制限している -->
<meta http-equiv="Content-Style-Type" content="text/css">
<!--CSSで余白をゼロにしている -->
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>

<canvas id="myCanvas"></canvas>

<!-- ↓ここからJavascript -->
<script type="text/javascript">

//変数系を初期設定
var canvas;
var context;
var myHue;


window.onload = function() {//これ読み込み終わったら
syokika();//syokikaを実行してね
}

function syokika(){//これがsyokikaね
canvas = document.getElementById("myCanvas");//どのcanvasにするか指定
canvas.width = window.innerWidth;//幅は全幅ですよ
canvas.height = window.innerHeight;//高さもフルで
context = canvas.getContext("2d");//2次元仕様で

context.fillStyle = "rgb(0, 0, 0)";//塗る準備よ!色はRGBモデルで量はそれぞれ0,0,0ね
context.fillRect(0, 0, canvas.width, canvas.height);//はい,0,0(左上)から,全幅,全高で塗って!
}

var grX = 0;
var grY = 0;
window.addEventListener("devicemotion", function(evt){//これの反応をみててください,その反応がdevidemotionという種類であればその値をevtに入れなさい
grX = evt.accelerationIncludingGravity.x;  // evtのx軸の傾きを出してgrXに入れなさい
grY = evt.accelerationIncludingGravity.y;  // evtのY軸の傾きを出してgrXに入れなさい
//重力なので出力される値は-9.8~9.8(G)です

});


setInterval(mydraw, 100);//10msec毎に描いてね

function mydraw(){
    var myHue = (((grY + 9.8)/19.6)*180)*2;//横位値をスクリーン幅で割った値に360を掛けて色相つくりmyHueに入れる
    var myBri = ((grX + 9.8)/19.6)*100;//縦位置をスクリーン高で割った値に100を掛けてmyBriに明るさを入れる
    
    ///////---ここに描画する要素を書く
   // context.fillStyle = "hsl(" + myHue + ", 100%, 50% )"; //HSL値(色相、彩度、輝度)を指定
   context.fillStyle = "hsl(" + myHue + ", 100%, " + myBri + "% )"; //HSL値(色相、彩度、輝度)を指定
	context.beginPath();
  	context.arc(canvas.width/2, canvas.height/2, 150, 0, Math.PI*2, true);
	context.fill();
	}


</script><!-- ↑ここまでJavascript -->
</body>
</html>

サンプル−>http://filmm.info/touch/touchcolor6.html