だらっと学習帳

Processingとか p5.jsとか 好きです

カテゴリ: プログラミング

「スーパー正男」というブラウザゲームをご存知でしょうか。
面白FLASH倉庫的なムーブメントとほぼ同時(?)くらいに流行っていたブラウザゲームです。
マリO的な見た目と操作感、ステージデータをさくっと作成できるお気軽さ(マリOメーカーですね!)でかつてのインターネットを牽引する存在でした。
作者様のページはこちら。
福田直人のホームページ
細かい歴史など、詳細はこちらがわかりやすかったです。
スーパー正男とは (スーパーマサオとは) [単語記事] - ニコニコ大百科

もう平成も終わりますし、せっかくなのでJoy-Con対応させてみました。
ゲーム自体はこちらからダウンロードしました(いわゆるJSまさお、Canvas正男)。
JSまさお置き場
ゲームステージはプレーンな1番最初のステージを利用しました。なつかし〜!
まさお コンストラクション サンプルゲーム


スティック左右入力で左右移動、Xボタンでジャンプ、HOMEボタンでタイトルに戻ります。
もちろんダッシュからの大ジャンプも可能!

コード載せておきます。
ゲームのhtmlで読み込めばきっとJoy-Con対応できるはず。
やっていることはJoy-Conのボタン・スティック操作をキーボード操作に振り替えています。
まだR側Joy-Conしか対応できてないのでコードが微妙ですが…
2人プレイ可能な「正男ブラザーズ」もいつかJoy-Con対応して"おすそわけプレイ"ができるようにしたいですね :)

これで次の令和も楽しく遊べますね!

参考 :
Adding Nintendo Joycon Support to Your Website with the Gamepad API
p5.jsでPS4とSwitchのコントローラ(Joy-Con)を接続してブラウザ上で操作する : だらっと学習帳
Javascriptでキー入力イベントを発行する方法 | システムトラスト技術ブログ
このエントリーをはてなブックマークに追加

IMG_20180422_184028
技術書典4 で買った技術系同人誌の感想を書く記事です。随時更新予定。
基本的に読んだ順のはず。書籍版・電子版のどちらで読んだかも書いてます。
通販リンクもわかるものはできるだけつけてます。
※私が書籍版で読んだものでも電子版へのリンクになっているものもあります

[ 更新記述欄 ]
2018/04/24 : 5冊追加
・ノンデザイナーのための名刺デザイン→2018/04/25追記
・ソフトウェアエンジニアの情報収集について
・今日からはじめる技術Podcast 完全入門→2018/04/25追記
・デザインのうすい本
・知らないと損するCSS
2018/04/29 : 4冊とおせんべい追加
・こまるUIよくしてみた本
・イヌでもわかるウェブフォント
・フロッピーせんべい
・CSSをもう一段階レベルアップさせる本
・Markdownライティング入門
2018/05/14 : 5冊追加 これで全部読了!
・ksnctf C92
・フロントエンドちょい足しレシピ
・技術季報 vol.3 2018 SPRING
・技術書をかこう! ~はじめてのRe:VIEW~ 改訂版
・技術同人誌を書こう! アウトプットのススメ




ノンデザイナーのための名刺デザイン @書籍版
祝!重版出来 技術書典4にてノンデザイナーのための名刺デザイン本を再販します。 - atelier:mitsuba

ちょうど勉強会用名刺を新しくしたいと思ってたのでこの本は絶対確保だと思ってました。買えてよかった!
「こういう考え方や見方でやると良いよ!」という話だけでなく、
「こういう手順で考えていくといいよ!」と丁寧にガイドされてるのが心強い一冊です。
名刺作りって小さな紙面にクリエイティブとテクニックを詰め込む奥深さがあるんだな…と感じました。
紙面デザインだけでなく紙の種類や重さにまで言及してあるのもためになりました。
名刺ならではの要素ですね。
あと、イベントで買った時に同じお名前でデザインもほぼ同じ名刺を2枚いただいたのですが、
1つはツヤのある紙の名刺でもう1つはマットな紙の名刺だったので、実際に手にとって違いを比べることができました。
同人誌に書かれている知識が実体化されたことでより理解につながったし、これは素敵な取り組みだと思いました。
(本当に比較のために配られているかはわかりません。もしかしたら私の見当違いかもしれない…だとしたら申し訳ないです)
→ 2018/04/25追記 こういったご事情だったようです><


ソフトウェアエンジニアの情報収集について @電子版
ソフトウェアエンジニアの情報収集について - nikuyoshi - BOOTH
必要に迫られての調べものと、引き出しを増やすためのテクニックが両方載ってて興味深かったです。
日本語の情報だけでなく英語の情報を得るための方法もまとまっててお役立ち度高い技術書でした。
エンジニア的質問のしかたの解説・紹介は実用性もありますし、まさに「今から使える!」って感じが嬉しいですね。
いかにダラダラせずに情報収集するかって、「ダラダラしないぞ!」って思うのももちろんなんですが、
テクニックも大事なんだなーと思いました。
実践にあたって、オススメのサービスの具体的な名前がのってるのは同人誌ならではかもしれませんね。

今日からはじめる技術Podcast 完全入門 @電子版
今日からはじめる技術Podcast 完全入門[PDF版] - YATTEIKI BOOK - BOOTH
生 ま れ て 初 め て 技 術 書 で 泣 き そ う に な り ま し た 。
" ぼくもあのみんなが⽴っている「ステージの上」に⽴ちたい " この文章が涙腺にきました。
魂の叫びと、輝きを秘めた原石のような気持ち。
それがPodcastに乗って届いてる。なんてきれいな世界なんだろう。
技術や方法の丁寧なガイドももちろんためになるんですが、
全編を通して述べられている「まずはやってみよう!」「あなたのことを知りたい!あなたの声を話を聞かせてほしい!」
「めげたりくじけたりせずに続けてみて!」というポジティブかつ情熱的なメッセージに心が震えました。
全てのページがあたたかくてきらきらしてて…こんなきらめき、アイドルマスターでしか知らなかった。
尊い技術書です。
→ 2018/04/25追記


デザインのうすい本 @書籍版
デザインのうすい本 - neko-note - BOOTH
プログラミング研修は受けたことがあるのですが、もしもデザイン研修もあったらこんな資料かも、と感じました。
色、フォントの基本編ということで、紙面や画面上で特に目立つところがおさえられて助かります。
筆者は「デザイン書なのに図より文が多い」点を気にされている(?)ようでしたが、
ふわっとしている法則をかっちり言語化してもらえるのは初心者にはありがたいと思いました!

知らないと損するCSS @電子版
知らないと損するCSS - neko-note - BOOTH
かゆいところに手が届くテクニックがたくさん詰まってて勉強になりました!
電子版で手に入れたんですが、書籍版が買えたらよかったのになーと思いました。
というのも、「手元に置いておいて困った時に開く」のが理想的と思える技術書だったからです。
特にレスポンシブ対応まわりはまさに今知りたい内容だったので、色々知らないことが載ってて学びがありました。
最近のCSSはなんでもできてやべーなー。CSSすごい。

こまるUIよくしてみた本 @電子版
こまるUIよくしてみた本 - nayucolony - BOOTH
「使えはするけどたしかにそれイラッとするわー!」の解決方法が文章とイラストで具体的に提示されててイメージしやすかったです。
自分で実装してると「使えりゃ良いじゃん」精神が出てきたり、
他人の実装についても苦労した所を勝手に想像して
「あー、ここはアレしたかったんだけどコレになっちゃったのね、まあ切羽詰まると仕方ないよねー」と納得して終わったりすることもありますが、
やっぱり快適な方が100倍良いよね!と思いました。
この本で解説されてるひとつひとつは細かくて小さいことですが、
使う人全員が苦労をわかってくれるわけではないので、やっぱり改善&快適化は大切ですよね。
それにこの本で提示されてる解決方法はどれも難しいことではなくて、
本当に気づけるか気づけないかの違いでしかないので、やっといて損なし!と思いました。
そして、気づけるか気づけないかの違いはまさにこの本読んだことあるかないかって点になると思います!
あと、本のタイトルロゴがかわいいなと思いました。
こまる文字は困ってるしよくした文字は気がききそうな感じがして良いですね!

イヌでもわかるウェブフォント @書籍版
イヌでもわかるウェブフォント - 犬テトラ+ - BOOTH
ピンポイントな内容が技術書としてまとまってるの本当に助かります!!
webフォントをただ使うだけでなく、あるあるなトラブルを避けたり、
快適な表示を提供できるようにするための方法が明示されていて、実装時の困りごとが減りそうだと思いました。
あと、付録として載ってたライセンスの解説もわかりやすく、勉強になりました。
ライセンスまわりは調べても複雑だったり、自分の知りたい範囲より広い話が展開されてたり、
英語を読み解く力が求められたりするので、日本語で丁寧に解説されているのはありがたかったです。

フロッピーせんべい @おせんべい
フロッピーせんべいを作ってみた - 趣味TECHオンライン | 趣味のモノづくりを応援するオンラインメディア

エンジニアにも、エンジニアでない方にもおみやげとして配りやすい一品!
ちょい固めなのでイベント内混み混みでも割れるリスク低めで良かったですw

CSSをもう一段階レベルアップさせる本 @ダウンロードカード版
サークル詳細 | 御苑×Lab | 技術書典
一問一答形式のユニークな技術書で、楽しみながらCSSについて考えたり学んだりできました。
「これどっちが優先されるんだっけ?」「この条件の時ってどう書くんだっけ?」ってCSSあるあるだと思うのですが、
それをクイズにして楽しむ発想が面白くて良かったです。
クイズの内容も「あー、これ迷うやつだ…」となるものもあって、頭の体操にもなりました。
エンジニア同士でこういうクイズ出し合って遊ぶのも面白いかもしれませんね!

Markdownライティング入門 @書籍版
noteマガジン発!! 技術書典4で『Markdownライティング入門』を頒布します|藤原 惟
丁寧に丁寧にMarkdownの作法やメリットが述べられている技術書で、
Markdownライティング初心者の方はもちろん、
「Markdown勧めたいんだけどどう説明したらいいだろう?」という方の助けにもなるのではないかと思いました。
初心者お助け度合いがどれくらい高いかというと、なんなら # の入力方法から解説してあります!
「Wordに疲れていませんか?」がキャッチコピーとして表紙に書かれていますが、
プレーンテキストでガツガツ書けるのは正義だよね、と改めて思いました。
また、付録ながらMarkdownに関する議論→段落についての議論は言語学的な読み物として読みごたえがあって興味深かったです。
索引と参考文献一覧がしっかりしていたのも技術書として非常にポイントが高いなーと思いました。
技術書のカテゴリから飛び出してライティング作法・テクニックとして幅広く読まれてほしい一冊……と思っていたら、
商業誌企画が通られたとのこと!おめでとうございます!!

ksnctf C92 @書籍版
ksnctf C92
出題者自らが執筆されたということでとても丁寧に解説してあり、読み応えがありました。
出題の意図、ダジャレの解説(?)なども収録されているのが「ここだけで読める裏話」って感じで良いですね!
バリエーション豊富な問題とその解説がまとまっている本なので、
CTFってこんな感じなんだよーと説明するのにもちょうどいい技術書かもしれません。
CTF頻出の問題も含まれているため「傾向と対策」本としても使えそうです。
個人的にCTFと競プロ界隈は興味がある(プレイヤーになりたいというよりはコミュニティに興味がある)ので、
こういう本はもっともっと読んでみたいと思っています!
出題者のお悩みとして、要約すると
「解答そのものを公開されると困るが、解法は出題者の想定外のものもあるかもしれないので知りたい。
しかし、後のプレイヤーがググった時に解法がいきなり出てくるのも困る…」と述べられていましたが、
とすればこういった技術書という形でのwrite-upも結構アリなんじゃないかなーと思いました。

フロントエンドちょい足しレシピ @書籍版
サークル詳細 | 御苑×Lab | 技術書典
ちょい足しといいつつ、内容は本格派!料理で使うスパイスと同じですね。
どのテーマも話題としてとても面白かったのですが、
個人的には色んなブログサービス上でのJavaScript動作検証が一番興味深かったです(※検証結果は各社に報告済だそうです)。
コードで頑張る方法からお金で殴るものまで、バラエティ豊かな解法が載っていて、
えっ、まさかそんな方法で?!と思うようなものもあったのでびっくりしました!
あと、よく見ると表紙の女の子が使おうとしている調味料のラベルが各章のテーマになってるのがかわいいなーと思いました。
続編ありそうな引きだったので今後にますます期待ですね!

技術季報 vol.3 2018 SPRING @書籍版
技術季報 vol.3 | 技術書典
運営費にもつながる上に、色々な角度からコラムが読めてとにかくお得だったので「こんなに得しちゃっていいんですか!?」という感じでした!
技術書典のイベントとしての分析や、後払い分析レポはリアルイベント・お金の流れがあるイベントのデータとして貴重かつ興味深く感じました。
データとして見ても浮かび上がってくるものがあって面白いですね。オンリーワンなイベントなのでこういったデータの開示はありがたいと思いました。
どのページからも技術書典スタッフの方々や参加者の皆様による「次をさらに良いものに!」という熱意が伝わってきます。
そのための具体的な試みがこうした紙面やオンライン上でもわかるので、参加者としても安心して応援できますよね。素敵!
あと、印刷所で刷られた同人誌のにおいって好きなんですが、買ってきた本の中で一番グッとくるにおいがしました。すき……

技術書をかこう! ~はじめてのRe:VIEW~ 改訂版 @書籍版
技術書をかこう! ~はじめてのRe:VIEW~ 改訂版【C92新刊】 - TechBooster - BOOTH
技術系同人誌は電子版・書籍版と両方用意されることが多いので、どちらの制作方法も徹底ガイドされているのが心強いですね!
きっかけやモチベーションの起こし方、ツールの使い方、お金の話、文を読みやすくするポイントなど、
多くのノウハウがぎゅっと詰め込まれてて、制作チームの気合と歴史を感じる一冊でした。
特にツールを用いた共著の方法など、技術系ならではの制作方法もわかりやすく解説されており、とても読みやすかったです。
レイアウトが整備されているテンプレートを公開されているのも、界隈にとって素晴らしく偉大な貢献だと思いました。
(誤記かギャグか判断しづらい文なので茶化していいのか判断に困りましたが、)"執筆というのは著者同士による圧力鍋バトル"…おいしそう…

技術同人誌を書こう! アウトプットのススメ @書籍版
技術同人誌を書こう! アウトプットのススメ (技術書典シリーズ(NextPublishing)) | 親方Project | Amazon
イベントで買った技術書の中で一番分厚かった書籍です。持って帰るの重たかったけど書籍で買えて良かったです!
とにかく情報量が半端ない技術書です!
それこそ、まったくの白紙から技術同人誌として誰かの手に渡るまで、その間とその後の話までがぎっちり詰まっていて、
執筆者チームの「とにかく書こう!本として出そう!一緒に楽しもう!」という熱い気持ちが伝わってきました!
印刷部数と費用の話から確定申告の話までカバーしてあったり、
売り子さんや絵師さんなど誰かに協力を依頼・またはアウトソーシング化することを考えたりと、
リアル&スマートな情報も多く収録されているのがまさに「大人のための同人活動本」という感じで素晴らしいです。
トラブル、失敗、踏み抜いた地雷も掲載されており、先人の知恵をお借りできるのも良いですね。
初心者が持っていない勘と感覚を文字で提供してくれる、頼もしさに溢れた一冊です。
このエントリーをはてなブックマークに追加

Processing Advent Calendar 2017 参加記事

「Clojureをやるのです…Processingが好きならばQuilをやるのです…」という天からのお告げがあり、
ClojureライブラリQuil入門してみました。

Quil: animation in Clojure

トップページやExamplesを見ると、コードこそClojureですが表現はProcessingっぽくてなるほどこれはProcessingだなという印象を受けました。
API一覧を見てなおさらそう思いました。

始め方
QuilにはWeb上でお試しできるエディタも用意されています。
36
Quil basic

ここでなんとなく感じを掴み、後は以下を参考にしつつローカルでも動かせるように設定しました。
Clojure をはじめる (1): Clojure と Leiningen のインストール - tnoda-clojure
Installing · quil/quil Wiki
ClassNotFoundException with lein figwheel and Java 9 · Issue #612 · bhauman/lein-figwheel (コンパイル時にエラーが出たので試してみたらこれが正解だった)

描いてみた
他のコードの見よう見まねで、星を描いてみました。
39
Quil - Star

コードは以下のような感じです。



Processing -> p5.js の書き換えもそうですが、表現は同じでも別の文法に書き換えるだけで勉強になりますね。
Quil、なかなか面白いです。
このエントリーをはてなブックマークに追加

Atomで2行以上の空行(改行のみ・先頭タブやスペース有)を1行の空行に置換するメモ

Atomの検索欄で正規表現モードを有効にする(図中青枠のボタン)
12
置換元 : ^[ \t]*[\n]{2,}
置換先 : \n

一発で全部変換できないこともあるけど何回かやってると上手くいくので今のところはこれでよし
(置換元を (^[ \t]*[\n]){2,} にすると上手く置き換わらない?)

参考ページ :
Atomエディタで改行コードを含めて置換する方法 - Qiita
サクラエディタBBS
このエントリーをはてなブックマークに追加

Twitterで反響が大きかったので補足含めてまとめます。



このイチコロ文句が響くのは「お料理を作って食卓に出している」あるいは「食卓にお料理が並ぶようにお金を家庭に入れている」世代ならではかなという印象でした。
特に「お料理を作って食卓に出している」タイプの方は(結構な割合で)ふんぞり返って食べられた経験がおありのようで、
「そうそう!やっぱり作ってもらってばっかりじゃダメだよね」という反応に行き着くことが多かったです。


色々お話を伺うと、プログラミング教育の意味や必要性に対して疑問・不安をお持ちの方ほど、
「うちの子は寝っ転がってLINEするばかり」つまり勉強が苦手/嫌いなお子さんの態度にお悩みであることが多かったです。
親御さんが勉強の意味や必要性を求めるタイプの方なので、
お子さんにもそういった部分を伝えると解決するのではないかなーとは考えていました。

また、「プログラミングは手に職がつきますし、学生のうちからスマホアプリやソフトウェアを作って稼いでいる子もいます。よく『古文や日本史なんて何のために勉強するの〜!』みたいなお子さんいらっしゃいますよね、そういうタイプの子には『プログラミングは勉強すればお金になるぞ!』という方向でアピールするのも良いかもしれませんね」というのもよく使う文句でした。これも反応良かったです。
上記の「勉強の意味や必要性」にガチッとはまる要素として職と金を提示するやり方でした。
あと全てのご家庭がそうでないとは思いますが、私の両親は私が子どもの頃から「何の分野でも良いから一発当てて左うちわで生活させてくれ」と言っていたので、
子どもがスマホアプリやソフトウェア(の作り方を学んで)で一発当てるというのは、自立の喜びと左うちわ生活への入口ということで期待されている側面もあるのかもしれません。

プログラミング教育の教材なので(その場での)対象者は児童生徒学生だったのですが、
教える立場である保護者/先生方も特に難易度については気になさっていました。
また、「自分にもできるだろうか」という意味でも、難易度を尋ねられることは多かったです。
そんな時に「簡単なんですよー取り組みやすいですよー」と単に言ってもあまり信じてもらえませんでした。
そこであみだしたテクニックが以下のとおりです。






これは本当に面白かったです。
男女で「こういう人よりは自分はできるはずだ」「こういう人に負けるのは我慢ならない!」対象が異なっているようでした。

---

上記はあくまでビジネス上のトークであり、私個人としてはプログラミング教育は「絶対!」とまでは考えていません。
ただ、経験者が間口を広くしておくことと、興味のある子がすぐに始められる環境は必要だと感じています。
私にとってもそうだったように、プログラミングは自己表現の「最後の砦」だと考えています。
絵も上手くない、文もそこまで、歌や楽器もぱっとせず、運動はまったくダメ、かといって勉強も…というような、自分の舞台を見つけられない人にとって、
努力の積み重ねが 比較的短時間で/簡単に/他人にもわかる形で 出力されるプログラミングは、
自信と希望をもたらしてくれるものです。
そして、自信と希望は大人であれ子どもであれ必要なものです。

一番重要なこと :



関連記事 :
大学の授業で Processing を取り入れた話 : だらっと学習帳
このエントリーをはてなブックマークに追加

↑このページのトップヘ