No Regrets in Bathing

カレーを週に一度食っていく

SVG + Vueで有名なsdrasさんが日本に来るよ、という話

早いもので、Vue Fes Japanまで残すところ2週間程度となりました。 で。 何はおいてもsdrasさんですよ。来日です。 このブログの読者はSVG漬けの毎日を送っていると思うのですが、 SVGアニメーションといえば自分の中ではこの方です。 Sarah Drasner(sdras)…

プログラマー絵茶を開催した&リアルタイム共同開発した

絵茶というのは、お絵かきチャットの略称で、一枚の共有キャンバスにみんなで絵を描くという遊びのこと。 今回は、Twitter上で人を募って2回ほど開催してみたという話。 なぜ開催した 絵を書きたいプログラマーがTL上に増えた気がした(N=2くらい)ので、…

Vue.jsのFAQサイトを作ってみた

scrapbox.io 書いてはみたものの、かなり偏った考えかもしれないので、読むときには多少警戒しながら読んで下さい。あと、色々単純化している説明もあるんですが、まずい説明になっている所もあるかもしれません。こういうの、プルリクとか受け取れればいい…

Excelシートを憎み、愛した男

Excelシートが憎い。 Excelシートでの書類作業の辛さは言わずもがな。 データベースもどき アプリもどき 帳票出力 Excelシート上でのコーディング エビデンス作成 UMLなど 以上のものについて、すべてExcelでの作成経験がある。あの世にもExcelシートを作ら…

vue-cliでビルドしたプロジェクトをgh-pagesにデプロイする

vue-cliでcreateしたプロジェクトは、そのままビルドすると、出力されたdist/index.htmlが/js/vendor.a58fe84b.jsのように、絶対パスでアセットを読みに行く。 基本的にはこれで構わないケースが大半だけれど、Github Pagesにデプロイしたい場合は例外で、プ…

気が散らない作業BGMサービス「#作業してくる」

普段のコーディング中のBGM、基本的にSoundCloudなんだけど、下記が不満だったりする。 まず最初に曲を見繕う作業で時間を10分とか使ってしまう ずっと聞いてると気が散るイベントが発生する 全然違うジャンルに飛ばされる 今ひとつ音の合ってないマッシュア…

グリグリ動くUIをVueとSVGでサクッと書く

これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい!!という一心でやっています。 これらはほとんどSVGと…

Vue.js + SVG練習8 : 付箋を作った&vuexに入門した

ふつーのドラッグ出来たりリサイズ出来たりする付箋。 SVGで作る必要があったのかは謎。 DEMO コードはこちら。 github.com ポイント SVGで複数行のテキストを表示するには、foreignObject + divを使うのが定番らしい。 ただしその場合、IE11は見捨てなけれ…

Vue.js + SVG練習7: 文字がにょろっと出てくるやつ

動いてるところは下記ツイートから見れる(gifがでかくなりすぎてはてなにアップロードできなかった) 文字をアニメーションさせて遊ぶやつができた https://t.co/mTYNrkBLxi pic.twitter.com/UT4inhu0My— はっしゅろっく (@hashedrock) 2017年11月18日 デモ…

Vue.js + SVG練習6: ズーム&パンできる折れ線グラフを書く

ズーム&パンできる折れ線グラフを書いた。グリッドライン付き。 こういったグラフや、ズーム・パンはd3の得意技なのだけれど、あえてSVGを組み上げる部分をd3でやらずVueのテンプレート側でやっている。 スケーリングや、グリッドラインの位置決めなんかは…

Vue + TypeScript + poiで小さいプロジェクトを作る時の手順

TypeScriptを使いたい、型に守られたいという気持ちが定期的に生まれるのだけど、 ただwebpack.config.jsとtsconfig.jsonが上手く書けなくてしんどいみたいなことがままある。 お仕事的に、TypeScript + Vueでやっていくぞというのは下記のダーシノさんのス…

Vue.js + SVG練習5: クリックすると頑張るスピナー

ただし、やりすぎると爆発する。 動作確認は以下より。 hashrock-sandbox.github.io ソースはこちら。 github.com ポイント 小ネタなので特にないかな… 早めに寝たいので、短い時間で実装できる題材を結構考えた 小ジャンプは、2次関数でやるパターンと、y変…

Vue.js + SVG練習4 : クリックで音の鳴るピアノ鍵盤

SVGをグラフィックエディタでいじる方針のリベンジをしたかったので、今回は下記のようなピアノを作った。 下記から動いているところを試せる(音が出ます) hashrock-sandbox.github.io 前回Inkscapeで撃沈したあと、色々試した所、Method Drawというオンラ…

Vue.js + SVG練習3 : こっそり戻ろうとするスライダー

3作目。こっそり戻るスライダーを実装しよう。 素のSVG手書きするのちょっと辛すぎたんでInkscapeを使うことにした。 Inkscapeも辛くないということはまったくないけど…、うーん。Sketchの方が楽かな。Mac版は持ってるんだけど。 こんな感じ。 で、動かした…

ちょっとVue component試作したいときにpoiを使う

Vue.jsは「vue-cli」という便利なCLIツールがあって、下記のコマンドでvueファイルの単体起動をすることが出来た。 vue build MyComponent.vue で、この機能なんだけど、いつの間にか削除されていたようだ。 もともとegoistさんという方がvbuildというツール…

Vue.js + SVG練習2 : Sparkline

あまり体調がよくない(言い訳)ので、今日は軽め。 何の変哲もないsparkline。可愛くもなんともない。 Sparkline.vue <template> <svg width="300" height="50"> <polyline fill="none" stroke="#793" :points="points"></polyline> </svg> </template> <script> export default { data(){ return { dat: [] } }, computed:{ points(){ return this.dat.map((item, i)=…

Vue.js + SVG練習1

Vue + SVGで色々UIを作っているんだけど、素振りが必要だと感じたので、変なものをこしらえて引き出しを増やしていこうと思う。 一作目。 コードはグダグダですみません… CuteButton.vue <template> <svg width="400" height="80" @mousemove="over"> <rect width="200" height="50" rx="8" ry="8" x="20" y="20"> </rect> <text x="120" y="54" text-anchor="middle">I am Button!</text> </svg></template>

プレーンテキストから4コママンガに変換出来るツールを作った

白ハゲ4コマメーカー リリースしました!テキストを入力してポンポンスタンプを押すだけで4コマ漫画を作れます。※Twitterに直接画像をアップロードする機能はないので、ローカルに一旦保存してくださいhttps://t.co/RCX183cdW8#白ハゲ4コマメーカー pic.t…

Markdownから日本企業っぽいメールに変換出来るツールを作った

Markdown -> 日本企業メールコンバータできた https://t.co/kw67jEpi0Z pic.twitter.com/9qOTW5uQQV— はっしゅろっく (@hashedrock) 2017年5月1日 DEMO Source かなりバグが残っている(ひどいのは、インライン要素は全部消えてしまう)ので、胸をはれるよう…

ポケモンGoが国内でリリースされて二日目

ポケモンGoは初日に飛びついた。今時のゲームは攻略情報が過多ですぐスポイルされてしまうし、ガチ勢と差がつきすぎてやる気を削がれるので、楽しみたいなら情報のないうちに飛び込むしかない。 で、個人的には結構楽しんでいる。この規模で社会的な何かが起…

フロントエンドで使ってるものがあまり変わってない

自分のスタックはあまり変わっていない。ほとんど10年のツケを払っていない。学習能力が低いせいでもあり、選んだスタックがバージョンを重ねている成果でもある。 毎回使う フレームワーク:Vue.js 消耗、などの意見が散見されたが、べつに今でも便利に使え…

なぜCLIツールの入力は戻れないのか

例えばnpm initは最初にこんな感じのダイアログが出ます。 name: (test) test version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: yeomanとかも一緒です。 これ、基本的にEnterを連打する類のものでは…

2015年振り返り

振り返っても大したことをしていないような気もする。 そもそも1年って区切りはどうなんだろう。毎年12月になってから、あっやべえ今年なんもしてねえや、ってなっている気がする。4半期ごとに反省すべきなのではないか?常に反省しろという話はある。 …

リモートから鮨を送り込むコマンド

SushiCorp Advent Calendar 2015の15日目です。 新作です。 スマホをリモコンにして、手持ちのサーバにsushiを送り込めたら最高ですね。 動作の様子 sushibtn sushi "echo sushi"とかやると、リモコンサーバが起動し、ボタンを押すとecho sushiが実行されま…

鮨のローディングアニメーション

Sushicorp Advent Calender 2015の8日目です。 ページローディング中は、読込中を表すスピナーを回す習わしになっていますね。 でも、これって一体何でしたっけ? そもそもなんでこれを回してるのか、よく考えると意味がわかりませんね。 待たされてる感があ…

鮨の物理演算

Sushicorp Advent Calender 2015の一日目です。 親方!空からsushiが! http://hashrock-sandbox.github.io/study-matterjs/ matter.jsとても簡単ですね。 デフォルトレンダラが大変有能で、デフォルトでワイヤーフレームON、 OFFの場合は指定したテクスチャ…

ごはんデッキ構築

ある程度見栄えのする食卓にするには、一汁三菜にする必要がある。 しかし一汁はともかく、三菜を毎日考えるのはつらい。 一日に下せる判断の数は限られていると聞く。 食べるくらいのことでいちいち考えたくない。 思考ルーチンを固めておきたいところだ。 …

地下鉄、じいさん

電車に乗ったら、誰かが叫んでいた。 見ると、じいさんが何か叫んでいて、傍らの奥さんらしきおばあさんが「いいのよ、やめて」って言っていた。 誰かがおばあさんに何かして、それをじいさんが咎めているのか?と思ったのだけど、どうも様子が違った。どう…

ブレながら進む

golangやったり、meteorやったり、schemeやったりcssやったりと、最近は中途半端でブレブレである。 というか、人生全体そんな感じで器用貧乏で、密度高く生きている人を横目にみると効率が悪くて悲しくなる。 ただ、ぶれて損をしたこともそんなになくて、む…

静的サイトジェネレータ使い比べ

ちょっとしたサイトを作るときの「よっこいせ」感を軽減したいと思った。 というわけで、静的サイトジェネレータをいろいろ使い比べてみる。 選定ポイント gh-pagesへのデプロイが簡単か ワークフローが短いやつがよい 反映速度 ローカルプレビュー blog機能…