not good but great

プログラミング、アート、映画・本の感想について書きます。

Javascript

AWS API GatewayとLambdaを使い、Facebook Messenger Botでおうむ返し

AWS API GatewayとAWS Lambdaを使い、Facebook Messenger Botでおうむ返しを実装します。 下記を参考にしました。 AWS API GatewayとAWS Lambdaで、Facebook Botを作成する - Qiita 受信用のpostリクエストを確認するためのcurlコマンドを入力しても自分はな…

threejsのbuffergeometry exampleをes6で書いてみた

poop particles buffergeometry example buffergeometryを使えば、よりWebGLネイティヴに近い書き方ができるらしい。Particle(頂点だけなので四角)を大量に描画することに向いている。 three.js examples es6記法で書き直す exampleはシンプルに書かれている…

Reactjsをまたやり始めた

Reactを再開した理由 大規模データビジュアライズがやりたく、WebGLを勉強したりしていた。Uberが作ったライブラリ、react-map-glが要件を満たしていた。それがreactを使っていたので、やり始めた。 Engineering Intelligence Through Data Visualization at…

TokyoJS 2.1 @ Abeja INCに参加した

こちらに参加した。 TokyoJS 2.1 @ Abeja INC - TokyoJS (東京) - Meetup メモ vuejs Vue.js in production // Speaker Deck Hello Vue.js - JSFiddle dashboardで使った abeja 開発者 evan youさん angularチーム desiger,corder scaffoliding webpackでvue…

Browserifyでplumberがあるのに落ちてしまうときの対処法

qiita.com 2014年とちょっと前の記事だけど、これで解決した。

Perlin Noise, Flow Fieldで線を引く

http://naoyashiga.github.io/p5.js-playground/sketches/generative/perlinFlow/ ・参考 Coding Challenge #24: Perlin Noise Flow Field - YouTube

p5jsとConvNetJSでClassification

ConvNetjsのdemoを参考に、自分でもデモを作ってみた。 ConvNetJS demo: Classify toy 2D data 描画にはp5jsを使った。ブラウザ実行なので学習に時間が掛かる。Canvasのサイズを大きくするととても遅くなるので、400pxの正方形くらいがちょうど良いサイズ。 …

d3.js,ES6のBoilerplateの紹介

これを使えばいいかも。 Packet-Clearing-House/d3-es6-boilerplate: Boilerplate for D3 projects with Javascript ES6 (Babel), ESLint, Gulp, Bower

recurrentJSのデモをReactで動かす環境

Interactive Abstract Pattern Generation Javascript Demo | 大トロ こちらの記事を読んだ。recurrentJSというRNNを実装したライブラリ。 RecurrentJS Sentence Memorization Demo 開くと重いので注意。こちらのデモをReactで書いたのが下のリポジトリ。 lu…

JSで形態素解析するならkuromoji

形態素解析 これからはchatbotが流行るらしい。nodeでchatbotを動かすこともあるだろう。MeCabで形態素解析は聞いたことあるけどjsではどうやるのか調べてみた。そしたらkuromojiというのが有名らしい。 $npm install --save kuromoji kuromoji 英語 英語な…

Reactjsをやってみた

Reactjsを始める Webサービス作ってみるかとふと思い、内容を考えた結果Reactjsで作ったら良いかもしれないと思った。だからReactjsを始めた。 環境構築 モダンなフロントエンド環境構築に疎かったので、Qiitaで最近の投稿を参考にした。 作って壊せるReact…

p5.jsを触ってみた

processingをjsで実行できるp5.jsを触ってみた。 とりあえずデモをいじってみる。 http://p5js.org/examples/examples/Math_Noise_Wave.php http://naoyashiga.github.io/p5.js-playground/sketches/noiseWave/ ドキュメントのtypoを直して徳を高めた。 Upda…

fladdictさんのFillを参考にして、Paper.jsで遊んでみた

http://codepen.io/naoyashiga/full/oXzKLL/codepen.io 久しぶりにPaper.js使ってみた。fladdictさんのFillをかなり参考にした。こういう気持ちいいアニメーションを作ることは楽しいw・参考 http://fladdict.net/sketches/fillfillfill/index.html

PhantomJSでclickができないときはsetTimeoutで待ち時間を設ける

ブラウザ上の操作を自動化したくて、どうやるか調べたらPhantomJSが出てきた。CasperJSなんかもあるらしい。・参考 こちらをかなり参考にした。 PhantomJS でログインが必要なページでも自由自在にスクレイピング - 凹みTips ボタンをクリックする var left,…

Qiitaのデザインが変更されて見づらいと思ったので、背景色を変更するChrome拡張「Qiita Color Change」を作ってみました

Qiita Color Change - Chrome ウェブストア Qiitaのデザインが変更された。なんじゃこりゃ!と思った。緑色背景に白色文字はチカチカして読みづらい。そこで緑色をうすくして、文字色をうすい黒にした。Adevent Calendarの赤色にも対応している。退勤後、2時…

スクロール値によって要素の幅を変える

パララックス?というか、スクロール値で変化を起こすページをライブラリを使わずに作れるかやろうと思った。 ライブラリもある もちろんSkrollrという使いやすいライブラリもある。簡単に書きたいなら、ライブラリを使ったほうが良いと思う笑。 GitHub - Pri…

Chrome拡張「No Xvideos」の多言語対応をやった

https://chrome.google.com/webstore/detail/no-xvideos/ojecpfeafpnfhdlcimjkoadochmejebp?hl=ja&utm_source=chrome-ntp-icon https://chrome.google.com/webstore/detail/no-xvideos/ojecpfeafpnfhdlcimjkoadochmejebp?hl=ja&utm_source=chrome-ntp-iconCh…

Likeボタンクリッカーつくった

カチカチカチカチという音が部屋に鳴り響いた。

Web Speech Synthesisを使ってブラウザで音声読み上げをしてみる

Web Speech Synthesisを使って音声読み上げをしてみました。音が出ます。PC版Chrome推奨です。 イチラブインターネットドットイットイズファン「I love Internet.It is fun.」を日本語音声で読ませたら「イチラブインターネットドットイットイズファン」にな…

Three.jsのPointCloudを使ってGL_POINTSを大量に描画する

See the Pen 450,000 GL_POINTS by naoyashiga (@naoyashiga) on CodePen. Three.jsのPointCloudを使って、四角をたくさん描画してみました。この四角はGL_POINTSと呼ばれるもので、WebGLにおいて頂点の役割を果たしています。PointCloudはこのGL_POINTSの集…

Three.jsを使ってモバイルでグリグリ動かすのは難しいと思った

See the Pen Sparkle Particles by naoyashiga (@naoyashiga) on CodePen.three.jsのexampleに載っている、このコードをかなりパクって参考にしました。 three.js examples

道端カレン、道端ジェシカ、道端アンジェリカを見分けるクイズを作った

道端三姉妹を見分けるクイズです。問題は永遠に続きます。 http://naoyashiga.github.io/Michibata_Sisters_Quiz/app/ モバイルから見るとこんな感じ見えます。少し画像が大きいかもしれません。

Web Starter Kitでgulpして"Cannot find module"が出た時の対処法

gulp serveはできた 昨日の続きです。 ・昨日のエントリ Google製「Web Starter Kit」を使うための環境設定 - not good but great $gulp serve はうまくできて、サーバが立ち上がったところまでを書きました。てっきりgulpもできていると思ったら、エラーが…

Google製「Web Starter Kit」を使うための環境設定

https://developers.google.com/web/starter-kit/Google、I/Oカンファレンスを控えてマルチプラットフォーム・ウェブアプリのテンプレート、Web Starter Kitを発表 | TechCrunch JapanGithubのtrendingで1位だったので使ってみることにしました。最近自分はg…

javascriptでbuttonタグで作成されたボタンを無効にする

document.getElementsByClassName("testBtn")[0].disabled = true; buttonタグで作成されたボタンを無効にするには、上のように書きます。disabled属性をtrueにすると無効になります。

Gruntのタスク管理を使い始めて、改めて「サーバって何だっけ?」と思った

Gruntは便利 GruntでLiveReloadを導入したり、css、jsの圧縮化をするようになりました。 GitHub - gruntjs/grunt-contrib-cssmin: Compress CSS files.http://www.un-t.com/interactive/?p=302JSHint入門 - JSHintを使ってJSコードの信頼性を高める - Qiita

jQueryでスクロールをアニメーションさせる

sampleという文字をクリックすると、aaaaaまで下がります。ページ内アニメーションで使えるかもです。jQueryを扱うときは「$(function(){});」で囲むことを忘れないように・・・。・参考 http://www.finefinefine.jp/web/kiji1388/

display:flexがモバイルで効かないときはdisplay:boxで代用する

真木よう子Viewer ver1.01 先日のエントリに引き続き「真木よう子Viewer」を作っていました。AngularJSの恩恵を十分に受けていないようなペラ一枚のページになっています・・・。

AngularJSを使って「真木よう子Viewer」を作り始めた

「真木よう子Viewer」とは? demo Yoko Maki Viewer

汎用性の高いコードを学ぶためにAngularJSを始めました

AngularJSを始めた もっと汎用性の高いコードを書きたい Processing.jsとかPaper.jsとかjsにおける演出の部分ばかりを最近触れていました。また就職に伴い、jsをやってる人が周りに増えてきました。その印象ではbackboneやAngularJSなどのWebアプリケーショ…