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種類のフォントを使わないことはもったいないことのように思われます。これを機にぜひフォントを活用してみてください。
先端メディアサイエンス学科に入学する方々へ
目次
- はじめに
- 友達の作り方
- プログラミングできない方へ
- Twitter上の注意
- おわりに
はじめに
新入生の皆さんご入学おめでとうございます。この記事は明治大学総合数理学部先端メディアサイエンス学科(通称:FMS)に入学される方向けの記事です。
大学生活は、今までの高校生活とは一線を画し、さらにFMSは他の大学とも異なった環境であるため入学後の自分を想像することは難しいと思います。
そこでこの記事では、新入生の皆さんが気になっていそうな事柄や伝えておくべきと考えた事柄を説明したいと思います。あくまで個人の考えですので、よろしくお願いします。
友達の作り方
新一年生の皆さんが一番気になっているのが「友達ができるかどうか」という問題だと思います。友達を作るためにはまず認知されることが重要です。ここではFMS内でどうやったら他の人に認知されるかを紹介したいと思います。
Twitterの活用
三月になるとその不安を和らげようとTwitterの大学用アカウントを作り、同じ大学・学部に受かった人をフォローする方が現れます。そういう人達が、だいたい入学式前の大学説明会で顔を合わせ、友達を作っていくことが多いです。
Twitter以外の方法
なら、Twitterをやってない、または、Twitterでも友達を作れなかった人は、入学後に友達を作れないのか? そんなことはありません。私がTwitterを初めたのは入学して三か月後でしたが、それより前に大学で友達を作ることはできました。
というのもFMSには友達を作る機会が多々あるからです。
どんなイベントがあるのか、その内容と合わせて紹介したいと思います。
・入学説明会
入学式前に入学説明会があり、一年生はその日、大学に行かなければなりません。そこで先生方の紹介や入学後の注意などを聞きます。この場でコミュニケーション能力のある人は友達を作ります。(ちなみに私は作れませんでした……)
・研究室
FMSは一年生から研究室に入れるという特殊な環境です。一年生はどの研究室に入るかランダムで決められ、決まった研究室で一年生同士の顔合わせ・自己紹介をします。
(私はここで入学後初めての友達を作りました)
・一年生の懇親会
五月に一年生の懇親会があります。そこでは無料で食事を食べながら今まで関わったことのない一年生と関わることができます。友達を作りたいのは皆一緒です。声をかけられることもありますので、是非、仲良くしましょう。
・プログラミング発表会
これもFMSならではのイベントです。皆さんは四月から五月初めまでプログラミングの授業(言語はHSP)を受け、五月の半ばにプログラムを作り、発表します。
私は、入学してからFMSがプログラミングを使うことを知り、パソコンを右手の人差し指でしか使ったことがなかったので、頭上に雷が落ちたような衝撃を受けました……。
その発表で相手に強い印象を与えれば「〇〇を発表した人」と認知され、後々の自己紹介で使えます。私はそれまでFMS内で誰にも認識されていませんでしたが、その発表会で(悪い意味で)名の知れる存在になりました。しかし、そのおかげで友達が作りやすくなったのは事実です。(まさに等価交換の原則……)
では、具体的にどのようなことをやると周りに認知されるか紹介しましょう。
①難しいプログラムを作る
一か月もプログラムを組んでいると、素人の私でもその難しさが分かってきます。だから、他の人に「こんなの自分じゃ絶対作れない!」と思わせるようなプログラムを発表すれば「〇〇はプログラミングができるんだ!」と認知されます。
私の友達は3Dモデルを作ると3Dプリンターで出力するプログラムを作り皆を驚かしました。(ちなみに彼が作った3Dモデルは消しゴムでした)
②興味深いプログラムを作る
皆をプログラミング力で驚かす自信のない人も安心してください。簡単なプログラミングでも他の人を驚かせる方法はあります。それはアイデアが興味深いときです。例えば私の学年に音ゲーと防衛ゲームを組み合わせたゲームを発表した人がいました。(説明が難しいので詳しくは下のリンクをご覧ください)
そういったプログラミング(今回はゲーム)を作れば「触ってみたい!」、「面白い発想をする人だな!」と好印象を持たれます。
このように様々な場面で友達を作るきっかけがありますので、余程のことがない限り、友達を作ることはできます。
プログラミングができない方へ
この記事を読んでいる方で「プログラミングができない」、「プログラミングなんてやったことない」という方はいると思います。前にも述べたように私は入学後にプログラミングの授業があることを知りましたし、今までパソコンをYouTubeのためにしか使ってきませんでした。
そんな私でもプログラミングの授業の成績は全部S(最高成績)でした。どうして自分がそうなれたのかをここでは説明していきたいと思います。
・授業の予習・復習をしていたから
こんな言葉、受験生のときに耳が痛くなるくらい聞きましたね……。春学期のプログラミングの授業では基礎的なことを教えてもらいます。春学期前半はHSP、春学期後半はProcessingという言語を使った授業を受けます。
過去出された課題は授業サイトに記載されているので是非予習してください。また前回の授業が分からないと次の授業も理解できないので、復習もきちんとしてください。
・プログラミングが得意な友達や先輩に教えてもらったから
プログラミングを始めたうちは友達や先輩に教えてもらったほうが早いです。先ほど述べた予習では分からないことが多いと思います(当たり前ですよね)。だから、分からないことがあったら、友達や先輩に遠慮なく質問してください。FMSは優しい先輩方が多いので、質問したら優しく教えてもらえます(経験談)。私はHSPの授業を受けていたころ、ずっと研究室に籠って分からないことは先輩に聞いていました。折角、研究室に入っているからこそ、活用するのが良いでしょう。
・自主的にプログラミングに触る
「授業だから……」、「課題があるから……」と受け身でプログラミングを触る方がいますが、それだけではプログラミング能力は向上しません。FMSでプログラミングが得意な人は自主的にプログラミングを組んでいます。彼らには「こんなゲームが作ってみたい!」、「こんなツールを作ってみたい!」というモチベーションがあり、それを実現するためにネットで調べて学習して彼らはみるみるとプログラミング能力を向上させていきました。「プログラミングが上手くなりたい!」、「プログラミングの授業でもいい成績を取りたい!」という方は、自主的にプログラムを組むことをオススメします。
FMSのプログラミングの授業は分かりやすく、考え抜かれた内容ですので、きちんと授業を聞いていればプログラミングをできるようになります。
だから、新入生の皆さんは安心してください。
(ただし上達には+αが必要であることも忘れずに)
Twitter上の注意
FMSではTwitterを推奨しています。授業中にPCを開いてもいい授業があり、そこで多くの人はTwitterで授業のコメントをします。そんなFMSに身近なTwitterでの注意をここでは述べたいと思います。
・ツイートが大学側の目に入ることもある
Twitterでツイートする内容は鍵がついていない限り、誰かしらの目に入ります。つまり大学関係者にも見られる可能性があるということです。ツイートする際は不適切な内容が入っていないか注意しましょう。
・先輩からフォローは来ない
よくプロフィールで「明治大学の人は是非フォローしてください」と書いてある人を見かけますが、ほとんどの場合、先輩からフォローは来ません。先輩方はあなたの知らないFMSの情報を持っているので、仲良くするに越したことはありません。先輩と仲良くなりたいと思ってる人は、きちんと先輩を選んでフォローしましょう。
・B1、B2って何?
先輩方のプロフィールに「B1」、「B2」などが書いてあると思います。これは学年を意味します。ここでの「B」は「bachelor(学士)」の略です。つまり「B1」は「大学一年生」を意味します。FMSでは(特にSNSにおいて)あまり「〇年生」といった呼び方はしません。ですので、プロフィールに書いてある「B〇」で何年生なのか確認しましょう。
・アカウントは二つ用意しておくのがオススメ
アカウントは二つ用意しておくのがオススメです。片方は授業用、もう片方は鍵をかけたものです。たまに鍵のかけていないアカウントで不適切な言葉をツイート(大学や授業の愚痴など)している方を見かけます。そういった不適切なツイートをしてしまう方は鍵垢を持っていた方がいいです。
おわりに
ここまで長々と語ってきましたが、最後にこれだけは言わせてください。
大学は新たなスタートです。ゴールではありません。
FMSは特殊かつ恵まれた環境です。その環境を活かすかどうかはあなた次第です。
あなたの四年間が大切な時間になることを祈ります。