読者です 読者をやめる 読者になる 読者になる

職業プログラマの休日出勤

職業プログラマによる日曜自宅プログラミングや思考実験の成果たち。リアル休日出勤が発生すると更新が滞りがちになる。記事の内容は個人の意見であり、所属している(いた)組織の意見ではない。

勉強会ウィーク

その他

1週間で7回も、同業の皆さんとの勉強会に参加するという珍事が発生したのでメモ。

参加したもの

感想

  • 大変だったけども、いずれも勉強になったのは確か。
  • 定時帰りできることの証明になった。
  • 仕事に関わりのあるテーマのものには極力参加しようとした結果、いつのまにか上記のような予定が組まれていた。
  • さすがに、全部のブログ記事を書くほどの時間は無い。

Apple ID を変えた

Macintosh iOS(iPhone/iPad) パソコン・インターネット

Apple ID と言えばメールアドレスです。iCloud やら何やらにログインするときは、メールアドレス+パスワードにて遂行することになります。二要素認証を有効化している場合はもう一つの要素も必要ですが、メールアドレスが必要であることに変わりはありません。
メールアドレスと言えば、何らかの事情で変わることがあるものです。
数年前までは、ISPや携帯電話会社の乗り換えなどによってメールアドレスが変わることが多かったでしょう。迷惑メールに悩まされた結果として変更する必要に迫られるというケースも耳にしたことがあります。ここ数年では gmail などの利用が一般的になり、これらの要因によるメールアドレス変更は減りました。
減ったとは言いつつも、もちろんゼロにはなりませんし、筆者も Apple ID として使用しているメールアドレスを廃止したい状況になったので、Apple ID の変更(すなわちメールアドレスの変更)の手続きを取りました。

予想通り、すんなりとは行かなかったので記録に残しておきたいと思います。

続きを読む

デザイン指示書 その未来

その他 デザイン

WebサイトやWebアプリケーション、iOS / Android などの開発の現場において、デザイナが他者に指示を出すために「デザイン指示書」やそれに類するものを作成することは少なくありません。
ここ数年の間で、このような文書のやり取りに絡んだトラブルの事例を数件見たり聞いたりしたので、そこで起きている典型的な問題と、それに対する対応策を紹介したいと思います。

※業界や業態が変われば「デザイン指示書」が指す文書の役割は異なり、デザイナに指示をするための文書を指すこともあるでしょう。この記事を読まれる際には、皆さんの環境において使われる文書名に置き換えて頂ければと思います。印紙税の課税対象であるか否かが文書の名称ではなくて文書の内容によって判断されることと感覚的には同じですね。この記事では、デザイナがプログラマや広報担当者などに出す指示を文書化したものという意味で デザイン指示書 という語を使っています。

続きを読む

c3シリーズでswap

AWS

明けましておめでとうございます。今年もよろしくお願いします。

さて、早速ですが。
AWSで様々なアプリケーションを動かしていると、普段は c3/c4 シリーズに適した使い方なんだけども稀に大量のメモリを一度に使うことがある、というものに出くわすことがあります。
このような状況ではswap(仮想メモリ)の仕組みが動いていると非常に効果的なのですが、デフォルトではオフになっています。c3/c4シリーズを使う上では通常は後継のc4を使うのが筋なのでしょうけれども、swap領域として使用するストレージは、c3シリーズのみに提供されるインスタンスストアを使うのが気持ちイイです。
この記事では、今更ながら、c3でswap領域を確保する手順を確認します。
※この記事は 第67回 紅白歌合戦 を視聴しながら書きました。

続きを読む

2016年、作ったものまとめ。

その他

2016年も残り10時間を切りました。
突然ですがここで2016年に作ったものをまとめておきたいと思います。

続きを読む

CloudWatch Logs を華麗に読む CWLReader v1.2

AWS パソコン・インターネット

CloudWatch Logs のログを華麗に読むツール CWLReader をアップデートしました。
github.com
pure HTML / JavaScript なツールで、html ファイルを1つ置くだけで使えます。ダウンロードはこちらから。

製品のコンセプトなどは、初回リリース時の記事 をご覧下さい。

主なアップデート内容と意図

初回リリースは 2016年8月 だったのですが、この4ヶ月の間にも AWS は凄まじい進化を遂げています。その進化の中には、リージョンの追加というものも含まれます。まずは、これらに対応しました。

その他には、画面の見た目やモノの配置に調整を入れました。例えば、誤解を招かない範囲でマージンを極力小さくすることで、ログそのものを読むことに集中できるようにしました。

さいごに

何かお気付きの点などございましたら、issue を上げて頂きますと嬉しいです。
英語書くのしんどいよ〜という方は、Twitterで連絡下さい(ブロックしてたらゴメンなさい)。

関西モバイルアプリ研究会 #関モバ 第21回 に参加

iOS(iPhone/iPad) 携帯・デジカメ

関西モバイルアプリ研究会(通称 関モバ)の第21回に参加してきました。

kanmoba.connpass.com

会場

今回の会場も、このブログなどでもお世話になっている 株式会社はてな さんの京都オフィス!
本当によくお世話になってます。

自分で発表した内容

speakerdeck.com
補足資料

うるう秒の挿入まであと5日間程度!ということで、うるう秒特集を組みました。
前回のうるう秒は2015年7月1日(日本時間)だったのですが、その直前には勤務先の社内勉強会で似たような話をしていました。その時の内容を関モバ向けにアレンジしたのが今回の内容です。

聞いた話

全部メモできたわけではないですが、だいたいこんな内容でした。

最後に紹介されていたプッシュ通知テスト用ツール、良さげでした。
GitHub - noodlewerk/NWPusher: OS X and iOS application and framework to play with the Apple Push Notification service (APNs)


おまけ1


これ、自分のマシンに突っ込んでるファイアウォールが原因になっているような気がしてきました。

おまけ2

懇親会では、ずっと日付の話をしていました。
祝日法国民の祝日に関する法律)、最高に萌えます。
第二条に登場する「春分日」と「秋分日」は、懇親会において総務省が決定し公表するかのような発言をしていましたが、調べてみるとこれは正確ではなく、内閣府による解説ページ によれば、国立天文台官報にて公表するという運用が正解でした。ここに訂正させて頂きます。

さいごに

運営の皆さん、はてな の皆さん、会場でご一緒した皆さん、ありがとうございました!

第26回 #シェル芸 勉強会に参加してきました

シェル パソコン・インターネット

2日前の話題ではありますが、タイトルの通りです。今回も大阪サテライトでの参加でした。

atnd.org
togetter.com

午前中の学び

午前の勉強会は bashキーバインドの話でした。

  • set -o emacs
  • set -o vi

どちらが良いかなんて一目瞭然ですね(宗教戦争を煽るスタイル)。

そしてbind芸。

もちろん午前の勉強会のオチは、危険bind芸で端末を落とすこと、でしたww


午後のクイズ大会


午後の部が始まる前に、大阪サテライトでは .xlsx のファイルフォーマット解説の会を開催していました。
基本は

  • zipで固めてある
  • 1シートで1つの .xml ファイルが存在する
  • 文字列は sharedStrings みたいなファイルに格納されている
  • 各シートのセルは、中身が文字列のときは sharedStrings の中身での出現場所を指し示すようになっている
    • 全く同じ文字列が複数のセルに入っているとき、sharedStrings は上手く再利用される
  • セルの中身が式(formula)のとき、その評価結果はシートの中にキャッシュされている
    • 例えば =A1 という式が入っていて、その参照先セルが文字列であるとき、式の評価結果がキャッシュされることになるため sharedStrings を参照する形にはなっていない。ファイルサイズが増える原因になり得る。
Q1

一度展開した .xlsx / .docx / .pptx を再びzipに戻す業務。
実は難しいです。。

Q2

パワポのスライドに含まれる「危険」という文字列が、何回登場するか数える問題。
回答:$ unzip -p 20141019OSC_LT.pptx "ppt/slides/slide*.xml" | grep -o '危険' | wc -l
unzip コマンドの展開ファイル指定にはワイルドカードも使えることが重要ですね。

Q3

パワポに含まれる画像を全て抽出してzipに固める問題。
回答:$ unzip -d hoge/ 20141019OSC_LT.pptx "ppt/media/*"; cd hoge/ppt/media/; zip ../../../hoge.zip ./*; cd ../../../
テンポラリのディレクトリを作ってますが、最後に消してないのはお行儀が悪いですね。

Q4

スライド7ページ目に含まれる文字列を抜き出す問題。文字列に全角半角が混在している場合などにおいては、古き良き時代の shift-out / shift-in のような設計思想のタグ構造になっているので、どこからどこまでが1行であるのか?をきちんと管理しなければなりません。パワポにおいては <a:p> タグが段落を示すようなので、これを1行として取り扱いましょう。
回答:$ unzip -p 20141019OSC_LT.pptx ppt/slides/slide7.xml | sed 's/<a:p>/@/g' | tr '@' '\n' | sed 's/<[^<>]*>//g'


Q5〜Q8

大阪サテライトでの予習の成果を生かすことのできそうな問題でしたが、残念ながら正解にはたどり着かず。

気休め

懇親会 兼 LT大会

今回は私生活がボロボロでしたので自分では発表しませんでしたが、今回も大阪サテライトは最高の話が続きました。
素晴らしい発表の数々は、こちら!

さいごに

企画運営してくださってる皆さん、凄いネタをぶつけてくれる皆さん、各会場の皆さんなどなどに感謝!

それでは皆さん、良いshん年を!!(typoじゃない)

目とコーヒー

その他

先日、スターバックスでコーヒーを飲みながら本を読んでいると、二人組の女性客が入店してきて、店員さんに案内されながら筆者の隣の席に着いた。二人とも白い杖を持っておられる。恐らく目が見えないのだろう。

店員さんの行動を見る限りでは非常に慣れている様子で、商品の選択を促す際には点字のメニューを渡して放置ではなく(点字メニューが用意してあったとしたら、もちろんそれも素晴らしいことだが)、「どのような飲み物が欲しいのか?」を聞き出し、それに合う商品をいくつか提案し、その中から注文を取るということをやっておられた。
それ以外にも座席への誘導の仕方や会計の手順、商品の引き渡しなどにおいても理にかなった行動を取っておられた。これらの行動は「助けてあげたい」という精神だけではほぼ不可能だろう。この店員さんが相当の経験を積んできているか、きちんとした教育をうけているかのいずれかであることは容易に想像できる。スタバ凄い。

二人組のお客さんも、凄い。
テーブルの上に置いてある物の位置を、きちんと記憶しているようだった。コーヒーの容器を倒してしまわないか心配していたが、そんなことは無かった。
硬貨も紙幣も、識別して数えることができていた。硬貨は練習すれば識別できそうな気もするが、紙幣は難しそうだ。2016年9月にオーストラリアで 新しい $5 紙幣 が発行され、今後発行される紙幣では "Intaglio"(凹版印刷)で生じる突起によって、目が見えなくても紙幣の識別が可能になる、という話があった。日本の紙幣にはこのような機能は無いはず。どうやって識別していたのだろう…?

もしかすると、これらは盲目の方々にとってはできて当然のことなのかもしれないが、凄い。

筆者には、身近なところに盲目の方は居られないし、自分自身に何か進行中の病気がある訳でもないが、プログラミングという視覚が重要になる仕事をしている以上、盲目になることは怖いことだと認識している。少し前に音楽仲間と酒を交わしたときも「目が見えなくなるのと耳が聞こえなくなるの、どっちが怖いか?」ということが話題に上がったが、その場にいたミュージシャンも全員「目だなー」という意見を持っていたのは印象的だった。

過去にはこんな発言もしていた。


使える時間には制限があるけれども、人の為だけでなく自分自身の為にも、徳を積んでおきたいところだ。

退学後のキャリア形成と12年後の状態について

学問・資格 その他

この記事は、12月1日から25日まで、学校を退学した人・する人などが記事を続けざまに投稿していく「退学 Advent Calendar 2016」の15日目の記事です。
www.adventar.org

筆者は大学(学部)を中退しましたが、それから10年以上が経過しても生き延びることができています。
これまでに起きたことなどと適当に掻い摘んで書いていきますが、退学したばかりの人、退学しようかどうか悩んでいる人、そんな方々の参考になれば幸いです。

続きを読む

「〆切本」を買った

その他

歴史に名を残す作家・小説家が「〆切」とどう向き合ったのかの話を集めた本、「〆切本」を買った。

〆切本

〆切本

我々が日常的に使う言葉「進捗ダメです」をプロの作家さんが書くとどのようになるのか?
潔く醜態を晒け出すのか、それともあれこれ理由を付けて逃げ切るのか。

まだ読んでいる途中であるが、学びが多い。
納期に追われる皆さんにもオススメの一冊だ。

Cocoa勉強会関西 第70回 に参加してきました

Macintosh iOS(iPhone/iPad)

cocoa-kansai.connpass.com

直前まで参加できるかどうか怪しい状況でしたが、どうにか都合をつけることができました。
そして、どうせ参加するなら喋りたい!ということで、少しばかり喋ってきました。

喋った内容

Code Signing(コード署名)についての話でした。
どちらかといえばMac寄りな内容ですが、コード署名という作業が必要なのはiOSMacも同じです。コード署名でトラブルが発生するのはアプリをリリースする直前であることが多いのですが、慌てて適当に操作して「何かよくわかんないけどもできちゃった」で終わりにしてしまう人は多いですし自分もそうでした。きちんと基礎を学ぶことで、再現性のある仕事をできるようになりたいと思い、このテーマを取り上げました。

他の方の発表

  • iOS10でリモートプッシュ通知をできるだけ簡単に送る by STUDIO SHIN さん
  • もうすぐはじまるATS必須化について by niwatakoさん
  • 統計から見るアプリユーザーの姿 by niwatakoさん
  • iOS10からこっそり使えるApp Extensionの「これが欲しかった」オプション by niwatakoさん
  • Sparkle で Mac アプリを自動アップデート by kanizaさん

資料は冒頭にリンクを貼ったconnpassのページとかからリンクされている、かも。
全体的に、証明書だとか暗号化の話題の多い回でした。


次回は2017年2月11日の予定だそうです。

おまけ

#SVG で スクラッチくじ を作ってみた

SVG JavaScript

この記事は、SVG Advent Calendar 2016 の3日目の記事です。

SVG Advent Calendar には、このような記事も過去に投稿しています。


さて。
年末ということで、宝くじ や 占い、それに類するものに興味をお持ちの方も多いかと思います。私自身はそのようなものは好きではないのですが、くじ等を作る側(射幸心を煽る側)の人間として各種法令を遵守しながら立ち回ることは嫌いではありません。ここでは、くじを作る側の人間として、SVGでスクラッチくじを作る手法を紹介したいと思います。

まずは完成品のご紹介

さすがにブログ記事の中でJavaScriptを動作させるのはどうなんや…ということで、別のサイトにHTMLファイルを置くという形でご紹介いたします。
f:id:t_motooka:20161127134448p:plain
https://www.tmotooka.com/svg_scratch.html
このページにアクセスすると、銀色(実態は灰色ですが)の部分をマウス操作やタッチ操作で削ることができ、削ると隠されていたメッセージが表示されます。
「もう一度 くじ を引く」ボタンを押すと、銀色の覆いは元に戻り、中のメッセージはランダムで切り替わります。

こすったときに何が起きているのか?

まず初めに、SVG画像としては、銀色の覆いの向こう側には、あとで表示されることになるはずのテキストのメッセージが描かれています。その手前のレイヤに、銀色の長方形が描かれています。

JavaScript のコードでは mousedown mousemove touchstart touchmove などのイベントを捕捉し、マウスカーソルの位置やタッチ位置を把握しています。
その動いた軌跡を、ある程度の太さの線分で結び、その線分で描かれた領域だけ銀色の覆いが非表示にする、ということを mask という機能を使って実現しています。

mask とは

SVGで描かれている内容のうち、指定した領域を透明にすることができます。領域は、<mask>で囲まれた内側で、通常のSVGと同じように描くことで指定することができます。白く塗り潰された領域は描画され、黒く塗り潰された領域は透明になります。
mask の適用先では mask="url(#{mask要素のid})" という形で適用するべきマスクを指定します。

詳細な説明は、こちら。
Clipping, Masking and Compositing – SVG 1.1 (Second Edition)

銀色の覆いをカスタマイズしてみる

クラッチの仕組みは、くじではなくプリペイドカードなどにおいても頻繁に用いられます。そのようなものの中には銀色の覆いに対して模様を描いていることもあります。
今回紹介したスクラッチくじでも、そのような模様を描くことが可能ですし、実は少し修正するだけで模様を登場させることが可能です。
f:id:t_motooka:20161127142717p:plain
ソースの中に path id="wave" と書かれた部分があると思います。この要素の stroke="none"stroke="#000000" に変えることで、3本の黒い波線を表示させることが可能です。この path はmask適用している <g> タグの内側に居ますので、削る操作をしたとき、銀色の覆いと一緒に削れていきます。

何故これを作ったのか?

今年の8月に、名古屋のWeb界隈の皆様の集まり「WCAN」主催のイベント「WCAN mini 2016 Vol.2 SVG Maniax in NAGOYA」に参加してきました。
wcan.jp
このときの参加レポート: 名古屋のSVGイベントに参加してきました - 職業プログラマの休日出勤

参加レポートには書いていませんが、この懇親会においてどなたかが「SVGでスクラッチくじとか作れたら面白そうだよね」という発言をされていました。このとき私は十分な量のお酒を頂いていたので誰の発言だったのかを思い出すことができないのですが、ここで私は「実装するぞ!」という宣言をしたことだけは覚えています。それから忙しい日々が過ぎる中で「早く SVGクラッチくじ を作りたい」という想いは募る一方でした。

このときの約束を果たすことができて、私は幸せです。

さいごに

紹介した SVGクラッチくじ はMITライセンスにて利用許諾しています。皆さんも、許諾の範囲内でこれを生かし、世界中の多くの人を楽しませるような くじ を作って下さい。
楽しみにしています!

医療情報サイト WELQ(ウェルク)への自分自身のアクセス記録を調べる

パソコン・インターネット

医療情報のキュレーションサイト「WELQ」(ウェルク)について、適切でない情報が多く掲載され、かつ強力なSEO施策が実行されていた結果として検索結果の上位に食い込んでいた、とされています。
本日飛び込んできたニュースの中に、当該サイト、および、運営会社であるDeNAが他に運用している多くのキュレーションサイトが閉鎖された、というものがありました。
掲載されていたコンテンツにどれほど適切でない情報が掲載されていたのか、今となっては調べるのも面倒臭いですが、医療にそれほど詳しくない我々がそれらのサイトの情報を知らないうちに見ていて、知らないうちに鵜呑みにしている可能性も十分に考えられます。
そのような情報が脳内に存在していたとしても直ちに自分が死ぬ訳ではありませんが、どれほど自分がアクセスしていたのか、知っておいて損することは無いでしょう。

自分が問題のあるサイトにどれほどアクセスしていたのかは、ブラウザの履歴を辿って行けばわかります。しかし、全てを人間の目でチェックすることは極めて困難です。ならば、機械的に調べてみようではありませんか。
この記事では、例として、MacFirefoxの履歴を調査する方法をご紹介します。

続きを読む

祝・はてなブログ5周年!(第一弾)

その他

お題に沿って記事を投稿することでキャンペーンに応募できるタイプのやつです。
第一弾の応募締め切りは11月6日だけども、7日から始まるはずの第二弾のお題が未発表のようなので第一弾のお題で応募。上手く拾われるかな??
とにかく、5周年おめでとうございます!


はてなブログ5周年ありがとうキャンペーンお題第1弾「はてなブロガーに5つの質問」

1.はてなブログを始めたきっかけは何ですか?

とあるイベントで、βリリースのときに「はてなブログできたよ」というお知らせを頂いたので。

2.ブログ名の由来を教えて!

一時期、休日出勤が多すぎて自宅で何も作れない時期が続いていて「これじゃいかん、何の技術も身につかない」と思い、ほんのわずかな土日技術調査の成果をブログに書き留めようと思いました。そのような経緯があって「休日出勤」という語を含めることにしました。

3.自分のブログで一番オススメの記事

一つ挙げろと言われても難しいものがありますが、これですかね。ウォーターフォール型開発を良いものにするためにはどうすれば良いか?と真面目に考察した記事です。
tmotooka.hatenablog.jp

4.はてなブログを書いていて良かったこと・気づいたこと

はてなダイアリー をそれなりの期間利用させて頂いていたこともあって、ずっと はてな記法 を使っていました。
最近は MarkDown 派の人も多いようですけども、自分にとっては便利だなー、使っててよかったなーと思ってます。

5.はてなブログに一言

今後ともよろしくお願いしますm(__)m


http://blog.hatena.ne.jp/-/campaign/hatenablog-5th-anniversary