Vue.jsTwitterFacebookはてブPocketきっかけは忘れたけどcontenteditable属性というものを知った。Paperやcacooなど、主にオンラインエディタ的なサービスでよく使われている。「contenteditable属性を使った何かをつくる」という目標を掲げて、100マス計算アプリを作ったので、それをサンプルにcontenteditableについて書こうと思う。2017」の11日目の記事です。SIerからフロントエンドエンジニアにジョブチェンジして早2年。主な仕事内容は、さくらのクラウドのネタ機能開発と自社サービスのエゴサをすること。前職とはうってかわって、楽しみながら仕事をしている!ということで、当記事ではいままでにリリースしてきたネタ機能の紹介と、リリースまでこぎつけた「遊び心を実現する技術」について書こうと思う。※若干ポエミーですが許してください。Proのインカメラを使ってバーコード(QRコードではない)を読み取れないか考えていたところ、Quagga.jsというライブラリを見つけた。このライブラリは、画像ファイルだけでなくカメラを使ってリアルタイムでバーコードを読み取ることもできる。今回はQuagga.jsを使って画像ファイルからバーコードを読み取れるようにする。MBPのカメラだと認識率が悪いのでどうにかしたい。Vue.jsTwitterFacebookはてブPocket初期のシンセサイザーは、単音しか発音できなかった。いわゆる管楽器みたいなポジション。コード(和音)を鳴らしたい場合は複数台のシンセサイザーが必要だった。いうことで、今回はコードを鳴らすために複数のオシレーターを使い、それらの音源をミックスして鳴らそうと思う。OscillatorNodeやGainNodeの詳しい説明は、以下の記事を参照してほしい。Vue.jsTwitterFacebookはてブPocket前回までにキーボードをつくったり、オシレータをつくったり、オシロスコープをつくったりした。今回は音の三要素の最後の1つ、音量をコントロールする。エンベロープジェネレータを用い、ADSR(Attack/Decay/Sustain/Release)をコントロールするとともに、エンベロープをグラフ表示する。ADSRとは?Attack/Decay/Sustain/Releaseの頭文字をとったもので、音量をコントロールする機能。Attack(立ち上がり)発音(打鍵)されてから最大音量になるまでの時間Decay(減衰)最大音量になってからSustainのレベルになるまでの時間Sustain(保持)Decay後の音量。発音中はずっとSustainレベルが保持されるRelease(余韻)離鍵されてから音量が0になるまでの時間この4つのパラメータを弄ることで「ドンッ!!」とか「ほわぁ〜ん」とかいう音を作ることができる。Vue.jsTwitterFacebookはてブPocket前回、いろんな音がだせるオシレーターをつくった。音が出せるようになったら、やっぱりどんな波形か見たくなるのが世の常。APIとSVG/Canvasをつかってオシロスコープをつくる。パフォーマンス検証のためSVGとCanvasの双方をつかったが、サンプルが小さかったこともあり違いは見られなかった。APIとVue.jsでシンプルなシンセサイザーをつくった。「シンプル」ということで正弦波(サイン波)しか鳴らせない。いろんな音を鳴らしたい!ということで正弦波はもちろん、矩形波、ノコギリ波、三角波、カスタム波形をだせるオシレーターをつくる。機能としては以下のとおり。APIを勉強しはじめた。今回は、その第一歩として88鍵のキーボードを表示し、クリックしたら音がなるものをつくろうと思う。Vue.jsを使っているのは、要素の生成やイベントハンドリングを楽にするためだ。Messageという機能が追加された。この機能はBotやAppからのリプライにリストやボタンを含めて返すもので、Bot/Appの表現の幅が広がった。いうことで、実際にNode.js+Botkitで試してみようと思う!ただ、実装しようとググっても、BotkitのExampleを使ってもどうにも動かなくてかなりハマったので、なるべく丁寧に解説しようと思う。今回使う環境は以下のとおり。フレームワークTwitterFacebookはてブPocketVue.jsで小規模なSPAを開発している。Vuexを導入するほどでもなく、Vue.jsの標準機能でコンポーネント間でデータをやりとりする方法がないか考えていた。upでデータのやりとりができる。子子コンポーネント間(いわゆる兄弟間)はどうするのが良いのかを3つのパターンを紹介する。親子コンポーネント間のデータのやり取りについては、以下の記事を参照してほしい。Vue.jsTwitterFacebookはてブPocketVue.jsでフォームバリデーションをするとき、以前ならvue-validatorという公式コンポーネントがあった。vue@2.0のリリースにともない公式から外れてしまった。コアに必要なくっているのと、開発時間をキープするのが難しくなっているということで。input要素のバリデーション用の属性を思い出した。input要素の設定でフォームバリデーションを行う。Vue.jsTwitterFacebookはてブPocket2年ほど前に以下のような「Vue.jsでページネーションをつくる」系の記事を書いた。2年前の記事なのでVue.jsのバージョンもv0.12とかなり古い。これらの記事を参考にしてくだっている方の中に、バージョンが違うことでハマっている方がいらっしゃった。いうことで、Vue2.x系で書き直す。動作イメージは以下のとおり。使用してるバージョンは以下のとおり。golangTwitterFacebookはてブPocket以前、Node.js+botkitでSlack用botを作成した。botを作ってみたい欲が湧いてきたのだが、いつもどおりNode.jsで書いてしまうと他の言語が全然勉強できないので、今回はgolangを使って書いてみた。Appの登録・設定・作成し、ユーザからのメッセージに対して応答するシンプルなbotを作成する。APIのページが完全に迷いの森で、慣れるまでどこで何が設定できるのかわかならい。そのため、スクリーンショット多めで説明する。E)がリリースされた。2.5からはvue.jsのAPIのままTypeScriptで開発できるようになった。2.4以前のTypeScriptでの開発については、以下の記事を参照してほしい。2.5を使ってTypeScriptで実装する方法をまとめる。2.4から2.5へのアップデート方法もまとめる。実装するにあたりハマった点があるので、参考になればと思う。APIをつかってゲームをつくろうとしている。自作ゲームエンジンで!ということで前回Canvas上に表示したオブジェクトをキーボード操作で移動させる方法をまとめた。今回はその続きで、移動させたオブジェクトが他の何らかのオブジェクトに当たったときの判定(当たり判定、衝突判定)を実装する。Designの原則を取り入れ開発しており、イメージ用コンポーネントを作っていた。(NotFound)」というエラーになってしまった。Vue.jsのGitHub上にあるIssueの内容も古く(Vue1.x系)対応できなかったが、いろいろ試したら解消できた。そこで、対処法をまとめる。JavaScriptTwitterFacebookはてブPocketCanvas+JavaScriptでゲームをつくろうとしている。自作ゲームエンジンで!その第一歩として、Canvasに表示したオブジェクト(Player)をキーボード操作で移動させる方法をまとめる。ゲームエンジンの基本は無限ループゲームの基本は無限ループなので、以下のような流れで処理していく。Canvasをクリアする(白紙に戻す)キーボード操作などを受け付るオブジェクトの座標や画像を変更するCanvasに描画する1に戻ってループするこのループをfps30なら1秒間に30回、fps60なら1秒間に60回繰り返す。ループ内でキーボード操作(keydown、keypress、keyupなど)を取得し、オブジェクトの座標を変更することで、移動させることができる。アルゴリズムTwitterFacebookはてブPocket頭の体操のためにCanvasを用いたフィルタリングを学びはじめた。当記事では、画像フィルターの中でも(独断と偏見で選んだ)代表的な9つの画像処理アルゴリズムを解説する。グレースケール色調反転(ネガポジ変換)二値化ガンマ補正ブラー(ぼかし)シャープ化(輪郭強調)メディアンフィルタエンボスモザイクたたみ込み演算を知らなくても、理解していただけると思う。レビューTwitterFacebookはてブPocket昼食を完全食COMPにかえて1ヶ月たったので、経緯や感想を綴ろうと思う。Standard.、SAVASホエイプロテインとの組み合わせについても書く。バランスのとれた食事がしたい。IT業界に従事するエンジニアたちの多くは、このような悩みを抱えながら不健康な生活を送っている。ランチ問題を改善したい不健康な生活の要因には、長時間労働や精神的ストレスの他に「食事」がある。IT業界に身を置く人は基本非モテで独身なので不摂生な人が多い。私の場合は、会社にいるときの「昼食」に問題があった。ランチメイト症候群、昼休みの時間、栄養バランス......。意識が高かったころは、毎日手作りお弁当を持参していた。ランチに出かけたり、社内販売のお弁当を買ったりしていた。栄養バランスとはかけ離れた食事しかとれない。この問題を解決するために、完全食COMPの購入を決意した。Vue.jsTwitterFacebookはてブPocket2年以上前にVue.jsでTypeScriptを使ってChrome拡張機能をつくった経験がある。今では、Vue.jsも公式で型定義を提供している。TypeScriptのサポートも手厚くなり、型のある環境での開発が楽になっているらしいが......。startedのような最小構成にはしたくない。いうことで、vue-cliのwebpackテンプレートをベースに、とにかく楽してVue.jsプロジェクトでTypeScriptを使えるようにする。v2.4.2vue2.5以降でvue-class-componentのデコレータを使わない方法は、以下の記事を参照ください。JavaScriptTwitterFacebookはてブPocketTwitterのアイコン・ヘッダー画像のアップロード機能のように、画像を読み込み、ブラウザ上で簡単な編集・トリミング加工し、画像ファイルとして出力したい。調べてみると、HTML5のCanvasを使えばできることがわかった。いうことで、Canvasで画像のズームイン・アウト(拡大縮小)、トリミング(切り取り)する方法をまとめる。↓こんな感じのを実装する。親から子へはPropsでデータを渡し、子から親へはEmitでデータを渡す。そんな面倒なことするより親コンポーネントから子コンポーネントにコールバック関数を渡して、なんらかのイベントが発生したらコールバックを実行してくれたほうがシンプルになるんじゃ?と思いついた。Eventsについて調べたので、両方の実装方法とどちらが良いのかをまとめる。Events)については、以下の記事を参照してほしい。JudyCSSスプライトのようにbackground-positionで表示位置を調整して疑似トリミングを実現することもできるが、今回はHTML5のCanvasを使ってトリミングする方法をまとめる。CSSスプライトについては、以下の記事を参照ください。APIを使ってイメージ・コンテナを操作する方法を覚えたので、次はDockerfileからイメージを作成し、実行する方法を学んだ。APIの基本的な使い方は以下の記事を参照ください。ハマったので、皆さんの助けになればと思う。RamirezプログラムからDockerのイメージやコンテナの操作をして、必要に応じてコンテナを起動したり停止したりというサービスをつくろうとしていた。調べたので、Go言語(以下、Golangと呼ぶ)からDockerのイメージやコンテナの操作をする方法をまとめる。Dockerはコンテナ仮想化ツールで、Golangで開発されている。Engineのクライアント(moby/client)をそのままGolangで使える。Dockerの詳しい説明は省略する今回はMobyを使ってイメージの作成・削除、コンテナの起動・停止を行う。SQLiteTwitterFacebookはてブPocketgolangでツールをつくるためにデータベースがほしかった。Server、Oracleなど多種多様なDBMSがあるのだが、環境構築に消耗したくないということでSQLite3を選択。小規模、もしくは大規模なサービスをつくるならORMを使うより直接SQLite3を操作したほうが問題が少なくすみそう。いうことで、当記事ではgolangからライブラリなどを使わずSQLite3を操作する方法をまとめる。ToolsTwitterFacebookはてブPocket当ブログ(Blogger)ではシンタックスハイライトを実現するために、SyntaxHighlighterを使っている。シンタックスハイライト」でググるといっぱいでてくるので、多くのBloggerユーザに使われていると思う。最近SyntaxHighlighterに不満を覚えてきた。読み込みファイルが多いv3でダイナミックローディングが実装されたけど詳細は不明httpsにするとシンタックスハイライトされない長期間メンテナンスされていない比較的新しい言語がサポートされていないTypeScriptGolangなど行番号や行のハイライト、ファイル名の追加など、機能は充実しているだけにもったいない。そこで多くの言語をサポートしているhighlight.jsに移行してみた(執筆時点では順次移行中)ちなみにCDNで提供されているライブラリはハイライトしてほしい言語が入っていなかったので、自分のDropboxでホスティングする。コラムTwitterFacebookはてブPocket2017年7月24日〜8月4日、総務省企画のプロジェクト「テレワーク・デイ」が開催されていたのはご存知だろうか?きたる2020年7月24日は東京オリンピックの開会式。交通機関や道路の混雑をさけるため、始業〜10時半までは一斉にテレワークして混雑緩和に努めましょうという企画だ。弊社もテレワーク・デイ実施企業になっており、せっかくなのでお盆の帰省も兼ねて7月24日〜8月4日までテレワーク@実家を実施した。実際に長期間のテレワークを体験したことで課題が見えてきた。今後「多様な働き方が実現する社会」を期待して、体験したことを共有したい。golangTwitterFacebookはてブPocket仕事でGo言語を使う予定ができたので、本腰を入れて学んでみようと思う。worldするまでをまとめる。HTML/CSSTwitterFacebookはてブPocket2000年代のホームページで多用されていたMarquee要素(文字が動くエフェクト)の仕様はすでに廃止されており、いずれブラウザ上で表示できなくなってしまう。文字を動かしたい需要はまだ残っている(はず)代替としてCSSアニメーションをつかったMarqueeの実装方法がある。JavaScriptは不要だ。ついでにサンプルで、Marqueeを使った新幹線車内メディアの電子文字広告をつくってみた。JavaScriptTwitterFacebookはてブPocket会社ではジョギングサークルに所属していて、東京体育館周辺で活動している。久しぶりに活動に参加しようと東京体育館に行ったところ休館でロッカーが使えなかった。結局その日は活動できず、1時間くらい雑談しているなかで「休館日を監視しよう!」という話になり、スクレイピングで休館日一覧を取得できないか考えた。サーバサイドで動かしたいので、言語はNode.jsを選択。Node.jsではDOM操作ができない。そこでcheerio-httpcliをつかってjQueryライクなスクレイピングをしようと思う。RamirezNode.jsでツールをつくって公開するとき、または公開されているツールを使うとき、いちいちnodeの実行環境を整え、npmで大量のnode_modulesをインストールしなければならない。普段からNode.jsの環境を整えている人ならいいけど、ためしに使ってみようかな?と思う層にはハードルがちょっと高い気がする。ローカル環境を汚さず、もっと簡単に実行できないか?と考えた結果、Dockerのコンテナに実行環境をつくり、処理結果だけを返してくれるようにすれば便利なんじゃない?と思いついたので当記事で方法を紹介する。フレームワークTwitterFacebookはてブPocketフロントエンドエンジニアという肩書きになってからもうすぐ2年が経とうとしているのだが、未だに思い通りにCSSを操ることができない。圧倒的CSS力の欠如だ。CSS力を高めるために、難易度がそれほど高くなく、かつよく使われそうな会話風吹き出しを作って練習しようと思った。それだけじゃ物足りないので、Vue.jsも使って動的なものを作りたい。当記事では、会話風吹き出しをつかってLINE風チャットアプリのつくり方を解説する。このライブラリはゾーンファイル→JSON、JSON→ゾーンファイルに変換できる。いうことで、dns-zonefileを使い方を紹介する。CLIで実行できるが、今回はimportして利用する方法をまとめる。ShellTwitterFacebookはてブPocket「入門UNIXシェルプログラミング」を読んだこともあり、シェルスクリプト書きたい熱が高まっていた。そこで手始めにサーバの初期設定を行うシェルスクリプト(↓こんな感じ)を書いていた。この記事では、CentOSのバージョンをユーザに入力してもらっていたのだが、そこも自動化するためにシェルスクリプト内でバージョンの判定できないかな?と思ったのだが、ちょっと躓いたので共有もかねてまとめる。Scroll(無限スクロール)とは、TwitterやfacebookをはじめとしたSNSやモバイルアプリなどでよく使われている、スクロールすることで自動的に次のコンテンツを読み込む機能だ。従来のページネーションでは、1ページに表示できるコンテンツが限られたり、「Prev/Next」などのボタンをクリックすることで以降のコンテンツを読み込んだり、モバイルユーザには不便な点が多い。そのため、モバイルデバイスではボタンによる更新よりも無限スクロールのほうが好んで使われている。Scrollの実装方法をまとめる。AstudilloVue.jsを開発しているとおのずとViewModel(computedやmethodsなど)が肥大化してしまう。Vuexを使ってActionsやMutationsに処理を掃き出すこともできるが、小規模アプリケーションだと逆に面倒だ。そもそもVuexは状態管理ライブラリなので、処理の共通化を目的に導入することもおかしな気もする。みたいに直接メソッド名が指定できないので結局ViewModelが肥大化してしまう。何か良い方法はないかとドキュメントを読んでいたところ、Mixin(ミックスイン)を使うことで解消できるらしい。いうことで、Mixin機能を使ってViewModelをスリムにしようと思う。JavaScriptTwitterFacebookはてブPocketSNSをはじめ、個人を識別するためにユーザ名とは別にアイコンが使われることが多い。そのなかでもGitHubの初期アイコンのような、機械的に生成したアイコンを「アイデンティコン(Identicon)」と呼ぶ。JavaScriptでアイデンティコンを生成するツールをつくったので、その説明をする。具体的な処理は、以下の3つだ。JavaScriptTwitterFacebookはてブPocketフロントエンドの開発をやっているとAPIはできてないけど実装しなければならない、という状況が少なからずある。そんなときに便利なのがjson-serverというライブラリだ。APIのモックサーバを立てる(いやマジで)」と書かれているとおり、jsonファイルを用意するだけでAPIサーバを立てられるというものだ。当記事の目標は、json-serverの使い方を覚えて、Node.jsのテスト駆動開発をできるようにする。JavaScriptTwitterFacebookはてブPocketArray.prototype.reduceを説明する際、必ずといってよいほど以下のような数字を順に足していくだけのサンプルコードが添えられている。currentValue;});こういうサンプルをみて思うのが、「実際に1〜10の数字を足す場面なんてなくない?」ということ。たしかにreduceが何者なのかは理解できるのだが、実際に使われる場面がイメージできないのだ。Array.reduce())を読んで完全に理解できた!ということで、自分でも理解を深めるためにreduceの使い方についてまとめる。JavaScriptTwitterFacebookはてブPocketJavaScriptやNode.jsでは、変数名やオブジェクトのプロパティをcamelCaseにすることが多い。APIからのレスポンスはPascalCaseであることが多いため、JavaScript内で使うとres.ExampleFieldのようになり違和感を覚える。そこで、オブジェクトのすべてのキーをPascalCaseやcamelCase、snake_case、kebabu-caseなどに変換する関数を実装してみた。JavaScriptTwitterFacebookはてブPocketとあるツールにJSONを渡すとき、極力ツールのデフォルトの値を使いたかった。空文字やnull、undefinedなどのプロパティがあるとデフォルト値がうまく設定されなかった。そのため、オブジェクトに含まれる無効なプロパティ(空文字、null、undefinedなど)など任意の条件でプロパティを削除する関数をつくった。JavaScriptTwitterFacebookはてブPocketES6(ES2015)で実装されたObject.assignでディープコピーできると思っていた時期が私にもあった。Object.assignでディープコピーして(した気になって)、プロパティの値を変更したとき、元のオブジェクトにも影響していることに気づいた。obj2.fuga.foo);プリミティブ型はコピーされているのだが、参照型(上記の例ではObject)では参照先がコピーされていた。JavaScriptTwitterFacebookはてブPocket動的に生成されるテキストを、その幅にあわせてスタイルを適用したいときがある。文字数による判定では英語や日本語による違い、等幅フォントやプロポーショナルフォントによる違いを考慮しなければならない。バイト数による判定も、同様の違いや文字コードによる違いがある。「テキストが表示されたときの幅」を取得し、その「幅」で判定できれば、それが一番正確だろう。いうことで、動的に表示されるテキストの幅(width)を取得し、幅にあわせてスタイルを適用できるようにする。JavaScriptTwitterFacebookはてブPocketjQuery不要でドラッグ&ドロップで要素の並べ替えができるSortable.jsを使っていたのだが、Chromeで不可解なバグを見つけてしまったのでその対処法をまとめる。JavaScriptTwitterFacebookはてブPocketNode.jsでもブラウザでも使えるライブラリを作っているときに、「どちらも同じテストコード(同一ファイル)を使って実行できないかなぁ?」と思い、いろいろ調べた。Karmaがフロントエンドのテストツールで有名なので、これを使ってみる。テストコードについては使い慣れているmocha+chaiのセットで書く。JavaScriptTwitterFacebookはてブPocketロード中にユーザの離脱を防ぐためには、プログレスバーやスピナーを表示する手法が定番だ。フリーズしているわけではなくて、ちゃんと処理してますよと示すことにより、ユーザのストレスを軽減できる。4秒未満ならスピナー、それ以上ならプログレスバー。所要時間がわかるならプログレスバー、わからないならスピナー。使い分けもされている。ここ1〜2年くらいでプログレスバーやスピナーのかわりに、スケルトンスクリーンを使っているアプリやサービスが増えた。有名どころでは、FacebookやSlack、Mediumなどだ。今回は、スケルトンスクリーンの実装方法を紹介する。Serverでの開発を行った時にハマったのが、Nullと空文字("")の扱いの違いだった。結論から言うと、以下のようになっている。...【C#】いろんなパディング(空白埋めやゼロ埋め)固定長IFファイルの作成では必要不可欠な処理、パディング。文字長を一定にしたり、ブラの隙間に夢を詰めたりいろんな使い方がされる。このエントリでは以下の3種類の方法を紹介する。2)」とかいたらコンパイラさんに怒られてしまった。LEFT関数は特に問題ないが、可変長データ...Excelで「データを貼り付けできません。」というエラーが出た時の対処法Excelでなぜか図形が挿入できない。オブジェクトを貼り付けることができない。こんなしょうもないことで、10分を無駄にしてしまった。その対処法をまとめる。Google先生に聞いたところ、以下の対処法があったが、どれもよくわからなかった。結論から言うと、VBAにはTry-Catch-Finallyが存在しない。Errorステートメントとラベルを使う。簡単な例外処理(エラーハンドリング)は以下のとおり。」というエラーになる。ToStringプログラミングを行ううえで使う頻度が高いのが型変換(キャスト)。基本的なキャストには以下のようなものがある。どれも型変換に使うメソッドだが...position:stickyでスクロール可能なテーブルの行・列ヘッダを固定するテーブルに表示する情報が多いとき、行ヘッダや列ヘッダを固定して表示したいときがある。使うと簡単に実装できる。IEは対応していないため、ポリフィルが必要となる。完成予想イメージは以下のとおり。昼食を完全食COMPにかえて1ヶ月たったので、経緯や感想を綴ろうと思う。Standard.、SAVASホエイプロテインとの組み合わせについても書く。時間ではなく、技術を売る技術者になることを目標にブログやってます!ご用の方は、ページ右の問い合わせフォーム(※PC用ページのみ)、またはTwitterまでご連絡ください。当ブログの利用するにあたり、何らかのトラブルや損害などが生じても当ブログ管理人は一切責任を負いません。許諾や有無など、その内容については一切の保証を致しかねます。