No Regrets in Bathing

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

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機能…

MeteorとVue.jsの連携

書いた / “vue.js - MeteorはTwitter連携ログインを作るのがめちゃ楽 - Qiita” http://t.co/fQheVI9hE6— はっしゅろっく (@hashedrock) 2015, 5月 5 Qiitaに書いたのだけれど、以前作ったVue.jsとMeteorのサンプルを完成させた。 セキュリティに関する配慮が…

休日は休まらないし、何も進まない

休日に何をするかというと、雑用か、ゲームか、寝てるかだ。 生産性のあることは何一つしない。かと言ってちゃんと体を休めているかというと、そんなこともなく、普通に夜更かしをしてしまっていたりする。 結構前からこんな感じなのだけれど、そのことで自…

切れてるチーズ

今日はIsomorphic meetupなるものに出席した。 LT枠が埋まってないと思い込んで、直前まで突発LTネタの仕込みをやっていたが、ひどい勘違いだった。何もアクション起こさなくて本当に良かった。 世界初のIsomorphic勉強会だったらしいのだが、歴史解説から、…

「入って後悔した風呂はない」

そして先週書いたgif自動スクリーンショット、めっちゃ今役に立っている— はっしゅろっく (@hashedrock) 2015, 4月 27 入って後悔した風呂はない、の金言を噛みしめる— はっしゅろっく (@hashedrock) 2015, 4月 27 風呂というのは、なぜだか入るまでに敷居が…

ロゴデザインプロセス

そうだ、sushicorpのロゴ作ろう。 1.下書き 2.ベクタでなぞる 3.社名足して完成 こんなのでも無いよりは良かろう。なんかiPhoneゲームでも作ってそうな雰囲気だ。 sushi logoとかで画像検索すると、こんなのよりずっと良いロゴがたくさん表示されるので、世…

コインパーキングのノボリの話

夜中にキーキー音がするので、心霊現象とかだったら嫌だなーと思いながら、よく見てみたら近所のコインパーキングに立ててある「ノボリ」が風でくるくる回って、支柱と擦れて金属音がしていたのが原因だった。 こういうの、勝手にテープでぐるぐる巻きにして…

洗濯絵表示のJIS改訂について

ux

洗濯絵表示が変わる?2014年以降にグローバル化 洗濯絵表示が変わる?2014年以降にグローバル化 | Fashionsnap.com さて、これを見つけて、これだけだとデザイン上問題あるのでは?と素朴に考え、 デザインの練習がてら下記のものを作った。 Webデザインをや…