読者です 読者をやめる 読者になる 読者になる
一人もくもく会 α verでサービス開始しました。

JavaScript

Angular2アプリケーションを通常のサーバーにデプロイ

Angular2アプリケーションをangular-cliでビルドすると公開用のdistフォルダが作成されるので、 基本的にはこれをサーバーにアップすればそのまま動作する。 ただ、jsファイルはハッシュ値がついてファイル名が変わってしまうため、 多少気をつけないといけ…

Angular2でマークダウンエディタを使うディレクティブ

Angular2で下記のシンプルなマークダウンエディタを動作させるためのディレクティブを作ってみた。 github.com シンプルとはいえ、プレビューや、全画面表示によるプレビューを見ながらの編集、 ツールバーにカスタムボタンを追加など、結構機能が充実してい…

Angular2で共通データの管理(Shared Data)

Angularにて、アプリケーション全体で共通のデータを利用したいことなどがある。 例えばログインしているユーザーの情報など。 ダメな例 そこで共通データを管理するSharedDataService等を作る場合、 何も考えないと下記のようになると思う。 export class S…

Angularで自作コンポーネントのngModel双方向バインディング

Angularはinputタグ等のform用タグにて[(ngModel)]属性を使用すると双方向バインディングになる便利な機能がある。 これを自作した独自のコンポーネントで実現する方法。 簡単に言えば下記の解説通り。 blog.thoughtram.io ざっと説明すると下記の通り。 Con…

Atomのパッケージにpull requestを送った話

はじめに Atom Advent Calendar 2016 - Qiita 16日目 Atomについて Atomはご存知の通りGithubでも公開されているオープンソースのエディタで、 連携するパッケージも全て同様。 つまり、何か不便を感じた時、通常のアプリケーションのように要望を出してそれ…

jQueryによるコンポーネント化考察

はじめに JavaScript Advent Calendar 2016 - Qiita 4日目 注) SPAの話ではありません。 なぜjQueryを使うのか 今の時代、JavaScriptはAngular2やReactに代表されるコンポーネント指向の時代を迎えている。 そんな中でなぜjQueryを使うのか。 下記の条件が組…

Angular2のuniversal-starterでangular/material2が使えない

Angular2はuniversal-starterから始めることで簡単にサーバー再度レンダリングができるが、 angular/material2を入れてみようとしたところ、 どうもエラーが出てうまく動かない。 検索してみると、どうも今はちゃんと動かないようだ。(2016-11-28現在) githu…

Angular2アプリを全部無料で公開してみる-Django編

Angular2で開発したアプリケーションを完全に無料で公開できる方法を考えてみた。 要件 上から順に重要度が高い。 Angular2 Angular2のサーバーサイドレンダリング対応 そこそこのDB容量 なるべく無料枠が大きいところ 開発しやすさ 考察 まず、Angular2をサ…

ReactにReduxを組み合わせると何が楽なのか

React + Reduxを使うとどうメリットがあるかというと、色々とあるとは思う。 ただ、どう楽になるのかというのに焦点をおいてみる。 Reactのみの例 下記のようなコンポーネント構成のアプリケーションを作成するとする。 コンテナ : App ヘッダ : Header ログ…

Reactにてrouterのrouteにパラメータを渡す方法

例えば大元のコンポーネントにてajaxで取得したユーザー情報を保持して、 それを別のrouteのコンポーネントにも引き継ぎたい時の話。 (version 15.2.1現在) 渡すのは下記で可能。普通に属性指定すれば良い。 <Router history={browserHistory}> <Route path="/" component={Index} user={this.state.user} /> </Router> 問題は受け取り側の方。 this.props.user これ…

Hierselectプラグインの作成

HierselectのjQueryプラグインを作成した。 Hierselectというのは、例えばプルダウンで大、中、小カテゴリを選択する際に、 大カテゴリの選択によって中カテゴリプルダウンの中身を属するもののみに更新し、 さらに中カテゴリの選択によって小カテゴリのプル…

ReactでMinified exception occurredエラーが出る場合

ReactでMinified exception occurredが出ることがある。 エラーが出ているのだが、min.jsの方を使っているとエラーがjsファイル内に記載されていないのでminのついてないjsファイルを読み込むと正常にエラーメッセージが表示される。 ちなみに自分の場合はデ…

mochaとPhantomJSでjavascriptのテスト

開発中のWEBサイトのjavascriptのテストをコンソールで自動化するシンプルなプロジェクトを作成した。 使い方だが dala00/test_by_phantomjsをクローン npm install npm test でspecフォルダの全てのテストが走る。 ライブラリ PhantomJS 画面表示のないブラ…

IEでFileReaderが使用できない件

IEでFileReaderや、 prop('files') が使用できない事があった。 IE8以下で使用できないのは知っていたがIE11で発生。原因は多分ローカルサーバーだったせいっぽい。 開発サーバーにアップしたもので試したら問題なかった。