サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
www.cyokodog.net
Enum の代わりに union 型を使おうという風潮があるらしい TypeScript v3.4 から使えるconst assertionを用いると、使い勝手を損なわず Enum の代わりに union 型が使えるらしい Enum とは 列挙型とも呼ばれる TS にはあって JS には無いもの、他の言語（C、C#、Java とか）にもある 定数をひとまとめに定義できる enum Card { Clubs, // 0 Diamonds, // 1 Hearts, // 2 Spades, // 3 } const card: Card = Card.Hearts; console.log(card); // 2 上記のように値には連番が振られる 意味のある分かりやすい値をもたせたい場合は、文字列や任意の数値を設定することもできる enum Card { Clubs = "clubs", D
Redux Toolkit をさわってみる のつづき。createAsyncThunk とは Redux Toolkit の機能の 1 つで、Redux Toolkit v1.3.0 から使える 非同期処理に対応した ActionCreator を生成する関数 createAsyncThunk を使用しない場合との違い createAsyncThunk を使用しない こちらでサンプルを紹介 createAsyncThunk を使用しない場合は、非同期処理が完了した後にdispatch(sliceに定義されたaction)のようにしてdispatch()する構成になるため、storeに依存した実装となる export const loadTasks = (): AppThunk => { return async (dispatch, getState): Promise<void> =>
NodeでもTypeScript で書きたい DI欲しくなる シングルトンなサービスを使いたい new したくない テストしやすい リポジトリ: https://github.com/cyokodog/inversifyjs_study InversifyJS inversify/InversifyJS: A powerful and lightweight inversion of control container for JavaScript & Node.js apps powered by TypeScript. Angular と同じように class-based なDIができる 昨日ちょっと使ってみた 準備 npm install inversify reflect-metadata --save tsconfig.json { "compilerOptions": { "t
Chrome DevTools 開発チームによる puppeteer なる Headless Chrome を操作するライブラリがでたので、もろもろ試したことをメモっておく。 試したやつのリポジトリ：cyokodog/puppeteer_study puppeteer とは Headless Chrome をNode.jsで操作しやすくしたライブラリ Chrome DevTools 開発チームがメンテナンスしてる Node v7.10以降が必要 Headless Chrome のおさらい puppeteer 位置づけを確認する意味で Headless Chrome をどう動かしてたかをおさらい（via Headless Chrome をさわってみた | CYOKODOG）。 Node.js で Headless Chrome を起動する Headless Chrome を操作するには De
Headless Chromeのリリースをうけて、PhantomJS のメンテナーが開発の終了を宣言したりとか、ちょっと話題になった Headless Chrome について試してたことをメモっておく。 試したやつのリポジトリ：https://github.com/cyokodog/headless-chrome 概要 ヘッドレス（GUIを表示しない状態）で実行できる Chrome の機能 Chromium と Blink が提供する機能をコマンドラインで利用できる Chrome 59 から利用可（2017/06/08時点ではMAC、Linuxのみ） 活用例 ウェブページのテスト 表示・動作テスト、画像やPDFによる画面のスクリーンショット スクレイピング 認証が必要なサイトでも対応 ヘッドレスで起動する --headless フラグと --disable-gpu フラグ（そのうち指定不要
手抜きタイトルのはじめてシリーズ３つ目。近頃、耳にすることの多いRiot.jsをさわってみました。 Riot.jsとは Riot.js — A React-like user interface micro-library（日本語訳） Reactを意識して作られた超軽量のUIライブラリ、ビュー部分(コンポーネント)に特化 Web componentsのように利用できる HTMLの中に、JavaScriptやCSSを書く 軽量、5.7KB インブラウザ・コンパイルを利用することで、CDNを読み込むだけで手軽に利用できる 開発元：MUUT 簡単な利用例 今回試した内容のリポジトリ。 cyokodog/riot_study 以下手順で利用可能。 CDNの読み込み コンポーネントの定義と読み込み コンポーネントのマウント /01/index.html <html> <head> <meta htt
このブログを運用してたクラウドサービスが吸収合併？かなんかした影響ですべての記事がクラウド上のMySQLに永眠することになってしまい、 あちらこちらでキャッシュをひろっては、作りかけだった静的サイトジェネレータでホスト先を移行したりとせわしなくしていた今日このごろです。 そんなわけで「Angular2やるぞ！」と１ヶ月ほど前に書いたAngular2のコードも確実に忘れそうだったのと明日の勉強会に備え、備忘録も兼ねて記事にしとこうと思います。 簡易ブログを作ってみる 公式のチュートリアル、結構分かりやすいんですがDecorators構文だとかいわゆるESnextな記述がでてくるんで、単純に写経してもすぐに忘れる自信があったので若干公式サンプルをいじって、ブログアプリ的なものを作ってみました。 Angular2のバージョンは（これを書いた当時最新の）beta.13です。 公式のデモだとデータが
コンポーネントを作ってみる ng g component hoge-component こんなふうに生成される。 installing component create src/app/hoge-component/hoge-component.component.css create src/app/hoge-component/hoge-component.component.html create src/app/hoge-component/hoge-component.component.spec.ts create src/app/hoge-component/hoge-component.component.ts create src/app/hoge-component/index.ts 中身はこんな感じ。 index.ts export * from './hoge-co
前回のエントリではマイク経由の音声認識を行う Speech Recognition API を試しましたが、今回はカメラ・マイクからの動画・音声キャプチャを行う Media Capture and Streams を試してみます。 また、キャプチャした音声の録音については MediaStream Recording を使用することで可能ですが、現時点（2015年4月）では Firefox にしか実装されていません。 そこで Web Audio API を使用することで他のブラウザでも音声録音を可能にし、それらの音声データを wav 形式で保存する方法についても試してみました。 はじめに ベンダープレフィックス対策として以下処理を行います。 code demo script navigator.getUserMedia = navigator.getUserMedia || navigato
<h3 class="center">音を鳴らしてみる<br/>「音の生成」→「音の出力」</h3> ### 音を鳴らす //ベースとなるオブジェクト window.AudioContext = window.AudioContext || window.webkitAudioContext; //safari対応 <span class="hot">var audioContext = new AudioContext();</span> //「音の生成」 <span class="hot">var osciillatorNode = audioContext.createOscillator();</span> //「音源」→「音の出力」 <span class="hot">osciillatorNode.connect( audioContext.destination );</sp
Node.js といえば発表された当初、イベント駆動、ノンブロッキングI/O、スケーラブルネットワークブログラミング、といった部分が注目され非常に話題になりました。 フロントエンド技術の興隆目覚しい昨今においては、Sass や CoffeeScript のコンパイルを自動化する Grunt や Gulp といったタスクランナーを動かすための開発環境インフラとして大きな役割をはたしています。 今回はそんな node.js の基本的な利用方法についてまとめてみました。 Node.js のインストールとバージョン管理 発表当初、試すのにも敷居の高さがあった Node.js ですが、今では Windows でも容易に利用できるようになってます。 Windows で Node.js をインストールする一番簡単な方法は、以下公式サイトにあるインストーラーを使用する方法です。 ダウンロードして実行するの
HTML5 の Web Speech API をご存知でしょうか？ ブラウザベースで音声認識とテキストの読み上げを実現する API です。 今回はこの Web Speech API について試したことをまとめてみました。 ちなみに少し前の Chrome では Speech Input API という INPUT 要素に x-webkit-speech という属性を記述するのみで、手軽に音声認識を実現できるという機能がありましたが現バージョンでは廃止されてるようです・・・ Web Speech API の対応ブラウザは Can I Use よりご確認ください。 テキストの読み上げを行う Speech Synthesis API Speech Synthesis API を使用すると、指定したテキストを PC に読み上げさせることできます。 使い方は非常に簡単で、new SpeechSynth
みなさん、日々の勉強で得たナレッジはどこに記録されてますか？ 自分の場合、少しでも気になって調べた事はとりあえずマークダウンで記述してテキストファイルに保存してます（閲覧は HTML 形式に変換したドキュメントをロカール web サーバや Bitbucket 越しに参照してます）。 そんな調子で気軽にメモしてくと情報量がすぐに増えてしまうので、見出し要素ごとにカテゴライズされたコンテンツに素早く移動するための TOC（目次メニュー）は欠かせない機能です。 今回はこの目次メニューの実装方法について考えてみました。 UI の生成機能の実装方法について 目次メニューに限った話ではありませんが、UI を生成する実装を考えた時、UI はサイトの印象に強い影響を与えるデザインの一部でもあるため、本当の意味での汎用性のある UI 生成処理の実装は非常に難しいものだと感じています。 そうした汎用性を意識し
HTML5 の Web Audio API の存在をご存知でしょうか？ 購読してる専門誌でも紹介されてるのを見かけた記憶がなかったのでよく知らなかったのですが、検索してみると興味深い記事が結構目につきます。 CANVAS や WebGL など見た目系機能が注目されがちな HTML5 ですが、音声方面も面白いかなという事で、今回調べたことをまとめがてら紹介してみたいと思います。 モジュラールーティング Web Audio API を扱う上で「モジュラールーティング」という思想の理解が大事になります。 簡単に言うと「音の発生源」「音の加工」「音の出力」をモジュール単位で管理し、それらをお好みのパターンで接続しあい音を出力させることができます。 楽器で例えると、エレキギター → エフェクター → アンプの接続のような関係です。例えばエフェクターを使いたくなければ直接アンプに繋いでも良いですし、エ
AngularJS は、クライアントサイド MVC フレームワークの１つですが、自身のことを MVW フレームワークと呼んでます。 これは Model-View-Whatever の略で 「MV＊について議論するなんて時間の無駄、そんな暇あるならコード書きなよ。MV＊の＊の部分なんて”Whatever”でいいんだよ。」 という思いが込められてるそうです・・・いかしてますね！ という訳でコードを書きながら AngularJS を紹介したいと思います ^^; はじめに 2000 年頃から「web アプリでいかにネイティブアプリに迫れるか」をテーマに半分趣味で JavaScript と向かい合ってきた身としましては、 就活せまられる現状に乗じ、あわよくばフロントエンドエンジニアに転身できないかなぁ・・・などと思いを馳せつつ転職サイトを検索したりしております。 そんな中、フロントエンドで採用されて
MVC と言えば Apache Struts をはじめとするサーバサイド・フレームワークを想像しますが、 今回は JavaScript による大規模開発の際に採用されるクライアントサイド MVC フレームワーク「Backbone.js」の使い方についてまとめてみました。 (厳密にはクライアントサイドの場合、MVC とは呼ばず MVVM とか MV* とか呼ばれてるようです。) 前提 Backbone.js の構成を簡単に言ってしまうと 単一データの管理を行うモデル 複数件のモデルの管理を行うコレクション 画面の管理を行うビュー の３つの主要モジュールを軸に構成されており、Underscore.js、jQuery(Zepto）に依存するかたちで動作するようになっています。 利用の際は、underscore.js、jquery.js、backbone.js の順で読み込みます。 //cdnjs
こんにちわ、就活の面接がいつの間にか雑談ぽくなりがちな cyokodog です。 普段できないプログラムの話とか、異業種の現場の話とか聞いたりできるのってすごい楽しいものですね！(お時間とらせてしまってすいません^^;) 今回はそんなコミニケーションを取りながら、皆でわいわい開発するのが当たり前の時代がきたらいいなぁ… そんな思いを込めて、ソーシャルコーディングを可能にする WEB サービス GitHub の利用方法についてまとめてみました。 GitHub アカウントの作成 GitHub を利用するにあたり、まずは https://github.com/ でアカウントを作成します。 ユーザ名、メールアドレス、パスワードを指定し [Sign up for GitHub] をクリックします。 [Finish sign up] をクリックします。 以下の画面になります。 “[GitHub] Pl
こんにちわ、2015年3月をもって所属会社が解散することになってしまった CYOKODOG です（悲） ただいま絶賛就活中、当方にご興味ございましたらお声かけのほどよろしくお願い致します ^^; そんな背景もあり過去の資料を整理することも多々ありまして、今回は昔懐かしい JavaScript の prototype 周りについて自分なりにまとめてみました。 this と オブジェクトの関係 prototype の話の前に this と オブジェクトの関係をおさらいします。 JavaScript ではオブジェクトは以下のように作ります。 var Hello = {} オブジェクトに対し、値やメソッドを追加したい場合は以下のように書きます。 var Hello = {} Hello.msg = 'hello'; Hello.say = function(){ alert(this.msg);
Ex Scroll は、スクロールイベントの開始／終了のタイミング、スクロール方向を判別することのできる jQuery プラグインです。2009 年頃に書いたプログラムですが、ちょくちょく需要があるようなのでソースの見直しも兼ね GitHub で管理するようにしました。リポジトリは jquery.utility-kit とし軽量の utility 系のプラグインはこちらで管理し追加してく予定です。 変更履歴 v0.2.1 API を変更。 使い方 jQuery、Ex Scroll の JS ファイルを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="jquery.ex-scroll.js"></script> スクロールバー
ネットで見つけたプログラムの TIPS などはなるべく実践を心がけてるんですが、やはりブログ等に残しておかないとすぐに忘れてしまうなぁ と感じてる今日この頃です。そんな訳でなるべく細いネタでもちょくちょく投稿してこうかと思います。 で、今回はページからページへ遷移する際、フェードイン／フェードアウトを使って「ふわっ」とページを切り替える方法について考えてみました。 ふわっとページを切り替える サンプルを作ってみました。 画像をクリックするとフェード付きで画面が切り替わります。１枚の HTML で QueryString を変更してるだけなんで、画面遷移したように見えないかもしれませんが URL は変わってます。 実装方法は以下の通りです。 ページ読み込み時、画面の要素が表示される前に画面全体を非表示にする ページ読み込みが完了したら、画面全体をフェードインし表示する 他のページに遷移しよう
久しぶりのプログラム関連のエントリーです。 表題の「サイドメニューを一定範囲で固定表示」って意味通じますでしょうか？ 画面スクロール時、サイドメニューが上部に流れきって消えてしまわないように途中から position:fixed で位置固定して、フッターにかぶる位置にきたら位置固定を解除するＵＩのことです。あの有名な LIG さんや痛いニュースでも採用されてるデザインです。 このちょくちょく見かけるＵＩのかゆいとこを解消した jQuery プラグインを紹介します。 一定範囲固定メニューのかゆいとこ 個人的意見ですが、よく見かける一定範囲固定メニューで感じるかゆいとこは以下２点です。 レスポンシブに対応してない 上部方向にスクロールした場合、位置固定がなかなか解除されない まず１の「レスポンシブに対応してない」についてですが、レスポンシブに対応してるやつを見たことがありません。実はスマホ持っ
管理者向け画面などで、画面下部にコマンドボタンを配置した際、画面に表示するデータ量が多いとコマンドボタンが画面の表示枠内に収まらず不便に・・・かと言って position:fixed で固定表示すると、データ量が少ない場合に不格好に見えてしまう・・・そんな経験は無いでしょうか？ Fitbar は、ツールバーやナビゲーションメニューを画面のスクロール位置に応じ上部又は下部に固定表示させることができる jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。 Fitbar の使い方 jQuery、Fitbar（または jQuery Sitekit）の CSS, JS ファイルを読み込みます。 <link href="jquery.fitbar.css" rel="stylesheet" type="te
mailto:～ と記述されたリンク要素をクリックするとメールクライアントの作成フォームが起動されるのはご存知でしょうか？Web メールが主流な昨今あまり見かけなくなりましたが、宛先や本文を指定することでメールテンプレートとしも利用できるので、企業内システムなどで活用すると結構便利かと思います。 Mailto は、そんな mailto リンク機能を利用しやすくする jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。 使い方 jQuery、Mailto（または jQuery Sitekit）の JS ファイルを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scrip
Easy Social Buttons は、はてブ、Twitter、Facebook、Google+ のソーシャルボタンをシンプルなデザインで表示することのできる jQuery プラグインです。各サービスが提供しているソーシャルボタンより動作が軽いので投稿記事一覧画面などで大量にボタンを表示したいような場合に向いています。jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。 変更履歴 v0.1.1 IE7 以下で動作しない不具合を修正しました。 使い方 jQuery、Social Info、Easy Social Buttons（または jQuery Sitekit）の JS/CSS ファイルを読み込みます。 <link href="jquery.easy-social-buttons.css" type="text/css"
このブログは PaaS の AppFog のフリープランで動かしてるのですが、先日、フリープランのサービス縮小の通知がありました。念のため WordPress が動く目ぼしいところが他にないか探したところ、OpenShift が 「無料、広告なし、独自ドメイン対応、Git でアップロード」といった感じで良さげでした。 そんな訳で OpenShift で WordPress を使用する手順をまとめてみました。 ※OpenShift では簡単にオンライン上で WordPress を作成することもできますが、この方法だとソースをいじれないので自前で WordPress を準備する方法でまとめてます。 事前準備 ここでは 32ビット版 Windows 環境で行います。まず以下の準備をしておきます。 Git（1.8.5.2） WordPress 日本語版（3.8.1） phpMyAdmin（4.1.
オラクル管理下になって以降めっきり話題が減った感のある Java ですが、最近、隣の席の新人 SE さんが研修で Struts2 ベースの Web アプリを構築をしてるようで、時々質問を受けたりします。Java と言えば Struts に次ぐ定番フレームワークが長らく待望されてましたが、結局どうなったのでしょう？ Struts の冠のある Struts2 がネーミング的には有利な気もするので便乗して勉強してみることにしました。 開発環境の準備 32ビット版 Windows 環境に開発環境を構築します。次のものを準備します。 Eclipse Kepler（4.3） Pleiades（Eclipse の日本語化プラグイン） JDK（Java SE 7u51） Tomcat（7.0.50） Struts2（2.3.16） Eclipse 4.3（Kepler）の導入 http://www.ecl
Social Info は、はてなブックマーク数や Twitter のつぶやき数などを取得するソーシャル系サービスの API を簡単に利用できるようにする jQuery プラグインです。独自デザインのソーシャルボタンなどを自作する際に利用すると便利かと思います。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。 使い方 jQuery、jQuery Sitekit（または Social Info）の JS ファイルを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="jquery.social-info.js"></script>
Web アプリケーションにおいて、入力項目が一画面に収まらないような入力フォームの場合、入力値の一時保存ボタンが必須になるかと思いますが、通常の作りだと保存処理後、ページスクロール位置が先頭に戻ってしまうのが悩みどころです。Ajax で実装すれば解決もできますが、もっと手軽に解決できる方法がないか考えてみました。 保存処理前にスクロール位置を記録し、ページリロード時に位置調整する まず考えたのが、保存処理（SUBMIT）前のスクロール位置を jQuery Cookie プラグイン（https://github.com/carhartl/jquery-cookie）で保存しておき、ページがリロードされたら cookie に記録された位置にスクロール位置を補正するという方法。 //プラグイン化$.fn.keepPosition = function(){ //cookieに保存する名前（他のペ
Easy Feed は、外部ドメインの RSS フィードの読み込みを可能にする Google Feed API を手軽に利用できるようにする jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。 Google Feed API とは Google Feed API は、よそ様のサイトの RSS フィードを JavaScript で取得し簡単に扱うことをできるようにする Google のサービスです。 通常、外部ドメインの RSS を取得するにはサーバで一旦受信し、ATOM, RSS1.0, RSS2.0 等の異なるデータフォーマットを JSON 形式に加工しクライアントに返す等の工夫が必要になりますが、Google Feed API を使用するとこれらの処理を Google がやってくれます。
次のページ
このページを最初にブックマークしてみませんか？
『HOME | CYOKODOG』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
