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で絶対パスが指定できないイライラがこれで解消できました!
便利な命令ですので、ぜひ使っていきましょう。
参考資料
Processing: length? length()? size()?
はじめに
Processingで配列や文字列、ArrayListなどを使っているときにいつも「これって列の長さ出すのlengthだっけ? length()だっけ? size()だっけ?」悩んでしまいます。というわけで同じ悩みを持つ人がいると信じてここにまとめておきます。
環境設定(一応)
Processing3.2.1
length
lengthは配列の長さを求めるときに使います。
例
length()
length()は文字列の長さを求めるときに使います。
例
size()
size()はArrayListやJSONなどの長さを求めるときに使います。配列、文字列以外はsize()と覚えておくといいかもしれません。
例
最後に
lengthは配列、length()は文字列、それ以外はsize()
これを覚えておけばもう間違えることはありません!
それでも間違えそうになったらまたこの記事を参考にしていただければと思います。
ADB : Androidのタッチイベントを取得してみた
はじめに
スマートフォンでユーザがどこをタッチしたのかのログデータを取得したい人に朗報です。Android端末ならそれができます。それを実現するのが「ADBコマンド」です。
環境設定
準備
今回の記事ではADBコマンドを使います。ADBコマンドを導入する方法をざっくり言うと以下の通りです。
詳しくは「windowsでadbコマンドを使えるようにする方法」を参照してください。
ADBコマンド
今回扱うコマンドは以下の通りです。これをコマンドプロンプトに入力してください。
1. adb devices
PCに接続されてるデバイスが表示されます。
2. adb shell getevent
タップした座標やどれくらいの強さでタップしたかを取得し、そのデータをリアルタイムで返してくれる。
ちなみに何の結果が帰ってきているかは以下の表の通りです。
TouchContext: タッチ操作の挙動分析に基づく 人のコンテキスト認識 より引用
ちなみに「adb shell getevent -tl」で見やすい形でデータが帰ってきます。
3. adb shell getevent>hoge.txt
先ほどのコマンドに「>hode.txt」とつけると、今までコマンドプロンプトに表示されていたデータがhoge.txtに書き込まれます。そのときデータはコマンドプロンプトには表示されなくなります。
応用例
Processingという言語と組み合わせてタッチイベントの可視化を試みました。
参考資料
ProcessingからNode.jsにテキストデータを送る
はじめに
前回はProcessingがサーバー側でクライアント側のNode.jsがテキストメッセージを送ることを試みました。(前回の記事)今回は他の記事にもあるようなNode.jsからProcessingにテキストメッセージを送ることをnetモジュールを用いて行おうと思います。
コードを書く前に
前回と同じくclientフォルダーとserverフォルダーを作成しました。clientフォルダーには「client.pde」、serverフォルダーには「server.js」というファイルを生成しました。今回Node.js側ではnetモジュールを使用するので、serverフォルダーに「npm install net」でnetモジュールをインストールしましょう。
コードを書く
server.jsとclient.pdeのコードは以下の通りです。
server.js
client.pde
実行
まずはじめにserver.jsを「node server.js」で実行してから、client.pdeを起動させてください。コマンドプロンプトに「Hello world!」と表示されれば成功です。
引用元
naturalclar.com
Node.jsからProcessingにテキストメッセージを送る
はじめに
Node.jsとProcessingで変数やテキストメッセージを共有する記事は多々ありました。しかし、それらはNode.jsがサーバー側でクライアント側のProcessingがテキストメッセージを送るものでした。この記事はその逆で、Processingがサーバー側でクライアント側のNode.jsがテキストメッセージを送ることを試みました。
コードを書く前に
自分はclientフォルダーとserverフォルダーを作成しました。clientフォルダーには「client.js」、serverフォルダーには「server.pde」というファイルを生成しました。今回Node.js側ではnetモジュールを使用するので「npm install net」でnetモジュールをインストールしましょう。
コードを書く
client.jsとserver.pdeのコードは以下の通りです。
server.pde
client.js
実行
まずはじめにserver.pdeを実行してから、client.jsを起動させてください。下の画像のようにProcessingのコンソール画面に「Hello world!」と表示されれば成功です。
引用元
qiita.comnaturalclar.com
Node.js:Webmoを動かしてみた
はじめに
Webmoとは電子工作の知識がなくてもJavaScriptで制御できるモーターです。このWebmoはNode.js用のライブラリがあり、それを使ってNode.jsで制御することが可能です。
今回はNode.jsでのWebmoの制御の仕方をまとめました。
環境設定
- Node.js v6.11.0
- windows10
- コマンドプロンプト
- Webmo v0.1.3
Webmoの事前知識
WebmoはPCとwi-fi接続しないと制御することができません。wi-fi接続の方法を知らない方はWebmoの始め方を読んでから次に進んでください。
準備と実行
1.適当にフォルダーを作る
今回は「webmo」というフォルダーを作成しました。
2.コマンドプロンプトで以下のコマンドを実行
npm init -y
npm install webmo-client-nodejs --save
これで「webmo」フォルダーの中に「package.json」というファイルと、「node_modules」というフォルダーができているはずです。
3.index.jsファイルの作成
「webmo」フォルダーの中に「index.js」というファイルを作成してください。ここにWebmoを制御するコードを書きます。今回は「毎秒90度のスピードで回転して2秒後に止まる」コードを書きました。
例:毎秒90度のスピードで回転して2秒後に止まる
※注意
Webmoの始め方にもありますが、WebmoはBonjour を利用し、webmo.localへ接続しています。WindowsのPCにはBonjourが入っていないため、それをインストールするか、「new WebmoWs("webmo.local")」の「webmo.local」をIPアドレス「192.168.42.1」に変更してください。
4.PCをWebmoにwi-fi接続をする
何度も言いますが、WebmoはPCとwi-fi接続しないと制御することができません。実行前にPCとWebmoがwi-fi接続されているか確認してください。
5.実行
あとは実行コマンドを打つだけです。実行コマンドは以下の通りです。
node index.js
まとめ
こんな感じでWebmoはNode.jsで簡単に制御することができます。Webmo制御に使える関数一覧はこちらのサイトに載っています。皆さんもぜひWebmoを使ってみてはいかがでしょうか?
参考資料
Processing:日本語テキストに使えるフォントは何種類?
目次
- はじめに
- フォント指定のやり方
- 日本語に使えるフォント
- どんなフォントか見てみよう
- おわりに
はじめに
私が通う大学ではプログラミングの授業にProcessingという言語を使っています。授業課題において友達から「日本語テキストを表示したいけど表示できない」という相談をよく受けました。そういうときフォントが適切に指定していないことが原因である場合が多く、いろいろな人にそのことを説明してきました。すると、ときどきこう言ってくる人がいました。
「じゃあ、どのフォント使えばいいの?」
そうくるか……。私もどのフォントが日本語に適用できるか把握はしてなかったのでそのときは「自分はいつもこのフォントを使っている」と適当に返答してしてきました。しかし、このままでは相手に申し訳ないと思った私は、学校で配布されているPCと同じ環境設定(「Windows10 Home」デフォルト)において、日本語が使えるフォントが何種類あるか調べてきました。今回はその成果について述べていきたいと思います。
(注意:筆者はProcessing3.2.3を使用しました)
フォント指定のやり方
・PFontを使おう
Processingにおいてテキストを書いてみましょう。
//「A」が画面の真ん中に表示される
size(200, 200);//画面の大きさを設定
text("A", width/2, height/2);//text("文字",文字の左の座標,文字の下の座標)
(文字小さかったので他の写真より拡大しました……)
上記のプログラムではフォントを指定していません。フォントを指定するためには「PFont」クラスを使います。それでは「PFont」クラスを使ってみましょう。
//フォントが「Agency FB」である「A」が画面の真ん中に表示される
//あとでまた紹介するのでこのプログラムを「PFont1.pde」と名付けます
PFont font;
size(200, 200);
font=createFont("Agency FB", 30);//createFont("フォントの名前", フォントの大きさ)
textFont(font);//フォントを指定
text("A", width/2, height/2);
・フォントの種類
先ほど「PFont」クラスでフォントを作れると述べましたが、このときフォントの種類はいくつあるのか?
下記のコードを書いたプログラムを実行すれば分かります。
(https://processing.org/reference/PFont_list_.htmlより引用)
//フォントの種類を出力するプログラム
String[] fontList;//String型のArrayListを用意
fontList= PFont.list();//PFontに登録されているフォントを代入
printArray(fontList);//出力
//出力結果↓
//[0] "Agency FB"
//[1] "Agency FB Bold"
//(省略)
//[290] "MS P明朝"
なんと291種類ありました。
まさかここまで多いとは思ってませんでしたね……。しかも、Wordにないフォントもいくつか存在していたことも驚きました。
ちなみにフォント名の左隣にある番号は何かというとfontListに代入するのに使うものです。
どういうことかと言うと……。
String[] fontList;//String型のArrayListを用意
fontList= PFont.list();//PFontに登録されているフォントを代入
println(fontList[0]);
//出力結果↓
//Agency FB
つまり先ほど紹介した「PFont1.pde」を下記のように書き換えることができます。
//これの名前は「PFont2.pde」とします
PFont font;
String[] fontList;
fontList= PFont.list();
size(200, 200);
font=createFont(fontList[0], 30);
textFont(font);
text("A", width/2, height/2);
これからは「PFont1.pde」と「PFont2.pde」を使って紹介していきます。
日本語が使えるフォント
さて本題に入ります。先ほど「PFont」クラスには291種類ものフォントがありますが、中には日本語のテキストでは使えないものが多々あります。
「PFont1.pde」のテキストを「A」から「あ」に変えると下のようになってしまいます。
しかし、フォントを「Agency FB」を「MS P明朝」に変えるとしっかりと「あ」が表示されると思います。(「PFont2.pde」なら「0」を「290」に変える)
それではこのように日本語を表示できるフォントがいくつあるのか?
まとめてみました。
[番号]"フォントの名前"
[61]"Dialog.bold"
[62]"Dialog.bolditalic"
[63]"Dialog.italic"
[64]"Dialog.plain"
[65]"DialogInput.bold"
[66]"DialogInput.bolditalic"
[67]"DialogInput.italic"
[68]"DialogInput.plain"
[69]"Ebrima"
[85]"HGP創英角ゴシックUB"
[86]"HGP創英角ポップ体"
[87]"HGP創英プレゼンスEB"
[88]"HGP教科書体"
[89]"HGP明朝B"
[90]"HGP明朝E"
[91]"HGP行書体"
[92]"HGPゴシックE"
[93]"HGPゴシックM"
[94]"HGS創英角ゴシックUB"
[95]"HGS創英角ポップ体"
[96]"HGS創英プレゼンスEB"
[97]"HGS教科書体"
[98]"HGS明朝B"
[99]"HGS明朝E"
[100]"HGS行書体"
[101]"HGSゴシックE"
[102]"HGSゴシックM"
[103]"HG丸ゴシックM-PRO"
[104]"HG創英角ゴシックUB"
[105]"HG創英角ポップ体"
[106]"HG創英プレゼンスEB"
[107]"HG教科書体"
[108]"HG明朝B"
[109]"HG明朝E"
[110]"HG正楷書体-PRO"
[111]"HG行書体"
[112]"HGゴシックE"
[113]"HGゴシックM"
[134]"MS Gothic"
[135]"MS Mincho"
[137]"MS PGothic"
[138]"MS PMincho"
[141]"MS UI Gothic"
[144]"Malgun Gothic"
[146]"Malgun Gothic Semilight"
[148]"Meiryo UI"
[149]"Meiryo UI Bold"
[150]"Meiryo UI Bold Italic"
[151]"Meiryo UI Italic"
[153]"Microsoft JhengHei"
[154]"Microsoft JhengHei Bold"
[155]"Microsoft JhengHei Light"
[156]"Microsoft JhengHei UI"
[157]"Microsoft JhengHei UI Bold"
[158]"Microsoft JhengHei UI Light"
[166]"Microsoft YaHei"
[167]"Microsoft YaHei Bold"
[168]"Microsoft YaHei Light"
[169]"Microsoft YaHei UI"
[170]"Microsoft YaHei UI Bold"
[171]"Microsoft YaHei UI Light"
[177]"Monospaced.bold"
[178]"Monospaced.bolditalic"
[179]"Monospaced.italic"
[180]"Monospaced.plain"
[184]"Segoe UI Semilight Italic
[196]"SansSerif.bold"
[197]"SansSerif.bolditalic"
[198]"SansSerif.italic"
[199]"SansSerif.plain"
[220]"Serif.bold"
[221]"Serif.bolditalic"
[222]"Serif.italic"
[223]"Serif.plain"
[224]"SimSun"
[271]"Yu Gothic UI Bold"
[272]"Yu Gothic UI Light"
[273]"Yu Gothic UI Regular"
[274]"Yu Gothic UI Semibold"
[275]"Yu Gothic UI Semilight"
[276]"メイリオ"
[277]"メイリオ イタリック"
[278]"メイリオ ボールド"
[279]"メイリオ ボールド イタリック"
[280]"游ゴシック Bold"
[281]"游ゴシック Light"
[282]"游ゴシック Medium"
[283]"游ゴシック Regular"
[284]"游明朝 Demibold"
[285]"游明朝 Light"
[286]"游明朝 Regular"
[287]"MS ゴシック"
[288]"MS 明朝"
[289]"MS Pゴシック"
[290]"MS P明朝"
計94種類ありました。
全フォント数のだいたい1/3ですね。正直、似たようなフォント、全く同じフォントもありますので、事実上はもっと種類が少ないと思われます。それぞれ試してみて自分の好みにあったフォントを使ってみてください。
どんなフォントか見てみよう
「試してみてください」と言いましたが「94種類も試すなんて大変!」と思う方もいるでしょう。(ほとんどだと思いますが……)
そこでそれぞれのフォントがどのようなものなのかまとめてみました。
[61]"Dialog.bold"
[62]"Dialog.bolditalic"
[63]"Dialog.italic"
[64]"Dialog.plain"
[65]"DialogInput.bold"
[66]"DialogInput.bolditalic"
[67]"DialogInput.italic"
[68]"DialogInput.plain"
[85]"HGP創英角ゴシックUB"
[86]"HGP創英角ポップ体"
[87]"HGP創英プレゼンスEB"
[88]"HGP教科書体"
[89]"HGP明朝B"
[90]"HGP明朝E"
[91]"HGP行書体"
[92]"HGPゴシックE"
[93]"HGPゴシックM"
[94]"HGS創英角ゴシックUB"
[95]"HGS創英角ポップ体"
[96]"HGS創英プレゼンスEB"
[97]"HGS教科書体"
[98]"HGS明朝B"
[99]"HGS明朝E"
[100]"HGS行書体"
[101]"HGSゴシックE"
[102]"HGSゴシックM"
[103]"HG丸ゴシックM-PRO"
[104]"HG創英角ゴシックUB"
[105]"HG創英角ポップ体"
[106]"HG創英プレゼンスEB"
[107]"HG教科書体"
[108]"HG明朝B"
[109]"HG明朝E"
[110]"HG正楷書体-PRO"
[111]"HG行書体"
[112]"HGゴシックE"
[113]"HGゴシックM"
[134]"MS Gothic"
[135]"MS Mincho"
[137]"MS PGothic"
[138]"MS PMincho"
[141]"MS UI Gothic"
[144]"Malgun Gothic"
[146]"Malgun Gothic Semilight"(漢字は対応してないようです)
[148]"Meiryo UI"
[149]"Meiryo UI Bold"
[150]"Meiryo UI Bold Italic"
[151]"Meiryo UI Italic"
[153]"Microsoft JhengHei"
[154]"Microsoft JhengHei Bold"
[155]"Microsoft JhengHei Light"
[156]"Microsoft JhengHei UI"
[157]"Microsoft JhengHei UI Bold"
[158]"Microsoft JhengHei UI Light"
[166]"Microsoft YaHei"
[167]"Microsoft YaHei Bold"
[168]"Microsoft YaHei Light"
[169]"Microsoft YaHei UI"
[170]"Microsoft YaHei UI Bold"
[171]"Microsoft YaHei UI Light"
[177]"Monospaced.bold"
[178]"Monospaced.bolditalic"
[179]"Monospaced.italic"
[180]"Monospaced.plain"
[184]"Segoe UI Semilight Italic
[196]"SansSerif.bold"
[197]"SansSerif.bolditalic"
[198]"SansSerif.italic"
[199]"SansSerif.plain"
[220]"Serif.bold"
[221]"Serif.bolditalic"
[222]"Serif.italic"
[223]"Serif.plain"
[224]"SimSun"
[271]"Yu Gothic UI Bold"
[272]"Yu Gothic UI Light"
[273]"Yu Gothic UI Regular"
[274]"Yu Gothic UI Semibold"
[275]"Yu Gothic UI Semilight"
[276]"メイリオ"
[277]"メイリオ イタリック"
[278]"メイリオ ボールド"
[279]"メイリオ ボールド イタリック"
[280]"游ゴシック Bold"
[281]"游ゴシック Light"
[282]"游ゴシック Medium"
[283]"游ゴシック Regular"
[284]"游明朝 Demibold"
[285]"游明朝 Light"
[286]"游明朝 Regular"
[287]"MS ゴシック"
[288]"MS 明朝"
[289]"MS Pゴシック"
[290]"MS P明朝"
こう見ていると、だいたいフォント名がアルファベットのものはあまり違いがなく、日本語名のものはそれぞれの個性がでていますね。
おわりに
フォントがデザインにとって必要不可欠なのは私が言うまでもないことです。それなのに、Processingの記事には様々なグラフィックデザインを取り上げたものがあるのにも関わらず、フォントに関しての記事が少ないのは残念なように思いました。折角ある291種類のフォントを使わないことはもったいないことのように思われます。これを機にぜひフォントを活用してみてください。