アニヲタが作ったおもしろAPI集
はじめに
今回は(たぶん)アニメが好きな人たちが作ったであろうAPIを紹介します。
目次
API一覧
ShangriLa API
qiita.com 指定した年や春夏秋冬を指定するとそのときにやっていたアニメが何だったのか返してくれます。
きんモザAPI
idや何話目かを指定すると「きんいろモザイク」のアリスちゃんのgif画像が帰ってきます。
自分もこのAPIを使ったサービスを作ってみました!
シャロシコAPI
syaroshico.hinaloe.net 「シャロシコ」が含まれたツイート数をカウントしてくれます。
おわりに
後半二つはアニメキャラへの愛情が伝わってくるAPIでした(適当)。 こんなアニメキャラを元にしたWebAPIが増えてくると面白いWebサービスが作れそうですね。 皆さんもアニメに関連したAPIを作ってみてはどうでしょうか?
GIFMAGAZINE APIをJavaScript/Node.jsで叩いてみた
はじめに
プログラミングの授業で「Web APIを使ってWebサービスを作ろう」という課題が出たためいろいろとWeb APIを探していたときにこの「Gifmagazine-API」見つけました。ただリファレンスを読むとサンプルコードが書いていなかったためこの記事でJavaScriptとNode.jsでのサンプルコードを書きます。(JavaScriptにはjQueryライブラリを使いました)
GIFMAGAZINE APIとは?
サンプルコードの前に「GIFMAGAZINE API」とは何なのか説明します。 「GIFMAGAZINE」とはgif画像を投稿したり登校されたgif画像をダウンロードすることができるgif画像の投稿・共有サービスです。このAPIでは「GIFMAGAZINE」内のgif画像を検索することができます。 このAPIのおもしろいところは感情別でgif画像を検索できるところです。感情は標準化されたユニコード絵文字を元に対応しています。 また特徴として、id検索以外はAPIキーなしで利用できるところが挙げられます。ただしこの「GIFMAGAZINE」から提供されたデータを使用する際は以下のような決まりがあるの注意してください。(詳しくは http://api.gifmagazine.net/ )
URL:http://gifmagazine.net/ クレジット:http://sinkr.main.jp/api/brand_logo_kit.zip
サンプルコード
ここからはGifmagazine-API-Documentationに書かれているAPIの説明を引用しながら、それを参考に書いたサンプルコードを書いていきます。
JavaScriptの場合はjQueryを使用するのでhtmlの<head>
タグの中に次のタグを入れてください。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
文字検索
名前の通り文字で検索します。
パラメータ
- q(必須) : 検索したい単語
- limit : 返ってくる検索結果の件数。デフォルトは2件。最大2件。0~2以外の数値を指定した場合はデフォルト値が利用されます。
- offset : オフセット。デフォルトは0。最大0。
- safe : 0を指定するとR-18のgifを検索結果から除く。1を指定するとR-18のgifも含んだ検索結果を返す。デフォルトは0。
Request
var query = '猫'; var limit = 1; var offset = 0; var safe = 0; var URL = 'http://api.gifmagazine.net/v1/gifs/search?q=' + query + '&limit=' + limit + '&offset' + offset + '&safe=' + safe; $.getJSON(URL, function (response) { console.log(response); })
Node.js
const request = require('request'); var URL = 'http://api.gifmagazine.net/v1/gifs/search'; request.get({ url: URL, headers: {'Content-type': 'application/json'}, qs: { q:"猫", limit:2, offset:0, safe:0 }, json: true }, function(err, req, json){ console.log(json); });
Response
{ "data": [ { "id": 4003, "url": "http://gifmagazine.net/post_images/4003", "title": "いけー!", "description": "#cat #猫 cat 猫", "user_name": "berururunnnnnnn", "file_size": 2525252, "rate": "g", "image": { "default": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.gif", "width": 500, "height": 400 }, "medium": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.gif", "width": 300, "height": 240 }, "small": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/small.gif", "width": 140, "height": 112 } }, "video": { "default": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.mp4", "width": 500, "height": 400 }, "medium": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.mp4", "width": 300, "height": 240 } }, "tags": [ "猫" ] }, ], "pagination": { "total_count": 1, "count": 1, "offset": 0 } }
感情検索
感情を表した絵文字に対応する名前で検索します。
パラメータ
- q(必須) : 各種絵文字に対応するName(詳細は現在対応済みの絵文字を参照)
- limit : 返ってくる検索結果の件数。デフォルトは2件。最大2件。0~2以外の数値を指定した場合はデフォルト値が利用されます。
- offset : オフセット。デフォルトは0。最大0。
- safe : 0を指定するとR-18のgifを検索結果から除く。1を指定するとR-18のgifも含んだ検索結果を返す。デフォルトは0。
現在対応済みの絵文字(2017/12/03現在)
Emoji | Name |
---|---|
😁 | grin |
😂 | joy |
😃 | smiley |
😄 | smile |
😅 | sweat_smile |
😆 | satisfied |
😉 | wink |
😊 | blush |
😋 | yum |
😌 | relieved |
😍 | heart_eyes |
😏 | smirk |
😒 | unamused |
😓 | sweat |
😔 | pensive |
😖 | confounded |
😘 | kissing_heart |
😚 | kissing_closed_eyes |
😜 | stuck_out_tongue_winking_eye |
😝 | stuck_out_tongue_closed_eyes |
😞 | disappointed |
😠 | angry |
😡 | rage |
😢 | cry |
😣 | persevere |
😤 | triumph |
😥 | disappointed_relieved |
😨 | fearful |
😩 | weary |
😪 | sleepy |
😫 | tired_face |
😭 | sob |
😰 | cold_sweat |
😱 | scream |
😲 | astonished |
😳 | flushed |
😵 | dizzy_face |
😷 | mask |
Request
var query = 'yum'; var limit = 1; var offset = 0; var safe = 0; var URL = 'http://api.gifmagazine.net/v1/gifs/emotion?q=' + query + '&limit=' + limit + '&offset' + offset + '&safe=' + safe; $.getJSON(URL, function (response) { console.log(response); })
Node.js
const request = require('request'); var URL = 'http://api.gifmagazine.net/v1/gifs/emotion'; request.get({ url: URL, headers: {'Content-type': 'application/json'}, qs: { q:"yum", limit:1, offset:0, safe:0 }, json: true }, function(err, req, json){ console.log(json);//返ってきたjson });
Response
{ "data": [ { "id": 727127, "url": "http://gifmagazine.net/post_images/727127", "title": "face savouring delicious food[9-6]", "description": "face savouring delicious food[9-6]", "user_name": "Mr.emotion", "file_size": 1191679, "rate": "g", "image": { "default": { "url": "http://img.gifmagazine.net/gifmagazine/images/727127/original.gif", "width": 393, "height": 200 }, "medium": { "url": "http://img.gifmagazine.net/gifmagazine/images/727127/medium.gif", "width": 300, "height": 153 }, "small": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/small.gif", "width": 140, "height": 112 } }, "video": { "default": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.mp4", "width": 500, "height": 400 }, "medium": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.mp4", "width": 300, "height": 240 } }, "tags": [ "猫" ] }, ], "pagination": { "total_count": 10, "count": 2, "offset": 0 } }
pickup , topic , jumble
pickup : Pickup Gifに選ばれた投稿の新着フィードを返す topic : 今web上で話題のGIFの新着フィードを返す jumble : pickupとtopicを混ぜたgifのフィードを返す
パラメータ
- limit : 返ってくる検索結果の件数。デフォルトは2件。最大2件。0~2以外の数値を指定した場合はデフォルト値が利用されます。
- offset : オフセット。デフォルトは0。最大0。
Request
var feed = 'pickup';//topic , jumble var limit = 1; var offset = 0; var safe = 0; var URL = 'http://api.gifmagazine.net/v1/feeds/' + feed + '?limit=' + limit + '&offset' + offset + '&safe=' + safe; $.getJSON(URL, function (response) { console.log(response); })
Node.js
const request = require('request'); var URL = 'http://api.gifmagazine.net/v1/feeds/'; var feed = 'pickup';//topic , jumble request.get({ url: URL + feed, headers: {'Content-type': 'application/json'}, qs: { limit:1, offset:0, safe:0 }, json: true }, function(err, req, json){ console.log(json); });
Response
pickup
{ "data": [ { "id": 4003, "url": "http://gifmagazine.net/post_images/4003", "title": "いけー!", "description": "#cat #猫 cat 猫", "user_name": "berururunnnnnnn", "file_size": 2525252, "rate": "g", "image": { "default": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.gif", "width": 500, "height": 400 }, "medium": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.gif", "width": 300, "height": 240 }, "small": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/small.gif", "width": 140, "height": 112 } }, "video": { "default": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.mp4", "width": 500, "height": 400 }, "medium": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.mp4", "width": 300, "height": 240 } }, "tags": [ "猫" ] } ], "pagination": { "total_count": 1, "count": 1, "offset": 0 } }
topic
{ "data": [ { "id": 4003, "url": "http://gifmagazine.net/post_images/4003", "title": "いけー!", "description": "#cat #猫 cat 猫", "user_name": "berururunnnnnnn", "file_size": 2525252, "rate": "g", "image": { "default": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.gif", "width": 500, "height": 400 }, "medium": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.gif", "width": 300, "height": 240 }, "small": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/small.gif", "width": 140, "height": 112 } }, "video": { "default": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.mp4", "width": 500, "height": 400 }, "medium": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.mp4", "width": 300, "height": 240 } }, "tags": [ "猫" ] }, ], "pagination": { "total_count": 1, "count": 1, "offset": 0 } }
jumble
{ "data": [ { "id": 4003, "url": "http://gifmagazine.net/post_images/4003", "title": "いけー!", "description": "#cat #猫 cat 猫", "user_name": "berururunnnnnnn", "file_size": 2525252, "rate": "g", "image": { "default": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.gif", "width": 500, "height": 400 }, "medium": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.gif", "width": 300, "height": 240 }, "small": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/small.gif", "width": 140, "height": 112 } }, "video": { "default": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/original.mp4", "width": 500, "height": 400 }, "medium": { "url": "http://img.gifmagazine.net/gifmagazine/images/4003/medium.mp4", "width": 300, "height": 240 } }, "tags": [ "猫" ] }, ], "pagination": { "total_count": 1, "count": 1, "offset": 0 } }
id検索
idで指定されたgifの詳細情報を返す。
パラメータ
- [必須]token : 専用トークンを指定する
Request
const YOUR_TOKEN = 'ここに専用トークンを書く'; var GIF_ID = 1;//gif画像のID var URL = 'http://api.gifmagazine.net/v1/detail_gifs/' + GIF_ID + '?token=' + YOUR_TOKEN ; $.getJSON(URL, function (response) { console.log(response); })
Node.js
const request = require('request'); const YOUR_TOKEN = 'ここに専用トークンを書く'; var URL = 'http://api.gifmagazine.net/v1/detail_gifs/'; var GIF_ID = 1;//gif画像のID request.get({ url: URL + GIF_ID , headers: {'Content-type': 'application/json'}, qs: { token:YOUR_TOKEN }, json: true }, function(err, req, json){ console.log(json); });
Response
{ "data": { "gif": { "id": 100000, "url": "https://gifmagazine.net/post_images/100000", "title": "かっこいいアウディが華麗に存在感を放っているGIF画像", "description": "[元動画] https://www.youtube.com/watch?v=_kPFr8H-o5g", "user_name": "gif_research61", "file_size": 2751967, "rate": "g", "image": { "default": { "url": "https://img.gifmagazine.net/gifmagazine/images/100000/original.gif", "width": 420, "height": 236 }, "medium": { "url": "https://img.gifmagazine.net/gifmagazine/images/100000/medium.gif", "width": 300, "height": 169 }, "small": { "url": "https://media.gifmagazine.net/rszgif/wiI-PfLjd7ltYD4Ric90Lj-EmMQ=/420/236/140/140/100000/", "width": 140, "height": 79 }, "medium_thumb": { "url": "https://img.gifmagazine.net/gifmagazine/images/100000/medium_thumb.png", "width": 300, "height": 169 }, "thumb": { "url": "https://img.gifmagazine.net/gifmagazine/images/100000/thumb.png", "width": 100, "height": 100 } }, "video": { "default": { "url": "https://img.gifmagazine.net/gifmagazine/images/100000/original.mp4", "width": 420, "height": 236 }, "medium": { "url": "https://img.gifmagazine.net/gifmagazine/images/100000/medium.mp4", "width": 300, "height": 169 } }, "tags": [ "from youtube", "車", "かっこいい", "普通車", "高級車", "アウディ" ] }, "related_gifs": [ { "id": 100023, "url": "https://gifmagazine.net/post_images/100023", "title": "かっこいいアウディが華麗に存在感を放っているGIF画像", "description": "[元動画] https://www.youtube.com/watch?v=qZVtnv3DeBI", "user_name": "gif_research61", "file_size": 3076909, "rate": "g", "image": { "default": { "url": "https://img.gifmagazine.net/gifmagazine/images/100023/original.gif", "width": 420, "height": 236 }, "medium": { "url": "https://img.gifmagazine.net/gifmagazine/images/100023/medium.gif", "width": 300, "height": 169 }, "small": { "url": "https://media.gifmagazine.net/rszgif/9XAWF4YNw99aR1XS_BffXhYDrzQ=/420/236/140/140/100023/", "width": 140, "height": 79 }, "medium_thumb": { "url": "https://img.gifmagazine.net/gifmagazine/images/100023/medium_thumb.png", "width": 300, "height": 169 }, "thumb": { "url": "https://img.gifmagazine.net/gifmagazine/images/100023/thumb.png", "width": 100, "height": 100 } }, "video": { "default": { "url": "https://img.gifmagazine.net/gifmagazine/images/100023/original.mp4", "width": 420, "height": 236 }, "medium": { "url": "https://img.gifmagazine.net/gifmagazine/images/100023/medium.mp4", "width": 300, "height": 169 } }, "tags": [ "from youtube", "車", "かっこいい", "普通車", "高級車", "アウディ" ] }, ] }, "pagination": { "total_count": 1, "count": 1, "offset": 0 } }
参考資料
Android×Processing:adb input touchscreen編
はじめに
この記事ではProcessingを使ってAndroid端末を操作しようと思います。
環境設定
'input touchscreen'
タッチや直線のスワイプといった単純な操作にはinput touchscreen
を使います
タッチの場合
adb shell input touchscreen tap x y
- 画面上の座標の(x,y)にタップする命令
- xとyは10進数
スワイプの場合
adb shell input touchscreen swipe x1 y1 x2 y2 t
- (x1,y1)から(x2,y2)までをスワイプする命令
t
はミリ秒
Processingとの連帯
今回使う命令
launch()
- コマンドを打つ命令(Macでも使用可能)
- 詳しくはProcessing:コマンドプロンプトを開いてみた - ZawaWorks’s diaryをご覧ください
例:adb shell input touchscreen tap x y
String [] AdbTap = {"adb","shell","input","touchscreen","tap",str(x),str(y)};//xとyはString型に変換 launch(AdbTap);
input tap
の場合
コード
String [] AdbTap = {"adb", "shell", "input", "touchscreen", "tap", "", ""}; void setup() { size(360, 640);//Xperoa XZの解像度は 1080 x 1920 background(0, 0, 255); } void draw() { if (!mousePressed) return; fill(-1); ellipse(mouseX, mouseY, 15, 15); AdbTap[5] = str(mouseX*3); AdbTap[6] = str(mouseY*3); launch(AdbTap); }
デモ
input Swipe
の場合
コード
ArrayList<PVector>vector = new ArrayList(); Boolean launch_able = true; int time = 100; void setup() { size(360, 640); background(0, 0, 255); } void draw() { background(0, 0, 255); for (int i=0; i<vector.size(); i++) { PVector v = vector.get(i); fill(-1); ellipse(v.x, v.y, 20, 20); } if (vector.size() != 2) return; PVector v1 = vector.get(0); PVector v2 = vector.get(1); stroke(-1); line(v1.x, v1.y, v2.x, v2.y); if (!launch_able)return; launch("adb shell input touchscreen swipe"+" "+ v1.x+" "+ v1.y+" "+v2.x+" "+v2.y+" "+time); launch_able = false; } void mousePressed() { if (vector.size()%2 == 0) { vector = new ArrayList(); launch_able = true; } vector.add(new PVector(mouseX, mouseY)); }
デモ
youtu.be
- t = 100
のときとt = 50
のときを比較
GitHub
参考資料
Android×Processing:adb getevent編
はじめに
前に紹介したadbコマンドをProcessingと組み合わせてみました。この記事ではAndroid端末のタッチイベントをProcessingを使ってリアルタイムでアニメーションします。
環境設定
- Processing3.3.6
- Xperia XZ
- Windows10
おさらい
adbのgeteventコマンドが分からない方は前の記事を読んでから次へ進んでください。
実装方法
今回使うコマンドはadb shell getevent -lt
です。これで得たログデータをテキストファイルに書き込み、それをProcessingで読み込みます。
用意するディレクトリ
AdbGetevent
フォルダーAdbGetevent.pde
data
フォルダーpos.txt
AdbGetevent.pde
void setup() { size(360, 640); //テキストファイルを空に PrintWriter output; output = createWriter("data/pos.txt"); output.close(); } void draw() { background(0, 0, 255); //テキストファイルを読み込む String []lines = loadStrings("data/pos.txt"); float posX = 0; float posY = 0; for (int i=0; i<lines.length; i++) { int getx_point = lines[i].indexOf("ABS_MT_POSITION_X "); int gety_point = lines[i].indexOf("ABS_MT_POSITION_Y "); if (getx_point != -1) { String result = lines[i].substring(getx_point+21, getx_point+29); posX = unhex(result) / 3.0;//Processingの画面に合わせる continue; } if (gety_point != -1) { String result=lines[i].substring(gety_point+21, gety_point+29); posY = unhex(result)/3.0;//Processingの画面に合わせる noStroke(); fill(-1); ellipse(posX, posY, 10, 10); } } }
使い方
デモ
- 使用したアプリ
GitHub
Processing:コマンドプロンプトを開いてみた
はじめに
今回はProcessingでコマンドプロンプトを開くことを試みました。今回見つけた方法をそれまでの失敗を含めて紹介していきたいと思います。
環境設定
- Windows10
- Processing 3.2.1
launch()を使ってみる
launch()
はProcessingからファイルを実行できる命令です。
たとえば
void setup(){ launch("notepad.exe"); }
というコードを実行すればメモ帳が開かれます。これの応用でlaunch("cmd.exe")
と書き直して実行しました。
しかし動かない!
ここで躓いた僕はいろいろと原因を探してみました。
絶対パスが原因?
このサイトを見ると、絶対パスにしたことで解決した例がありました。それを参考にlaunch("C:\\Windows\\System32\\cmd.exe")
と入力してみました。
しかし動かない!
リファレンスを読んでみた
ここで諦めそうになった僕ですが、リファレンスを読み返してみました。するとこんな一文が……。
This function behaves differently on each platform. On Windows, the parameters are sent to the Windows shell via "cmd /c".
どうやらlaunch()
に書いた文字列をコマンドプロンプトに送って実行してるようです。コマンドプロンプトでcmd.exe
を開くときstart cmd.exe
と打つので試しに以下のようなコードを書きました。
void setup(){ launch("start cmd.exe"); }
これを実行すると……。
動いた!!!
当初の目的通り、Processingでコマンドプロンプトを開くことに成功しました!
ついでに
これで目的は達成しましたが、ついでに開いたコマンドプロンプトが実行したpdeファイルの入ったディレクトリに行くようにする方法も見つけました。これはバッチファイルというものを使います。バッチファイルはコマンドプロンプトで実行する命令をまとめたテキストファイルです。これに指定したディレクトリをたどり着き、かつ、コマンドプロンプトを実行するという命令を書き込みます。それをlaunch()
で実行します。
コード
void setup() { PrintWriter output = createWriter("data/test.bat");//test.batを空にして書き込みを開始! output.println("cd"+" "+sketchPath()); output.println("start cmd.exe"); output.flush(); output.close();//書き込み終了! launch(dataPath("test.bat")); }
実行の様子
(sketchPath()
やdataPath()
が分からない人はこちらを参考にしてください)
最後に
ただ開くだけだとlaunch("start cmd.exe")
でいいですがバッチファイルを使った方が汎用性があるように感じました。Windowsユーザの皆さんは試してみると良いかもしれません。
参考・参照サイト
JavaScript:コード画像をテキストファイルに変換する
はじめに
僕が通っている大学ではCMP実習という授業があり、そこでHTMLやCSS、JavaScriptを教えてもらいます。その課題で「JavaScriptのライブラリを使ったプログラムを作ってきてね」と言われたので僕はTESSERACT.jsという文字認識ライブラリを使いコード画像をテキストファイルに変えるWebサービス「ImageCode」を作りました。今回はそれを作った背景とコードについて解説していきたいと思います。
ImageCodeを作った理由
以前、プログラミングの記事を読んでいて「使いたい!」と思ったコードがありました。しかし、それをコピペすることができませんでした。なんとそのコード、画像ファイルだったんです。たぶんテキストエディタに書いたコードをスクショして貼り付けたのだと思います。仕方なく僕はそのコードを画像のまま写すことに……。
そうやって画像のコードを写すのは億劫でした。そこで僕は「コードの画像をそのままテキストファイルにすればいいのでは?」と考えてImageCodeを作りました。
環境設定
TESSERACT.js
画像に書いてある文章を文字認識してくれるライブラリです。現在、英語、中国語、ロシア語に対応しています。今回はプログラミングコードを文字認識するため、英語の文字認識を使います。ブラウザで使うときはHTMLに下記のURLをscriptタグに入れればOKです。
GitHubに上がっているサンプルは下記の通りです。
このmyImageに画像URLを入力するとresultに文字を抽出した結果がJSON形式で返されます。progressは現在の進行状況を教えてくれます。今回は使わないので省きました。
画像ファイルを選択して表示させる
mementoo.info 上の記事を参考に自分のPCのフォルダーから画像を選択し、描画と画像情報の取得するコードを作りました。
HTML側
JavaScript側
textareaの文字をテキストファイルとして保存
文字認識で取得したコードはtextareaに設定し、保存ボタンを押したらそれをテキストファイル化しダウンロードするようにします。
oshiete1.nifty.com textareaの文字列のテキストファイル化は上の記事を参考にしました。変更点は三つあります。まず今回は僕が親しんでいるpdeファイル(Processingのファイル)にしたいため「text/plain」を「application/processing」に、「.txt」を「.pde」に変えています。もう一つの変更点はデフォルトのファイル名を「myText」から「sketch」にしていますが、これは単純に好みです。
コードは以下の通りになります。
HTML側
JavaScript側
最終コード
さてこれらのコードを組み合わせていきます! ついでにCSSも書きました。
index.html
imgタグにはデフォルトで「画像をアップロード」と書かれた画像を挿入しています。
main.js
style.css
GitHub
完成図
こちらのリンクからデモを体験できます。(ImageCode)僕は下の画像を使ってコード生成をしました。(ライブラリの性能的に誤字が発生するのでなるべく発生しないように工夫した画像ですので、)下の画像で試すのを推奨します。
推奨画像
最後に
生のJavaScriptに触れたことがあまりなく、授業で習ったばかりでHTMLやCSSの書き方もおぼつかないところがあると思いますが、なんとか完成させることができました。
今回はpdeファイル限定ですが、今後は他のファイルでも対応させたり、文字認識の性能を上げていきたいと思います。
Processing:絶対パスを返してくれるsketchPath()
はじめに
ProcessingでTwitter botに画像をツイートさせようとしたら、「画像の相対パスではなく絶対パスを送ってくれないとダメです!」と言われてしまいました。そのときはその画像があるフォルダーまで「C:\Users\Documents\・・・\image.png」と書いきましたが、毎回これをやるのはだるいですよね。それで今回はその問題を解決してくれる「sketchPath()」と「dataPath()」について紹介しようと思います。
sketchPath()とdataPath()
百聞は一見に如かず、まずは下のコードと出力データをご覧ください。
なんとなくわかった方もいると思いますが、詳しく説明していきます。
フォルダやファイルの構成
フォルダとファイルは下のような構成になっています。
sketchPath()
sketchPath()は実行するpdeファイルが入っているフォルダーの絶対パスを返してくれる命令です。今回の場合は「C:\Users\Documents\path_search」を返してくれます。
またそのフォルダー内のフォルダやファイルを参照するときは「sketchPath("image1.png")」や「sketchPath("data/image2.png")」と書きます。
まとめるとこんな感じです。
dataPath()
次にdataPath()についてです。dataPath()は実行するpdeファイルと同じフォルダーの中にあるdataフォルダー絶対パスを返してくれます。今回の場合は「C:\Users\Documents\path_search\data」を返してくれます。
つまり、先ほどの 「sketchPath("data/image2.png")」は「dataPath("image2.png")」と書き換えることが可能です。
ここで注意なのですがsketchPath()の場合は「sketchPath()」と書くだけで絶対パスを返してくれましたが、dataPath()の場合はカッコの中にString型を入れなければいけません。「C:\Users\Documents\path_search\data」と返してほしいときは「dataPath("")」と書きしょう。
まとめるとこんな感じです。
おわりに
今までProcessingで絶対パスが指定できないイライラがこれで解消できました!
便利な命令ですので、ぜひ使っていきましょう。
参考資料