駄文置き場ですから

自分がやったこと書く用メモなので

同級生にプロ生のことを聞かれた話

https://i0.wp.com/pronama.azurewebsites.net/wp-content/uploads/2014/12/santa2014.jpg

この記事は「プロ生ちゃん Advent Calendar 2016」19日目の記事です。
なんてことないただの日記です。

www.adventar.org

自分の周りの知り合いにはプロ生ちゃんみたいなキャラ物が好きな人がいないだろうし自分から話したりはしていないのですが、先日学生時代の同級生と飲みに行ったときに「プロ生って何?」的なことを聞かれました。
半年くらい前にも同じようなことがありました。

プロ生勉強会やマスコットアプリ文化祭を通してプロ生コミュニティに参加していますが、自分のTwitterを通して多少なりとも気になってる方もいるみたいですね。ありがたいことです。

この勢いで勉強会にも参加してくれるともっとありがたいですね。

そんな感じで技術的な話が全くありませんが今回は以上です。
そろそろ技術的なこともしていきたいです。こんなこと前にも言った気がします。

単色SDプロ生ちゃん作りました

f:id:pmw1415:20160423210052p:plain
前略、こんな感じのプロ生ちゃんを作ったので公開します。

■概要

公式で公開されてるSDプロ生ちゃんの画像を加工して作ったものです。

pronama.azurewebsites.net

元々は常駐型プロ生ちゃんを作るための通知アイコンとして加工したものです。
縮小してもある程度見えるように線を太めにしつつ単色で表現できるように調整しました。

当時はアイコン目的だったので顔部分だけを切り取って作ったのですが、せっかくだし全身版つくったらどうだろう?ということで作りました。
ついでに顔部分以外はほぼ使い回せたので全パターン作ってみました。
(ちなみにsd_eye2はsd02と同じだったので省略)

■マスコットアプリ文化祭に登録

既に参加賞が送られていますが、あえて登録しました。

mascot-apps-contest.azurewebsites.net

利用規約

公式の利用ガイドラインに反しない範囲でご自由にご利用ください。

pronama.azurewebsites.net

加工とか自分なりなアレンジとかもしちゃって大丈夫です。

■ダウンロード

↓OneDriveで公開してます。良かったら使ってみてください。

https://onedrive.live.com/redir?resid=BE1E0B4B07709969!1055&authkey=!AKfQiT7Uwak3yVM&ithint=folder%2cpng

使いました的な報告とか改善案とか、何かしら反応くれると嬉しいです。

…おや!? 常駐型プロ生ちゃんの ようすが……!

もう2月も終わりです。まじか

ここ数ヶ月の目標にしてたマスコットアプリ文化祭も終わり、個人的に一段落着いた感じなのですが、勉強会でのショートセッションでもボソッと言った通りあれからもちょっと機能追加しようとコード弄ったりしてます。嘘ですちょっとだらけてました。

さて、半年以上前にもちょっと常駐アプリみたいなの作ろうとして、結局うまくいかず断念したのですが、今回の件で常駐アプリの知識がちょっと増えたからできるかな?と思ってちょっと調べたりしてました。

結論としては脱線したわけですが、

【Android】他のアプリケーションの上にViewを表示する - It’s now or never

これとか

Androidの表示レイヤーと画面常駐型アプリの話

これとか発見して読んでました。

ざっくりまとめますと、通常アプリよりも手前のレイヤーを指定してWindowManagerに登録すればそのビューがオーバーレイ表示できる、という技です。
これをServiceで行えば他のアプリ起動中も常に表示されるようになるとかなんとか。

まあぶっちゃけ以前にも調べたことはあって、そういうのあったなー的な感じで見てたんですが、これ、何か使えないかな~とふと思い、ちょっとアプリ弄ってみました。

で、現在こんな感じになりました。

f:id:pmw1415:20160226080834p:plain

お分かりいただけるだろうか。画面右下にうっすらとプロ生ちゃんを召喚しました。

個人の感想ですが、これくらいの透過率なら普段からずっと表示しててもほとんど支障ないなって感じです。テキストとか重複しても割と普通に読めてます。
ちなみにこれ、Notificationと同じでアニメーション対応もできました。

今のところは試験的に表示サイズを固定とした状態ですが、アプリに本適用するならいろいろ対応が必要そうですね。
表示サイズの調整とか、画面回転対応とか、フルスクリーン表示中だけで非表示化するとか。

というわけで、需要あるかは分からんけど常駐型プロ生ちゃんが進化しそうです。
画面に干渉するから良いかどうかはかなり個人差が出る気がします。

このアプリ使ってくれてる人、何か意見とかくれると助かります。おしまい。

プロ生勉強会 第39回@恵比寿 に参加してきました。ショートセッションもしました

2016年です(もう1.5ヶ月過ぎた

どうも、2016年です。
自分は去年10月頃から「マスコットアプリ文化祭2015に参加しよう」をきっかけにプロ生関連でいろいろ経験させてもらいました。LTとか名古屋とか自作アプリ公開とか。
今更ですが、今年はもっと積極的に何かしらやっていきたいと思っています。
 
 

とか考えてるくせにはてなブログの更新はこれが初です。だらしないですね。
技術関連・日記含めいろいろネタはあったのですが、他にやりたいことあったりで放置状態になっちゃいました。
何言っても言い訳にしかならないので詳しくは語りません。

ちょっとした内容でもこまめにまとめて投稿とかしていきたいです。
1月にやった事も整理していきたいです(整理するとは言ってない

昨日はプロ生勉強会でした

というわけでプログラミング生放送勉強会 第39回@恵比寿、行ってきました。

pronama.azurewebsites.net

togetter.com

各発表者さんのセッション・LTに関しては↑Togetterまとめや他参加者さんの記事を読んで頂ければ、と思います。

今回はマスコットアプリ文化祭2015との連動とのことで、これに応募した方々のセッションと表彰式でした。

mascot-apps-contest.azurewebsites.net

自分は狙い通り受賞しませんでしたが、去年からの目標だった「参加する」が達成できて満足です。

あと、まだ応募できるみたいです。
文化祭に参加してないけど勉強会参加しましたって方は応募してみてはいかがでしょうか。
もちろん参加してない人も応募できます。きっと楽しいですよ。
賞を狙うための参加ももちろんアリですが、参加するってだけでも大事だなと実感しました。自分はしょぼいなりに楽しめました。

ショートセッションしました

授賞式を兼ねた勉強会を開催するというのは既に連絡されてたので、今度もLTやらせてもらおうかなーとLTスライドを早めに作り始めてました。
そんな中、主催者様からの連絡メールで「5~20分の登壇者募集します」と連絡頂き、5分だと確実に足りないので10分時間くださいと返信しました。
その後公式のプログラム紹介で「10~20分のショートセッション」として紹介頂きました。

要はLTやろうと思ってたらショートセッション扱いになったという話です。やったぜ(?)。

早め(メール受信した翌昼だけど)に連絡したせいか、ショートセッション登壇者一覧の先頭に紹介されていたのですが、当日それがそのまま発表順ということになり、自分がショートセッション組トップバッターになりました。

発表時のスライド、こちらです。

www.slideshare.net

10~20分ということで時間的に余裕があり、技術的な話もできるということでテンション上げ気味でスライド作ってたのですが、一通り作ったらスライドが60P超えました。調子乗りました。

結果的には自分よりずっと面白い、すごいもの作った人達ばっかりだったので、最初の方でササッと発表できて良かったかなと思います。

思いついたネタをいろいろ仕込んだり、無駄にアニメーション多様してました。
発表がグダグダだったしぶっちゃけスベってたとは思いますが、少しでも楽しんでくれたり有益な情報を提示できてたら幸いです。

反省点

勉強会のタイムシフト試聴はこれからですが、なんというかもう反省点ばっかりだった気がします。

スライド作りに時間かけすぎたのもありますが、相変わらず話すときにしどろもどろでグダってしまいました。
伝えたいことの半分も伝えられなかったかもしれないです。

今回3回目だし、人前で話すのが苦手とは言えいい加減そろそろスキルアップした感じが他人からも見えるような発表を意識したいです。今後の目標にしたいと思います。

あと自分の発表に一杯一杯で、ところどころ各セッションの内容が深く理解できない節がありました。
自分の発表後にツイートが少なかったのですが、あれ軽く放心状態だったのが原因です。
とりあえず、期限が切れる前にニコ生タイムシフトで復習しとこうと思います。

今更ながらn2witterを知る

発表中に#pronamaツイートが画面上に流れるの、あれ良いな~とか思ってたら普通にフリーソフトとして公開されてたんですね。 なんとなく気になって調べたら普通に見つけました。

uinyan.com

特定のハッシュタグだけじゃなくTLも流せるみたいです。

これ使えば発表する側も聴く側も反応がリアルタイムで観れるので、淡々と発表するよりも互いに楽しめると思います。
次に機会があればこれ使いながら発表したいなー

勉強会後の懇親会

主催者含めた参加者の方と懇親会に行きました。

その時寿司を頼んだのですが、「ちょっとアプリ作るときのフリー素材にシャリだけの素材が欲しい」と言ったら撮らせて貰いました。

同じテーブルの人達にはネタとシャリを別々に食べさせてしまい申し訳なく思います。ただ、ただ私は満足です。
Twitterに貼った画像ですが、どうぞ自由にご利用ください。

※ネタも寿司もちゃんと頂きました。シャリだけでも普通においしかったです。念の為。

次回は金沢!!!

その後の懇親会にて、次回のプロ生勉強会の話と金沢在住組が「金沢でやりたい」という主張があり、来月末に金沢で開催する方向になったみたいです。

さそってくれたのでたぶんいきます

第38回プロ生勉強会@名古屋に参加+LTした話

先週の12/12(土)、名古屋でプログラミング生放送勉強会(第38回)が行われたので参加させてもらいました。
初名古屋だったけど、なんとな~く交通手段調べたら思ってたより時間かからないようで、その時の勢いで参加登録しちゃいました。

なんか1週間以上経っちゃってて今更感ハンパないですが、とりあえず残しときたいので書きます。

pronama.azurewebsites.net

atnd.org

当日の諸々は参加登録ページにまとめてくれてます。
各セッションとかLTのスライドもリンク貼ってくれてます。

あと、公式でトゥギャってくれてます。
1週間ほど経ちましたが、どういうわけか私のツイートがトリです。

プログラミング生放送勉強会 第38回@名古屋 - Togetterまとめ

セッション

メインのセッションはVisual Studioとか、ほぼMicrosoft関係でした。

自分の仕事では関わらない分野で知らない技術が多かったですが、セッションも面白くいろいろ興味を持つ良い機会になりました。

Visual StudioってC#でアプリ作る程度でしか使ったこと無かったですが、別の言語にも使えるんですね。 とりあえずインストールしてみようかな。
でもコルタナさんは僕には使いこなせねえ

LT

f:id:pmw1415:20151220133542p:plain

せっかく遠征して参加したし、人前での発表に慣れたいってことでLTもやらせてもらいました。
6週間ぶり2回目です。

今回のLT参加者は自分も含めて6人。
中学生や高校生でアプリ作った話、
自宅サーバ立てた方、
LINQでライブコーディングした方、
プロ生ちゃんとロッカーに閉じこもれるVRコンテンツ作った方と、
皆さんしっかり技術的なこと話してるしネタも入れててかなり楽しめました。

そんな中自分の発表ですが、

ただ1万超えするキーボードをレビューしただけです。

t.co

今回のネタ要素

内容が技術的要素ゼロなので、せめて楽しめるようにネタを入れたいということで、冒頭でスライドを爆発させました。

な… 何を言っているのか わからねーと思うが
そのへんの詳細は別途で記事書きました。
ついでにプロ生Advent Calendar 2015にも登録させて貰いました。

pmw1415.hateblo.jp

参加者の反応ダイジェスト

自分のLT中のツイートでちょっと気になったコメントと個人的見解を。

使っててある程度の音は出ちゃうのはパンタグラフでも変わらないんじゃないかなあと自分は思ってます。
少なくとも使ってて力が入っちゃう癖が付いてる自分としては、会社支給のキーボードと比べて極端な差は無いです。
今のキーボードにしてからは叩く癖が抑えめになってきてるし、静音化リングも付けてるので、自分の環境としては良くはなっても悪くはなってないはず。

   ただし青軸テメーはダメだ(打鍵音的な意味で

とは言っても、リアルフォース使いには頭が上がりません。

確かにPCや車と比べたらたったの2万ですが、キーボードの相場としてはやっぱり高いです。
キーボードなんてPC買えばセットで付いてくるようなものだし、そうでなくても5000円あれば十分選択肢がありますし。

自分も使い始めて良さを実感したので今はキーボードに2万とか余裕ですが、良さを知らない人には厳しいんじゃないかなあ。

という情弱だった自分の視点で発表した次第です。
共感してくれたのは自分だけじゃないはず。

感想と反省

2回目ってことで前ほどの緊張はなく、自分も楽しめる程度の余裕はありました。
が、ニコ生タイムシフトで観返したらやっぱり声小さいしちょっとどもりすぎで酷かったです。
マイク使いが下手すぎるんだよなあ。。。明らかに声入ってないし

次回また機会とネタがあればやらせて欲しいなと思います。 出禁食らわなければやります。

勉強会終了後の話

勉強会終わってから話しかけてくれた人が思ってた以上にいました。予想外の展開でびっくりしたけど嬉しかったです。

噂程度に使いやすいと聞いてただけの高級キーボード、打ち心地が想像以上に良かったってのを伝えたくて選んだ発表内容でした。
若い人とか学生も多かったっぽい?し、安いやつで良いやってなってる人が少しでも興味持つきっかけになれれば無駄じゃなかったかなあと。

プロ生勉強会自体は今回で3回ほど参加させて貰いましたが、東京以外での勉強会は初。
前回とは雰囲気とか全然違うんだなあと、いろいろと新鮮でした。

懇親会

懇親会も参加させて貰いました。 名古屋っぽいものも食べれました。

わずです

寿司🍣は前々回(第36回)にネタで出てきて以来、自分の中で謎のトレンドになってます。

楽しかったのですが、席が一番端っこだったのと、うろちょろできるほどスペースに余裕が無かったので席近い数人としかまともに話せませんでした。
せっかくなんだからいろんな人と話すべきでした。反省。

2次会

2次会は店員さんが巫女さんの格好してるバーでした。
店の外(屋内)に鳥居があってインパクトが有りました。
地元民でもある主催者様によると、けっこう昔からある有名なとことかなんとか。

後日譚

今回の勉強会、金沢から車で来た遠征組がおり、翌日は名古屋港水族館に行くということで一緒に同行させて貰ったのですが、それはまた別の話。

プロ生ちゃん素材から線画を抽出した話

プロ生ちゃん Advent Calendar 2015の19日目の記事になります。
2日連続参加だぜヒャッハー!!

www.adventar.org

線画だけ欲しい

だいたい2ヶ月くらい前。
プロ生ちゃん素材を利用する際、線画だけ欲しいという状況に陥りました。

いろいろと運が良かったらしく、てさぐりでいじってたら10分くらいでできました。

という出来事を唐突に思い出したので、今回は
『5分くらいで(多分)誰でもできる(かもしれない)線画抽出講座の基礎』
をお送りします。

ちなみに自己流なのでもっと簡単な方法あると思います。念の為。

事前準備

(A) GIMPを使います。インストールしておきましょう。
(B) プロ生ちゃんのSDキャラ素材を使います。DLしておきましょう(http://1drv.ms/1oueRRF)。
(C) プロ生ちゃんに対するキャラ愛を高めておきましょう。きっと役に立つはずです。

GIMP先輩起動

f:id:pmw1415:20151219124556p:plain:w500

GIMPって起動重いよね

②SD素材を追加

f:id:pmw1415:20151219124624p:plain:w500

ドラッグ&ドロップでいけます。

③線画用レイヤー追加

f:id:pmw1415:20151219124642p:plain:w500

レイヤーウィンドウ上で右クリックからの「新しいレイヤーの追加」でレイヤー追加します。
サイズそのまま、塗りつぶしは各自。 今回は見やすくするため白背景にしました。

④線の部分を選択範囲に指定

レイヤーウィンドウではSD素材の方のレイヤーを選択します。

ツールボックスウィンドウでは[色域を選択]を選びます。ショートカットはShift+O。
これは選択した特定の色を全て選択範囲にできる的なアレです。

この状態でSD素材の線の部分をどうにかしてクリックします。
拡大すると選択しやすいです。立ち絵なら首元が狙い目。

f:id:pmw1415:20151219124710p:plain:w500

うまくいくとなんか線の境界線あたりに点線入ります。

⑤選択部分を塗りつぶす

レイヤーウィンドウで対象レイヤーを線画用の方に切り替えて、ツール[塗りつぶし]を選んで線の部分をクリックします。

SD素材で隠れてますが、この時点で抽出できてるはずです。

とりあえずSD素材のレイヤーを非表示化してみましょう。 レイヤーウィンドウの対象レイヤー、左側にある目のマークをクリックして消せます。

f:id:pmw1415:20151219125005p:plain:w500

←Before  After→

f:id:pmw1415:20151219125126p:plain:w600

できた。

f:id:pmw1415:20151219125236j:plain

以前は顔の部分だけで線画抽出しましたが、全身でも問題なくできました。やったぜ。

まとめ

ざっくり言うと、要は対象画像の色情報から範囲選択をしているというだけの話です。

上記手順で使った[色域を選択]ではレイヤー全体が選択対象になりますが、同じく色から範囲選択するツールとして[ファジー選択]があります。
クリックした箇所でだけ範囲選択したーい、という場合はファジー選択を使ってShift押しながらクリックでチマチマ範囲追加することになります。
手間ですが、こういった範囲選択ツールやレイヤーを使ってゴニョゴニョすれば意外といろいろ対応できます。

今回はSD素材を選びましたが、やり方に対してうまく抽出できる条件をクリアしていて一発でOh yeah!!な成果物が作れました。

  • 線色が単色で、場所によって色が薄くなってるといった表現が無い
  • 塗るのに使われた色が線色と重複してない

ここらへんの条件がクリアできていれば、やり方次第ではありますがだいたいそれなりにそれっぽくなります。
毛先で線が薄くなってるとか、そういうタッチの絵だと線が途切れたりしちゃいます。

おまけ

ついでに、ちょっと前に追加されたアイコンでも同じやり方+αでやってみました。

f:id:pmw1415:20151219125639p:plain:w600

うさたんのやつだけ良い感じに瞳入ってて完成度ヤバイ(ヤバイ

■Advent Calendar 17日目: ナーバさん

blog.naba.biz

@ナーバさん、わたしムラムラしてないです

先日のプロ生勉強会LTでスライド爆発させた件の話

プロ生ちゃん Advent Calendar 2015の18日目の記事になります。
残念ですが本日、プロ生ちゃんは出てきません。ごめんね。

www.adventar.org

さて、自分は先日12/12(土)の名古屋でのプロ生勉強会でLTをやらせてもらいました。
こちら、その時のスライドです。

t.co

SlideShareではアニメーションできないのでカットしたのですが、当日の発表ではこのタイトル画面を出す前にダミータイトル画面を爆発させるネタを仕込みました。

こちらです。

f:id:pmw1415:20151218051601g:plain:w300

(ちょっとはウケてくれた気がしますがよく覚えてません)

実はこれ、地味に手間かかってます。
今回はこれができるまでの話。

経緯

LT用スライドを作り始めて数日後、ふと思いました。

「出オチがしたかった。爆発できれば何でも良かった」などと供述しており

パワポのアニメーションで解決

ちょっと調べたところ、PowerPointのアニメーション機能を使って画像を切り替えればできそうみたい。

f:id:pmw1415:20151218052029p:plain:w600

アニメーションさせるエフェクト画像をPowerPointの同じ位置、同じサイズで追加、それぞれにアニメーションを設定します。
1枚ずつ切り替える必要があるので、1画像につき①開始[アピール]と②終了[クリア]をそれぞれ設定。遅延時間で表示時間を調整します。
アニメーションのタイミングは「直前の動作と同時」で、最初だけクリックで開始するようにしました。

いわゆる「そんな態度で良いのか?俺の親指一つでいつでも殺れるんだぜ?」という状態です。何言ってんだ

爆発画像

爆発画像はDetonationというフリーソフトのインストールフォルダ内にあった作成例の画像をお借りしました。
ちなみにこのソフト、自分の環境では起動できませんでした。

Detonationの詳細情報 : Vector ソフトを探す!

f:id:pmw1415:20151218052622p:plain:w450

これの背景(黒い部分)を透過にして20枚に分割しました。

タイトル画面(仮)の破壊

タイトル画面もダミーで画像を用意して、適当なタイミングで終了アニメーションを設定します。
ただイメージしていた砕け散るみたいなアニメーションが無かったので、適当に6個くらいに適当に分割、それぞれ外側にスライドアウトで対処しました。

f:id:pmw1415:20151218053623p:plain:w450

そうして出来上がったのが冒頭のやつです。

f:id:pmw1415:20151218051601g:plain:w450

まとめ

やってることは別に難しいわけではないですが、たった1秒程度のアニメーションでもかなり手間がかかってしまいました。特に調整とか大変。
もっと簡単なやり方とかあればぜひ教えてください。

ただ作ってた当時はけっこう楽しかったです。時間かかったけど。

おわりに

もし良かったらやってみてはいかがでしょうか。
さあみんなもレッツデストロイ!といったところで私からは以上です。

■Advent Calendar 17日目: wktk0さん

wktk0.hatenablog.com

■Advent Calendar 19日目:

f:id:pmw1415:20151220022728p:plain pmw1415.hateblo.jp