技術力がないから奇行に走る - 氾濫原
アルゴリズムを原理から実装するみたいなのが相変らずできないわけだけど、そうでないものなら比較的すぐに実装を書けるようになってはきているので、普段の生活でちょっとしたハックみたいなのはコストパフォーマンスが非常に高く、やっていて面白い。 なんとなく以下らへんのスキルを Lv 7/10 ぐらい (Lv5 でギリギリ実用、みたいな) まで上げれたら上から下までできます！！って言えそうだけど、だいぶ遠く感じる。書いたレベルは現状の甘めの自己評価です。スキルポイントが足りてないんで、スキルシミュレーターとかが欲しいですね。 ウェブのフロントエンド (JS, HTML, CSS) Lv7 ウェブのサーバーサイド (Ruby, Perl, JS) Lv7 サーバーミドルウェア (httpd, memcached etc...) Lv5 ネットワーク (ルーティングとか、ネットワーク冗長性とか) Lv3
JS+SVGで液晶画面風の表示をつくる | tech - 氾濫原
液晶風の画面は決まった形をオン・オフするだけなので、canvas にコードで描くのは大変なだけで無駄が多い。かといってセグメントを1つ1つ画像にわけて座標指定で配置していくのも面倒くさい。 と考えていくと SVG を埋めこんで、SVG の要素を JS で操作するのが効率が良い。ワークフローとしては SVG の作成と JS の実装で綺麗に境界を作ることができる。 Inkscape Inkscape の良いところは以下の点 XML エディタが UI と連動している レイヤーやオブジェクトを選択すると該当箇所にエディタ上で跳べる 構造をコントロールしやすい 画像を編集するというより SVG の XML を編集するUIというイメージ Inkscape でオブジェクトに名前をつけると、svg 上では inkscape:label 属性に入る。これを利用して JS から操作すれば Inkscape で
Google Photos 依存からの脱却 | tech - 氾濫原
Google Photos が発狂してからと書いてから、いろいろ見積って画像をセルフホストすることに決めた。とにかくアップロード機能はあとで作るとして、現状の画像が表示されていない状態を是正しなければならない。つまり Google Photos に上がっている画像のうち、日記で使われている画像をこのホスト上にコピーして配信する必要がある。 事前知識 まず Google Picker API 経由で取得した media の id や URL と、Google Photos API は一切互換性がない。もともと念のために Picker 経由で取得した ID っぽいものは保存していたのだけれど、これはまったく使えない。よって、Google Photos 上の全写真のメタデータをすべて取得し、ファイル名マッチによって画像を特定 (つまりファイル名→Google Photos mediaId のマッ
WebUSB HackRF One スペクトラムアナライザー | tech - 氾濫原
HackRF One 用の sweep mode を利用するスペクトラムアナライザーで、いまいち安定して動くものが見つからなかった。WebUSB で書いてブラウザだけあれば動くようにしたら便利かと思い書いてみた。 実装： https://cho45.stfuawsc.com/hackrf-webusb/ レポジトリ https://github.com/cho45/hackrf-sweep-webusb 余計なものをインストールせず、ブラウザで上のURLを開くだけで使えるので普通に便利。だけど WebUSB は今のところ Google Chrome でしか使えない。 実装 HackRF との通信 元々 libhackrf (Cのライブラリ) は libusb を使って実装されている。WebUSB も libusb のほぼそのままの API のラッパーなので、読みかえて実装すれば簡単に移植で
Google は機械だけど、クラウドソーシングは人間なわ… | Fri, Jan 27. 2017 - 氾濫原
Google は機械だけど、クラウドソーシングは人間なわけで、Google が「ハック」されないで勝つためには、Google の機械は人間を超えてないといけない。そうしなければハックされていない検索結果は出せない。この点だけでも、検索エンジンは人知を超えなければ生きのこれないことがわかる。 「ネットの口コミ」を探すとき、今の Google は使えない。Amazon のレビューも信用できない。Twitter で検索したほうが遥かに「ハックされてない」生の口コミが手に入る。そして、結局詳しい情報を得たいなら自分で触ってみるという原点に戻るしかなくなってしまった。 Google はページ滞在時間で有益性を評価していたりするみたいだけど、この評価軸が正しいとは思えない。では何を評価に使うか、何がページの有益性を示すか、というとよくわからない。有益だったかどうかはユーザの心の内にしかなく、極めて主観
ErgoDox ではないナニか。オープンソースかつ Bluetooth 接続のキーボード | tech - 氾濫原
ここ数ヶ月ぐらいキーボードを作っていた。そのためにいろいろ yak-shaving としかいいようがないことも多々していた。 いろいろ書くことが多いので、細かい設計などについては別途エントリを分ける。 コンセンプトとキーレイアウトおよび技術仕様の決定 回路設計とアートワーク・実際の製作 ファームウェアの実装 あたりをそれぞれ別途詳細なエントリを書く。だいたいの人は細かいことはどうでもいいと思うので、概要のみこのエントリにまとめる。 コンセプトや特長 UNIX ベースのキーレイアウト (というかHHKBをベース) とし、違和感なしに分割キーボードとする。 キー配列 UNIX キーボードを2分割した形を基本にする。つまり HHKB とほぼ同じで、Ctrl キーはAの左、ESC は 1 の左など。 矢印キーはどうしても欲しい (HHKB への大きな不満のひとつ) F1〜F12キーもできれば欲しい
YAPC::Asia で「ウェブエンジニアのローレベルプログラミング」という発表をしました | tech - 氾濫原
ちょっと時間に対して話したいことが多すぎて、各分野での掘り下げが足りなかったとは思いますが、一通り下のほうまで盛りこみました。 電子工学について：自分は学校で電子工学を体系的に学んだことはありません。 YAPC 会期中はそこらへん歩いてます。
ngResource は何が便利なのか？ | tech - 氾濫原
ngResource は単にAPIのラッパーという感じではなくて、JS でサーバ側のモデルとうまく同期するように作られている。 最も簡単な例だと以下のように使うが、Entry.get は XHR が完了する前に、とりあえず空のオブジェクトが返るようになっており、XHR の完了とともに破壊的に書きかえられる。これにより、entry の変更がすぐ全体に伝わるようになっている。 var Entry = $resource('/entry/:id'); $scope.entry = Entry.get({ id : 0 }); デフォルトで定義されている query/get/save/delete だけを見ると単に REST API のラッパーのように見えるが、独自のメソッドを追加するとより理解しやすいコードを書ける。 以下のコードは、デフォルトで下書き状態で生成される Entry オブジェクトを
AngularJS の ngResource を既存APIの仕様にあわせる | angularjs | tech - 氾濫原
AngularJS には ngResource という拡張があって、サーバに対する API 経由の CRUD 的操作を JavaScript のオブジェクトとしてラッピングできる。具体的には例えば var Entry = $resource('/entry/:id'); var entry = Entry.get({ id : 0 }, function () { entry.title = "yuno"; entry.$save(); // XHR (async) }); とかできる。ちょっとかっこいいけど、既存APIで使おうとすると、些細なフォーマットの違いで案の定使えなかったりする。どうしても使ってみたいけど、サーバサイドAPIの仕様まで変えたくない場合、若干無理矢理な方法である程度なら対応させることができる。 サーバサイドの仕様 前提として以下のような仕様だとする エントリリスト取
Togetter でまとめられた Twitter ユーザーを一括でブロックするウェブサービス | tech - 氾濫原
を作った。Togetter とかで「ああ、こういう話題に言及する人とは関わりあいたくないな」っていうことが時々あると思いますが、そういうときに使える便利なツールです。 http://block.lab.lowreal.net/ 余談 僕はホワイトリスト的な、つまり Twitter の場合プライベートアカウントだったりあるいは、そもそもフェイスブックだったり、というやりかたが好きではない。当然ホワイトリスト的なソーシャルネットワークのほうが安全ではあるが、新しい思いのよらなさ、というのがないのは詰らない。 しかし一方で、完全にオープンというのも全くよくない。表現をないがしろにするモヒカン的なゴミクズというのはそこらじゅうにいるし、一瞬でも隙を見せれば攻撃してくる人というのもいる。いろいろ面倒なことになるリスクだったり、思いもよらず傷つくリスクのほうが、思いもよらず良いことがある、というメリッ
node_modules を別の場所に置く | tech - 氾濫原
CI とかで、あるディレクトリが毎回削除されて作りなおされ、そのディレクトリに package.json がある場合、毎回 npm install をすると大変非効率なので、別のディレクトリに node_modules ディレクトリを置いてそれを指定して使いたい。 しかし package.json に書かれた依存はそのディレクトリの node_modules ディレクトリにしか置けないようなので、以下のようにした。 任意の場所に node_modules ディレクトリをつくる npm install する前に、package.json があるディレクトリに ln -sf で、上記で作った node_modules ディレクトリへ symlink を貼る npm install する これで、インストール済みモジュールはそのまま使われるようになり、毎回 npm install で何もかもが
Raspberry Pi がきたのでセットアップして I2C デバイスを読むところまで | raspberrypi | tech - 氾濫原
Raspberry Pi だ！ ππだ！！ Raspberry Pi は約5000円ぐらいで買うことができるカードサイズの Linux パソコンです。当然スペックとしてはしょぼいのですが、ホームサーバ用途とかには十分な感じです。 まぁそれだけでも安くて便利なボードなのですが、キモはさらに GPIO (General Purpose IO) がついているところです。基板にピンが立っていて、そのピンを Linux 側から制御できるので、マイコンの延長として使うことができます。普通、マイコンといえども性能が良かったり複雑なインターフェイスをつけようとすると、結構コストがかかるので、多少複雑なことをしたい場合、このような安い Linux コンピュータで比較的富豪的に諸問題を解決するのは個人レベルではかなりコストパフォーマンスが良い気がします。 これです。クリアケース付きです。本体の他に 4GB C
今年買ってよかったものまとめ - 氾濫原
これも買ってから半年ぐらい経ったけど一切不満がないし、これなしではもはや生きていけない。 手で洗うよりも確実に綺麗になるので安心感がある。無理してでも設置する価値が絶対にある。
任意の文字セットで数値をエンコードできる Encode::BaseN | tech - 氾濫原
短縮 URL なんかだと、Base58 (Base64の中から、表示上まぎらわしい文字を削除したもの) を使ってただの数値を短かくする工夫をしていたりするが、それをもうすこし汎用的に使いたいので書いてみた。 https://github.com/cho45/Encode-BaseN 実用性に疑問があるので CPAN にあげてはいない。 経緯 ある文字数制限のあるフィールドに、できるだけ邪魔にならないように数値を埋めこみたいと思った。任意の数字なので、特に bigint になると数字そのままでは文字数がばかにならない。そこで Unicode を使ってエンコードすることを思いついた。バイト数的には不利なのだけれど、文字数による制限であれば、Unicode 文字はたくさんあるのでもっと短くなると考えた。 使う文字セットはなんでもいいけど、ぱっと見で脳が読もうとしない、意味を理解しないものがいいと
氾濫原 [HANRANGEN]
こうする async function loadAsImage(svg) { return new Promise((resolve, reject) => { const svgXml = new XMLSerializer().serializeToString(svg); const blob = new Blob([svgXml], { type: 'image/svg+xml' }); const url = URL.createObjectURL(blob); const img = new Image(); img.onload = () => { URL.revokeObjectURL(url); resolve(img); }; img.onerror = (e) => { URL.revokeObjectURL(url); reject(e); }; img.src =
![氾濫原 [HANRANGEN]](https://cdn-ak-scissors.b.st-hatena.com/image/square/d554b399f7f2d0a20b6380146ec3dc9f957e856c/height=288;version=1;width=512/https%3A%2F%2Flh3.googleusercontent.com%2F-RQ_DKLAHLPk%2FXli8MqbCeaI%2FAAAAAAABwZM%2FQEm-rbJS0jI_YF1jqelVpizgYcw-RMC6wCE0YBhgL%2Fs2048%2FDSC08864-16MP.webp)
プログラムが書けない人に「仕様変更」について説明するには | tech - 氾濫原
「仕様変更」という言葉はプログラム書く人じゃないと、そのイメージが掴めないと思う。イメージが掴めない人に対してそれを説明するとしたら何がいいだろう？ と思った。 とりあえず、料理に例えたらいいのではないかと思ったので、それに例えて考えてみる。 仕様とはレシピのことであり、最終的には具体的に「食べることができる美味しい料理」すなわち「うまく動くプログラム」を作ることを目的としている。 仕様というのは、最初は「イタリア料理」「日本料理」「中華料理」程度しか示されない。当然この時点では方針程度しか考えることができない。食材を買うこともできない。せいぜい使う調味料を揃えるぐらいしかできない。 もう少し進むと、料理名まで具体化される。スパゲティを作りましょうとか、ピザを作りましょうとかだ。とりあえずここまできたら小麦粉を買おうとかまではできるかもしれない。でも実際に作りはじめることはできない。 さら
Ruby, collect or map | ruby - 氾濫原
ずっと collect を使ってきたんだけど、マイノリティなのか。 今日 Symbol#to_proc 関連で map をよく見かけたから、map ってなんだっけーとか思いつつリファレンスをひいたら、あら不思議、collect のシノニムだった。IRC でそんなこと言ってたら「collect ってむしろなんだよ」的で驚いた。 map のほうが短くていいからこれからは map にしようかと思いつつ、やっぱどうも map に慣れないいやそれは当たり前だけど。 そもそもなんで collect を使い始めたんだろう。謎だ。リファレンスマニュアルで map より上にあるからだろうか。 あーそうだ。一応忘れないように印象を書いておいてみる。ちなみに俺は数学がわからんちんな坊やなので、map が写像だとかってのは微塵も知りませんでした。いやもだめすぎなんですが、その辺を考慮してください (謎)。 map
出張 Shibuya.js 24 「正しい Photoshop の使い方」 - 氾濫原
Mozilla 24 の 出張 Shibuya.js 24 で LT しました。 スライドは CodeRepos にコミットしました。psd でプレゼンしましたがたぶん見れない人のほうが多いので png に変換してあります。 出張 Shibuya.js 24 「正しい Photoshop の使い方」変換済み 時間の関係で全部できませんでしたが、実演のシナリオも一応あります。 あのシェルも CodeRepos にコミットしてあります。pshell (追記: SlideShare にもアップしました) Windows 版の CS3 を持っていないのでうごくのかよくわからないですが、基本的にファイルのよみかきしか行なっていないので、ruby と CS3 があればうごくんじゃないかと思います。 追記 そういえば深夜にやっていたライブコーディングにもせかんどらいふさん経由で飛び入り参加しました。ネタ
デザイン≒プログラム - 氾濫原
なんか、どうも、ここ最近ぐるぐると、頭の中をただよっているので、言語化しようと試みるけれど、論理的に書けないかもしれない。 デザイン系の先生のワークプレイスの講義の中で、「デザインみたいにクリエイティブな仕事をするときはこういうワークプレイスが必要ですよねぇ。まぁプログラム書くとかなら必要ないだろうけど、家でもどこでもできるから」みたいな感じのを聞いたのだけど (もちろんこれは正確な引用じゃなくて、日が経って俺の中でいくらかフィルタリングされていると思うのだけど)、それの真意がよくわからない。そんな重要な文脈じゃなかったから、気にするほどではないのだろうけど、どうも頭のなかにしばしばうかんでくる。過剰反応っぽいけどよくわかんない。 なんであそこでプログラミングがでてきたんだろう。プログラミングとかクリエイティブじゃないよねぷぷぷ的な目線だったのかな、とか思ってしまう。 そもそも、なんていう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ひだまりスケッチ×☆☆☆ (みっつといわずに1000個の☆でゆのっち)