Scrapbox のような Wiki 的なツールでは URL にページ名が入ることが多く、URL を見るだけでどんな内容なのか想像がついてよい一方で、こういう URL を Slack や Google Docs のような別の場所に共有するとパーセントエンコーディングされた URL になってしまい意味がわからなくなる。日本語を書いていることだけが分かる状態。 マルチバイトしかないと本当にわからないね Slack がアクセスできない URL だと、プレビューも展開してくれないしね。かといってデコードした状態の URL を貼っても、変なところで途切れたりする。 ・（中黒）でリンクが途切れている 文字は難しい……。URL の解釈はものによって異なってくるのもまた困る。これはプレーンな文字列を渡しているのでこういう困難が出てくるのであって、最近はクリップボードでリッチなコンテンツを受け渡しすることが

このときのHHKBずっと使ってたんだけど、昨日ついに壊れた https://t.co/dwvoxapmsN— 美顔器 (@motemen) 2021年7月7日 新卒のころから使っていた Happy Hacking Keyboard が壊れた（アンチポップさんにもらったやつ。ありがとうございます）。とくにメンテもせずに、もう10年以上使えていたので感謝の気持ちとともに新しいキーボードに買い換えることにする。Macbook Pro の内蔵キーボードはチャタリングするんでちょっとしんどい。 少し悩んで、せっかくなので自作キーボードに挑戦してみることにした。はんだ付けは小学生のときに工作教室でほんのちょっと触ったか？ くらいである。「自作キーボード 入門」で検索して出てきたこれを買うことにする。見た目のかわいい ErgoDash。工具セットも買った。 で、届いたんだけど、どうも圧倒されてしまう感覚

ピタゴラスイッチの人気コーナー「めかぬか」をHTMLで作ってみた。 mekanuka 書き順つき SVG として KanjiVG というプロジェクトがあった。これのおかげで実現できてる。 SVGのパスをアニメーションで描く方法はなんか有名なのがあるらしい: How SVG Line Animation Works | CSS-Tricks。 CSS を JavaScript で生成するのは JSS でやった。@keyframe も動的に生成できて便利。

Googleカレンダーで現在進行中のイベントをSlackステータスに反映させるようにしておくと、チームメンバーに、移動中や不在やミーティング中といった状況を自然に共有できるので便利ですね。そのように設定している人も多いと思います。 似たアイコンが並んでいるように見えますが一方はモザイクです 巷では Google Apps Script でこの連携を行うような方法が公開されていて、自分でも書いて使ってました。これは一度動かしてしまえば大変便利なんですが、インストールの方法はけっこう面倒で、非エンジニアをふくめ会社のみんなに薦めるには少しハードルが高い。 そこで、Google Apps Script を用いて、（初回のインストール手順を除いて）ワンクリックで Google カレンダーと Slack ステータスの連携を行えるウェブアプリを作りました。 GitHub - motemen/gas-g

自分も大方の人間と同じように人前で喋るのは苦手で、可能であれば避けたいと思っているけれど、一方でこの業界で生きのこる方法のひとつとして避けられないものでもあると思っている（ので苦しい）。若かりしころ手痛い失敗をしたこともあって、かなり苦手意識を持ちつづけていたが、最近はわりかし上手く付き合えるようになってきたかなとふり返って思う。 今もうまいプレゼンテーションをする方法は知らないし、それを僕から知りたいという人はいないとおもうが、プレゼンでしくじる方法なら経験から知っている。準備をしないこと。自分の経験からはそうだし、まずいプレゼンを見ていてもそうなんだろうな、と思うことはやっぱり多い。 このエントリはプレゼンがいやでいやで仕方がなかった自分のための分析であり、プレゼンのマイナスレベルをゼロまで引き上げようとする努力です。ソフトウェアエンジニアの技術者間交流のためのプレゼンというのが前提。

はてな退職の辞 - stanaka's blog にある通り、id:stanaka の引退に伴い、2016年8月1日付で私の勤務する株式会社はてなのCTOに就任いたしました。初代のはてなCTOが id:naoya でしたので、3代目のCTOということになります。 はてなで働きはじめたのは2006年、アルバイトの学生としてでした。まだはてなの本社が東京にあったころの話です。もともとはてなはユーザとして使っていて、すごいエンジニアが面白いものを作っている憧れの会社だったのを覚えています。入社すると社内で使っているグループウェア（はてなグループ）のメンバーにしてもらいましたが、そのグループ日記やキーワードにそれまでのはてなのサービスづくりにまつわる議論ほかもろもろのログが残っていて、全てにアクセスすることができたのは印象に強く残る経験でした。 はてなが京都に本社を移転した2008年より正社員とし

新人エンジニアにオススメの本のひとつだよねー、などと言いつつ自身は読んだことがなかったので慌てて買って読んだ。 お題「リーダブルコード」 リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice) 作者: Dustin Boswell,Trevor Foucher,須藤功平,角征典出版社/メーカー: オライリージャパン発売日: 2012/06/23メディア: 単行本（ソフトカバー）購入: 68人 クリック: 1,802回この商品を含むブログ (131件) を見る なるほど当たり前のようなことでありながら短期的に意識して身につけるのは難しかったことばかりで、これがこのようにまとまった形の書籍になっていることはとてもありがたいことだと思う。規約を押しつけてるわけじゃなくて指針の集合なので、気楽さもある。 プログラム中で使用する英語動詞

ウィッシュリストに入れてたのを同僚が贈ってくれた。 熊とワルツを　リスクを愉しむプロジェクト管理 作者: トムデマルコ,ティモシーリスター出版社/メーカー: 日経BP社発売日: 2013/09/12メディア: Kindle版この商品を含むブログ (4件) を見る リスクのあることを知りながら何もアクションをおこさないことは罪である……といったエピソードからこの本は始まるのだけど、もうこの言葉だけで重要なことはほとんど言ってしまっているような感すらあった。自分が今までしてきたのこれは罪だったんだ！ と知らされる衝撃があった。いわゆる罪の文化というのもあるのかなと感じる。 もちろんこのことは導入であって、より詳細に、 リスクとは何なのか リスク管理をする理由・しない理由 リスク管理の方法 といった話がメインの内容として続く。 リスクとは何なのか この本では、リスクとは顕在化する前の問題であり、

ぼくはその日を善く生きたかどうかは AdSense の収益で決まると思っているので、以前にも AdSense のレポートを CLI で確認できるツール を書き、この記事にもあるように tmux のステータスバーに収益を表示していつでも確認できるようにカスタマイズしている。これは具合がよくてずっと使っていたのだけど、最近 tmux.conf をいじっていたらだんだん表示領域が手狭に感じられてきて、ターミナルから追い出したくなってしまった。くわえて、人にターミナルを見せると「ほうほう motemen さんの今月の収益は 9 円ですか……」といらぬ情報を人に与えてしまう問題もあり、ここはひとつ最近はやりの Electron を使ってメニューバーに表示してしまおうということしたのだ。 使用イメージはこちら。ここ7日分の収益を、日別に集計してメニューに表示している。アイコンの隣の数字はその合計（数字

2015-12-08 追記 TypeScript の型定義ファイルリポジトリのデファクト・スタンダードであるところの DefinitelyTyped に無事 Pull Request が取り込まれました ので、今後は DefinitelyTyped のほうを参照していただければと思います！ Google Apps Script は JavaScript っぽい言語で Google 製品の自動化を行える便利環境で、定期実行や外部との HTTP 通信など、意外と痒いところに手が届く出来であり、今となっては身につけておくとよいツールのひとつと言えるでしょう。GAS の開発はおもにオンラインエディタでおこなうこととなっていて、ここで便利なのは補完が効くこと。慣れたエディタで書くこともできるけれど、補完のない環境で、多岐にわたる API をリファレンス引きながら書くというのは心細い。 そもそも JS

こんにちは、はてなチーフアプリケーションエンジニアの id:motemen です。今日ははてなエンジニアアドベントカレンダー2014 の 22 日目として、はてなブログのエントリをローカルと同期するツール blogsync を紹介します。昨日は id:tarao による gulpで依存関係を考慮した自動コンパイル でした。 はてなブログは CMS としても非常に便利に使えるウェブサービスで、実際Mackerel のヘルプもはてなブログで運用しています。ドキュメントのようなコンテンツはいろいろな人が触り、頻繁に書き換えるので変更履歴を残したいところ、また慣れたエディタで編集したいものですが、はてなブログ単体にそういう機能は当然ありません。そこで個人的に はてなブログ AtomPub を用いて、はてなブログのエントリをローカルのファイルシステムに保存するツールを Go で書いて、使ってみていま

今日はスクレイピングの話をします。 今回のターゲットは三菱東京UFJダイレクト。金融機関もウェブサービスを提供するようになり、金にまつわる情報を電子化しやすくなりましたが、かれらが API を提供しているわけではないので、私たちのほうで取得・加工をしてやる必要があります。今やウェブサイトであれば当然のように JavaScript を使っているわけなので、いわゆる mechanize、つまり HTML の解釈をおこない、リンクのクリックやフォームの送信をシンプルに実装するようなやり方でのスクレイピングはすでに無理筋だといえます。 もちろん今日においてはブラウザオートメーションという方法がすでにありますので、これを利用してやれば、なんの憂いもなく実際に人間が使うようなブラウザをプログラマティックに操作することができます。現在は Selenium WebDriver がデファクトで、これが使用す

photo by Thomas Hawk 表題の通りです。実のところ、もう一年も前のことになります。 優秀なエンジニアの多くが自動車免許を所持していないことは有名な事実です[要出典]。私も彼らに憧れ、免許を持たずに生活していましたが、歳を取るにつれ「自分はスーパーハッカーにはなれない」と次第に実感してきたこと、新たな自分に変身したい、という思いと、あまりに暇でヤケになった気持ちから思い立って自動車学校に入学したのが一昨年の年末です。会社に通いながらの教習でしたが、週末と早退・遅刻を活用することで、半年かけて免許を獲得しました。当時のチームメイトに感謝。 すべてを終え、保有者サイドに堕ちてしまった私からそうでないあなた方に伝えられることは……「初心者マークの車に近づくな」。いち歩行者しかなかった頃は車であればどれも同じやろと考えていましたが、運転する側になると全然違う。初心者マークの車は生ま

生命保険といえばときどきテレビで詐欺のニュースやってるなあ、程度の知識しかなかったのだけれど、Kindle で入門してみたらけっこう面白かった。 生命保険のカラクリ 作者: 岩瀬大輔出版社/メーカー: 文藝春秋発売日: 2013/05/10メディア: Kindle版この商品を含むブログを見る 社長（当時）によるまじぽかさんのコスプレでも有名なライフネット生命の副社長（今は社長のようだ）による本。 生命保険の機能 大雑把にまとめると、生命保険には2つの機能がある。 保障（死亡・医療） 貯蓄 保障ってのは普通に考えた意味での保険だ。みんなでお金を出し合って少しずつ積み立てておき、不慮の事態に遭遇した人に一定のお金を支払って扶助してやる、というもの。こういった仕組みで、人々にわたってリスクをならしている。いざという時の備えというのはコツコツと貯蓄をしていれば賄えるはずだが、貯蓄の量がほぼ時間に比

ども、スマホゲーおじさんです。最近スマートフォンのゲームをプレイする機会が多いので、いくつかプレイした中から面白かったものを紹介します。 Android でプレイしてますが、iOS と両方に出てるものも（むしろ iOS の方が先にリリースされているものも）多いです。かなり雑に探索してるので、「このゲームを挙げるのに何でこれがないんだよ」って声は甘受いたしますし、オススメがあったら教えてください。 ソシャゲの定義は「ガチャのあるゲーム」です。 Pro Cat Hugger Extreme いやあこれを紹介したかっただけなんだけど……。かわいい猫をハグしてやるゲーム。猫は次から次に現れるので効率よく抱いてあげよう！　あまり強いと血を吐いて死んじゃうので気をつけて。動画を見たらわかると思うけど、賑やかで楽しい。リーダーボードあり（プレイ人数が少ないので、今なら上位を狙える！）。たぶんアンドロイド

Pusheen Explorer（紹介記事）は素晴らしいサイトですがこれをプルリクエストの応酬に利用するにはただ一点の難がありました。いい画像を見つけてもそれを Markdown としてコメントに含めるのが難しいことです。そこで作った Chrome 拡張がこちら。 Chrome Web Store - Quote Image As Text （リポジトリ） 画像を右クリックした際のコンテキストメニューに「Quote image as text」というのが追加されて、これをクリックするとクリップボードにその画像を貼り付けるタグと、画像が表示されているページ（またはその画像がリンクになっている場合は、リンク先のページ）へのリンクが Markdown 記法でコピーされます。あとはテキストエリアに貼り付けるだけ。簡単ですね！ スクリーンショットと例 上のような場合だと、生成される Markdown

こちらです ☞ JavaScript Libraries Playground（jQuery 2.1.0 と underscore の例） jQuery や underscore などの JavaScript ライブラリをインタラクティブに試したいとき、最近はブラウザで自分のブログ（ここ）や GitHub など、当該のライブラリがロードされていることを知っているページを開いておもむろに ⎇⌘J（Chrome）！　していたのですがこれは直接的ではないなと思ってそれ専用のページを作った次第です。 冒頭の例にもあるように location.search 部に library[@version],… 形式でライブラリを与えてやればページに <script> 要素が追加されて、あとは開発者コンソールなりでお楽しみください、という仕組みになっています。 cdnjs にはかなり多くのライブラリがホストさ

Japanese follows English.（日本人は英語をたどる。*） Pusheen! Meet the world's cutest cat at pusheen.com, who is also famous by her stickers available in facebook messenger. If you have not seen her, take a look at her cute animated gifs, and you will soon like her. There are so many pictures of Pusheen, however, that you are easily in lost while searching for a picture you know you have seen before. Pusheen E

はてなブログの最近の変更で、サイドバーや記事中の script 要素で jQuery がロードされていることを期待しているとうまく動かなくなりました。ブログをおよそ2倍の速さで表示する、などの改善と機能追加を行いました - はてなブログ開発ブログ にも対処方法が書いてありますが、与えられたスクリプトをコピペしているなど、既存のコードに手を加えられない／加えたくないという人は、 デザイン設定 → [カスタマイズ] → [ヘッダ] → [タイトル下] あたりに一行、 <script> var $ = window.$ || function (cb) { setTimeout(function () { $(cb) }, 100) }; </script> なんて書いておくといいですね。スクリプトが $(function () { … }) という形をしている限りはこれで動くはずです。

記事に typo があったとき、見知らぬ人に「s/荻原雪歩/萩原雪歩/」などといったコメントを書き残されることがありますが、それをいちいち適用するのも面倒なので、そのような形の訂正コメントをそのまま記事本文に適用するスクリプトを書きました。この記事でも有効になっています（何が起きるのか分からないと思うので、下部の「例文」をご覧ください）。 設置方法 デザイン編集画面 の「フッタ」部など HTML が書けるところに、以下の内容を貼り付けるだけでインストール完了です。 <script src="http://motemen.github.io/hatenablog-scripts/auto-apply-correction-comments/auto-apply-correction-comments.js"></script> 場所はこのへんですね。 リポジトリ https://github