アップロード処理の周辺実装のざっくりまとめ
- 2020-10-16
セッション切れ時のフロント側の制御について
- 2020-10-16
開発中の SPA ベースのアプリにおいて「API 呼び出し時、サーバでセッション切れを起こしていた場合は、フロント側でエラーメッセージを表示した後ログイン画面へ遷移させる」という処理が正常に動いていないという、以下のような指摘を受けた。
- セッション切れの際は認証プロキシがレスポンステータス 302 を返している
- フロント側で 302 をキャッチした時の分岐が書かれていないため処理が止まっているのでは?
Code Splitting と非同期コンポーネント
- 2020-10-10
Code Splitting と非同期コンポーネントを案件(と趣味プロで少々)で使用したのでメモっておく(webpack + TS + Vue3 / React で使用)
Enum の代わりに使う union 型
- 2020-07-30
- Enum の代わりに union 型を使おうという風潮があるらしい
- TypeScript v3.4 から使える
const assertion
を用いると、使い勝手を損なわず Enum の代わりに union 型が使えるらしい
Redux Toolkit の EntityAdapter をさわってみる
- 2020-07-09
Redux Toolkit の AsyncThunk をさわってみる のつづき。
EntityAdapter とは
- createEntityAdapter | Redux Toolkit
- NgRx メンテナによって作成された@ngrx/entity ライブラリから、Redux Toolkit に移植された API
- Redux Toolkit v1.3.0 で追加された
- https://github.com/reduxjs/redux-toolkit/pull/374
- エンティティ操作用のアダプターを生成してくれ、CRUD(create, read, update, delete)操作の機能を提供してくれる
Redux Toolkit の AsyncThunk をさわってみる
- 2020-06-04
Redux Toolkit をさわってみる のつづき。createAsyncThunk とは
- Redux Toolkit の機能の 1 つで、Redux Toolkit v1.3.0 から使える
- 非同期処理に対応した ActionCreator を生成する関数
Redux Toolkitをさわってみる
- 2020-05-28
Redux Toolkit とは
- Redux を使いやすく簡素なものにするために作られた公式のヘルパーライブラリ
- Redux Style Guideでも利用を推奨している
- TypeScript 製のためコード補完が効き TypeScript との相性がよい
- reducer と state をまとめて書けて action creator を書く必要がない
- immer が組み込まれてるため、状態変更ロジックを簡素にできる(immutable な状態を維持してくれる)
- Redux Thunk が標準 middleware として組み込まれている(非同期処理を書きたい時に使用する)
- Redux DevTools Extension 用の設定が不要
foreverとAutomator.appでMac起動時にHTTPサーバを自動起動する
- 2020-04-08
Node.js ベースで HTTP サーバを常時起動する方法を調べた。
Canvas, PixiJSからRetinaディスプレイに配慮した画像の切り出しを行う
- 2020-04-07
PixiJS 管理下の Canvas を、Retina ディスプレイに配慮して画像として切り出す方法について調べた。
TypeScript v3.8 の新機能メモ
- 2020-03-11
TypeScript v3.8 の新機能をざっと試しながら確認したのでメモ。
fish shellベースのターミナル環境を整える
- 2020-02-01
「bash やめて fish とかでターミナル環境いい感じにしたいけど、ググるとあれ入れるためにはこれ入れろとか言っててなんか面倒そうだなぁ...」とか感じた方にとっては有用な記事かもしれません。記事の手順どおり進めればとりあえずいい感じのターミナル環境が整うかと思います。
moment.js で i18n 対応したり期間を文字列化する時の注意点
- 2018-02-06
今らなら immutable で軽くて i18n にも対応してるってことで date-fns 使うのが良いのだろうけど、moment.js の i18n 対応でいろいろあったので、一応メモっておく。
Nodeで書く時TypeScriptでDIしたい
- 2018-01-10
- NodeでもTypeScript で書きたい
- DI欲しくなる
- シングルトンなサービスを使いたい
- new したくない
- テストしやすい
AngularFire使ってみた
- 2017-11-15
AngularFireとは
- FIrebase と Angular の公式ライブラリ
- AngularJS 向け
- https://github.com/firebase/angularfire
- firebase 管轄
- Angular 向け
- https://github.com/angular/angularfire2
- angular 管轄
- 最新バージョン: 5.0.0-rc.3
Chrome DevTools 開発チームによる puppeteer なる Headless Chrome を操作するライブラリがでたので、もろもろ試したことをメモっておく。
試したやつのリポジトリ:cyokodog/puppeteer_study
マイクロソフトの画像認識APIの Computer Vision API を試してみた。API そのものより
- 「getUserMedia で動画を得る」->「スナップショットを取る」->「APIへアップロード」
って部分が勉強になったのでメモっておく。
JSON Serverのおしいところをなんとかしたい
- 2017-06-30
typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)
JSON Serverの特徴
- コードの記述なしにモックサーバをたてれる
- JSONファイルを1つ準備すればOK
- CRUD対応
- クエリでいろんなフィルターやソートなどを指定ができる
Headless Chrome をさわってみた
- 2017-06-15
Headless Chromeのリリースをうけて、PhantomJS のメンテナーが開発の終了を宣言したりとか、ちょっと話題になった Headless Chrome について試してたことをメモっておく。
試したやつのリポジトリ:https://github.com/cyokodog/headless-chrome
zone.js と async / await を併用してみる
- 2017-05-06
zone.js と async / await を併用すると面倒な非同期処理を楽して書けそう... ということで、ここ最近これらについて試してたことをメモっておく。
SQlite と Sequelize
- 2017-03-08
- 案件のモック環境の一部で使った
- 静的サイトジェネレータのデータ管理に使ってみてる
VSCodeで便利にdebugする方法
- 2017-02-01
最近使ってるエディタ(特にこだわりはない)
- VSCode ... コード書く時(70%)
- Sublime Text ... 文章書く時、重い時(25%)
- vi ... ちょっといじる時(5%)
Google Cloud Speech API の使い方
- 2016-12-21
Google Cloud Speech API とは
- Googleの音声認識エンジン
- Speech Recognition API の Cloud サービスみたいなやつ
BitBar を試してみる
- 2016-07-05
Angular CLI を試してみる
- 2016-06-30
はじめてのRiot.js
- 2016-06-14
はじめてのfacebook/flux
- 2016-06-11
はじめてのReact.js
- 2016-06-09
過去にブクマしてたFlux関連の記事を一気読みする機会があったので、その流れで今までノータッチ状態だったReact.jsもさわってみました。 りぃさんのCodeGridの記事(これから始めるReact.js 全6回 | CodeGrid)が一段落ついたので、これを見つつアレンジしつつやってみます。
Angular2で簡易ブログを作ってみる
- 2016-05-18
Electron さわってみた
- 2016-03-02
Electronとは
- GitHub.inc が開発
- HTML5 で OSX, Windows, Linux のデスクトップアプリを開発できる実行環境
- Atom の実行環境としても使われいて Atom Shell と呼ばれていた
- JS の実行エンジンとして Node.js、HTML5 の実行環境として Chromium を使用
- ビルドしたアプリには Chromium が内蔵されるので特別なインストールは不要。スタンドアローンアプリとして配布可。
SVG + Web Audio API でつくるタイピングゲーム
- 2016-02-24
なにを作る?
- HTML5 のグラフィック・サウンド系技術を使用したなにか
- こどもがネットでタイピングゲームやるのでそれを題材にする
Wunderline を使ってみた
- 2015-11-18
Wunderlineとは
- Wunderlistを操作するコマンドラインツール
前回のエントリではマイク経由の音声認識を行う Speech Recognition API を試しましたが、今回はカメラ・マイクからの動画・音声キャプチャを行う Media Capture and Streams を試してみます。 また、キャプチャした音声の録音については MediaStream Recording を使用することで可能ですが、現時点(2015年4月)では Firefox にしか実装されていません。 そこで Web Audio API を使用することで他のブラウザでも音声録音を可能にし、それらの音声データを wav 形式で保存する方法についても試してみました。
ブラウザのみで音声認識とテキスト読み上げを実現する Web Speech API
- 2015-03-18
HTML5 の Web Speech API をご存知でしょうか?
ブラウザベースで音声認識とテキストの読み上げを実現する API です。
今回はこの Web Speech API について試したことをまとめてみました。
ちなみに少し前の Chrome では Speech Input API という INPUT 要素に x-webkit-speech という属性を記述するのみで、手軽に音声認識を実現できるという機能がありましたが現バージョンでは廃止されてるようです・・・
Web Speech API の対応ブラウザは Can I Use よりご確認ください。
TOC(目次メニュー)の実装方法について考えてみる
- 2015-03-09
HTML5 の Web Audio API で音楽してみる
- 2015-02-21
Windows ではじめてみる Node.js
- 2015-01-28
MVWフロントエンド・フレームワーク、AngularJS をはじめてみる
- 2015-01-17
Backbone.js ではじめるクライアントサイド MVC プログラミング
- 2015-01-07
Pull Request ではじめてみる!GitHub ソーシャルコーディング
- 2014-12-23
JavaScript の prototype オブジェクト入門
- 2014-12-14
マークダウンにも優しいライブデモ対応シンタックスハイライター jQuery プラグイン
- 2014-11-16
Easy Code Prettify は、Ex Code Prettify(その場で編集/実行できるシンタックスハイライター jQuery プラグイン)を簡易的に実行することができる jQuery プラグインです。 クラス名等の HTML 属性値によるパラメータ指定を必要としないため、マークダウン形式でブログを書いてる場合等に利用すると便利です。
Ex Code Prettify をバージョンアップしました【追記あり】
- 2014-11-06
その場で編集/実行できるシンタックスハイライター jQuery プラグイン Ex Code Prettify をバージョンアップしました。
うちの小3男子がダウンレールでB/Sボードスライドを習得した
- 2014-10-26
WordPress 製のブログを Twitter カードに対応させてみた
- 2014-10-05
Twitter カードってご存知でしょうか?ツイート内に URL が含まれている場合、そのページのタイトル、概要、アイコン写真なども一緒に表示してくれる機能です。 これは前回のエントリ「WordPress 製のブログを OGP(Open Graph Protocol) に対応させてみた」で紹介した OGP の Twitter 版の機能にあたります。OGP の対応が済んでいれば簡単な手順で対応させることができます。
フェード効果で「ふわっ」とページ切替を行う jQuery プラグイン
- 2014-09-29
Fage Page はフェード効果を使ってふわっとページ切替を行えるようにする jQuery プラグインです。各ページに CSS と JS ファイルを読み込むのみで適用されます。
jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。
フェードイン/フェードアウトで「ふわっ」とページを切り替える【追記あり】
- 2014-09-24
レスポンシブ対応でサイドメニューを一定範囲で固定表示する jQuery プラグイン
- 2014-09-23
挑戦!自作フィギュア ワンピース・チョッパー編
- 2014-09-15
大人だけど全力で「7人の悪魔超人編」の絵を描いてみた
- 2014-07-24
挑戦!自作フィギュア ラーメンマン編 その2
- 2014-07-15
挑戦!自作フィギュア ラーメンマン編 その1
- 2014-07-11
管理者向け画面などで、画面下部にコマンドボタンを配置した際、画面に表示するデータ量が多いとコマンドボタンが画面の表示枠内に収まらず不便に・・・かと言って position:fixed で固定表示すると、データ量が少ない場合に不格好に見えてしまう・・・そんな経験は無いでしょうか?
Fitbar は、ツールバーやナビゲーションメニューを画面のスクロール位置に応じ上部又は下部に固定表示させることができる jQuery プラグインです。
jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。
Picasa の写真の拡大/縮小を簡単に行うことできる jQuery プラグイン
- 2014-06-17
皆さん、Google の写真共有サービス「Picasa」をご利用でしょうか?
2048×2048ピクセル以下の画像であれば容量が実質無制限であることもあり、自分の場合、ブログの掲載写真等に使用してます。
Picasa Zoom は Picasa で管理された写真の拡大/縮小を簡単に行うことできる jQuery プラグインです。
jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。
ソーシャルボタンを表示する jQuery プラグイン Easy Social Buttons と ソーシャル系サービスの共通 API を提供する Social Info で Google+ の共有数を表示、取得できるようにしました。
サーバサイドのプログラムは不要です。
挑戦!自作フィギュア ウォーズマン編 その2
- 2014-06-09
システム管理者におすすめ!SQL の実行結果を手軽にエクセルに出力する方法
- 2014-06-09
mailto:リンク機能を利用しやすくする jQuery プラグイン
- 2014-06-05
mailto:~ と記述されたリンク要素をクリックするとメールクライアントの作成フォームが起動されるのはご存知でしょうか?Web メールが主流な昨今あまり見かけなくなりましたが、宛先や本文を指定することでメールテンプレートとしも利用できるので、企業内システムなどで活用すると結構便利かと思います。
Mailto は、そんな mailto リンク機能を利用しやすくする jQuery プラグインです。
jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。
挑戦!自作フィギュア ウォーズマン編 その1
- 2014-05-25
昨年の暮れぐらいから何故かキン肉マンにはまりだした我が家の小3男子、「フィギュア探しの旅」でも目当てはキン肉マン関連ですが、旬でない作品を探すのは一苦労です。
実際、どれだけ種類があるのかとネットで検索してみると、なんと自作でしかもかなりのクオリティの「ザ・ニンジャ」のフィギュアを作ってる人を発見!
しかも、材料は百円ショップで揃えられるものばかり・・・とくれば自分も試さないわけにはいきません!(笑)
塗装はまだしてませんが、今回なんとかそれなりの形にすることができたウォーズマンをお披露目したいと思います!
第3回アキバ・フィギュア探しの旅
- 2014-05-18
Easy Social Buttons は、はてブ、Twitter、Facebook、Google+ のソーシャルボタンをシンプルなデザインで表示することのできる jQuery プラグインです。各サービスが提供しているソーシャルボタンより動作が軽いので投稿記事一覧画面などで大量にボタンを表示したいような場合に向いています。jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。
PaaS で動かす WordPress + OpenShift 入門
- 2014-03-05
このブログは PaaS の AppFog のフリープランで動かしてるのですが、先日、フリープランのサービス縮小の通知がありました。念のため WordPress が動く目ぼしいところが他にないか探したところ、OpenShift が 「無料、広告なし、独自ドメイン対応、Git でアップロード」といった感じで良さげでした。
そんな訳で OpenShift で WordPress を使用する手順をまとめてみました。
Social Info は、はてなブックマーク数や Twitter のつぶやき数などを取得するソーシャル系サービスの API を簡単に利用できるようにする jQuery プラグインです。独自デザインのソーシャルボタンなどを自作する際に利用すると便利かと思います。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。
Google Feed API を手軽に利用できるようにする jQuery プラグイン
- 2014-01-28
Easy Feed は、外部ドメインの RSS フィードの読み込みを可能にする Google Feed API を手軽に利用できるようにする jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。
第2回アキバ・フィギュア探しの旅
- 2014-01-04
大人だけど全力でキン肉マンの絵を描いてみた
- 2013-12-17
第1回アキバ・フィギュア探しの旅
- 2013-12-02
入力キーの種類を調べることができる jQuery プラグイン
- 2013-11-25
Keyinfo は、入力キーの種類を調べることができる jQuery プラグインです。 jQuery Utility Kit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。
スクロールイベントの開始/終了、方向を判別できる jQuery プラグイン
- 2013-10-31
Ex Scroll は、スクロールイベントの開始/終了のタイミング、スクロール方向を判別することのできる jQuery プラグインです。2009 年頃に書いたプログラムですが、ちょくちょく需要があるようなのでソースの見直しも兼ね GitHub で管理するようにしました。リポジトリは jquery.utility-kit とし軽量の utility 系のプラグインはこちらで管理し追加してく予定です。
その場で編集/実行できるシンタックスハイライター jQuery プラグイン
- 2013-09-23
ガラクタで重厚感のあるおもちゃを作ってみた ~その2~
- 2013-09-07
皆さん、今年の夏はいかがおすごしでしたでしょうか。
うちは子供を中心にプール、クワガタ探し、スケボーと例年通りの変わり映えない夏でした。ただ唯一いつもと違ったのは、前回のエントリーでも書いたガラクタ(というか日常ゴミ)によるおもちゃ作りに家族全員が精を出してたという事です。
という訳でその後、置き場所も考えず、調子にのってさらに作りこんでしまった作品郡も載せときますのでよろしかったら見てやってください。
ガラクタで重厚感のあるおもちゃを作ってみた
- 2013-09-04
ガラクティストこと ゴトー孟(もう) さんをご存じでしょうか?
ペットボトルや空き箱などの日常生活で出るがらくたを使って、ハイクオリティなおもちゃを作ってしまうすごい方なのですが、先日、子供の自由研究のネタ探しに訪れた横浜こども宇宙科学館でその作品を初めて見ました。とてもガラクタでできてるとは思えない重厚感、完成度に衝撃を受けました。
そんな訳で夏休みの時間を利用し、我が家でも作ってみました。
Bootstrap が普及して以降、Bootstrap のデザインを基調とした jQuery プラグインをちらほら見かけるようになりました。 日付/時刻ピッカーの「Bootstrap Datetime Picker」もそんなプラグインの1つですが、今、仕事で開発してる Web アプリに使ってみたところ、いろいろとかゆいところがあったので、使いやすくなるようカスタマイズしてみました。
location.hash の値に応じ表示コンテンツを切り替える jQuery プラグインを作ってみました。大した処理じゃありませんが、jQuery プラグインのデモページとか作る際、複数パターンのデモがある時など毎回記述するのが面倒なのでプラグイン化してみました。ついでに location.hash のリンクリストも生成するようにしてます。
フォームデータ登録後もページスクロール位置を維持する方法を考えてみた
- 2013-07-31
Web アプリケーションにおいて、入力項目が一画面に収まらないような入力フォームの場合、入力値の一時保存ボタンが必須になるかと思いますが、通常の作りだと保存処理後、ページスクロール位置が先頭に戻ってしまうのが悩みどころです。Ajax で実装すれば解決もできますが、もっと手軽に解決できる方法がないか考えてみました。
Web サイト作成時に必要になりがちな機能をまとめた jQuery プラグイン
- 2013-07-03
なにか近頃なにもやる気が起きずブログも更新してませんでしたが、ぼちぼちはじめようかなと思います。だいぶ前に作った jQuery プラグインの紹介です。大したものじゃありませんが、よかったら使ってみてください。
ソースコードをかっこよく表示してくれる JavaScript ライブラリ「Google Code Prettify」。巷では高機能な「SyntaxHighlighter」におされ気味ではありますが、シンプル仕様で見た目もかっこよくて好みです。今回はちょっと手を加えて使い勝手の方を少し改善してみました。
WordPress のこまごま設定プラグインにソーシャルボタン設置機能、他を追加した
- 2013-03-31
前回のエントリで公開した 「WordPress のこまごました設定をまとめてできるプラグイン」に、ソーシャルボタン設置機能、他を追加しました。ソーシャルボタンは結構簡単にできるかなと思ってたんですが、個々のボタンを等間隔に揃えたりとか見た目を調整するのって面倒なんですね・・・疲れました。
こまごました設定をまとめてできる WordPress プラグイン
- 2013-03-25
ブログを WordPress にしたので折角なのでテーマもオリジナルなものを作ってみました。CSS3 も角丸ぐらいしか使ってないシンプルなものですが、少しづつ拡張してこうかなと思ってます。また変えるかもしれないので一応魚拓しておきます。(ソースはリファクタリングしてないんで見ないでほしいですw)
汎用性重視のテーブルフィルタリング系 jQuery プラグイン
- 2013-03-06
汎用性を重視したテーブルフィルタリング系の jQuery プラグインです。
実装の基本思想は以前書いた「jQuery によるシンプルなテーブルフィルタリング処理の実装を考えてみる」に基づいてます。
jQuery 1.9 で $.browser が使えなくなってしまった対策
- 2013-02-27
jQuery によるシンプルなテーブルフィルタリング処理の実装を考えてみる
- 2013-02-25
引っ越してきました
- 2013-02-25