Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに JavaScriptは昔少し触っただけなのですが、Webアプリが作りたくなり、Aureliaに手を出し始めました。 早速つまづき始めているので、その記録を含め、書いていきたいと思います。 前提として、この記事は以下のような人が以下のような環境で試しながら書いています。 人: C++、C#あたりは詳しいがJavaScriptは初心者。Haskellは好き OS: OS X El Capitan ブラウザ: Firefox 43.0.3 なぜAureliaか ちょっと作りたいアプリがあり、Webアプリが適しているだろうと思い、一発
aureliaって流行ってない？まだまだこれから？流行らなかった？ あまり情報出てこないのはさておいてcloud9で試した際のメモ aurelia-cliについて 何も設定せず au run --env dev とかして起動するとport9000で立ち上がるのがデフォルト。 package.jsonやaurelia_project以下をみる限り、ビルド周りのツールは Gulp Karma BrowserSync といったあたりをラップしているのがaurelia-cliらしい cloud9での実行 準備 以下workspaceはBlankで作成。 ターミナル上で au new --here した環境。 設定 echo $PORT してポート番号を確認。 au helpしても特にポート設定は無いようなので、以下のファイルを開いて直接変更 （TypeScriptを選択しない場合はrun.jsなの
Aurelia を使った社内向けシステムの開発中に Quill 導入したので、手順とサンプルを載せてみる。 Quill とは Your powerful, rich text editor. 要するに WYSIWYG エディタ。 見た目がモダンっぽくて良い感じなので、これを Aurelia アプリに組み込む。 TL;DR Quill はモダンで導入も楽チンだよ 簡単な設置までの手順を書いたよ ちょっと実用的な「記事」の表示・編集サンプルも書いたよ 対象読者 Aurelia に Quill の導入を考えている人。 前提環境 Aurelia 1.1.2 jspm 0.16.53 導入するもの Quill 1.3.2 導入手順 jspm を使ってインストール 入れるのは一つだけで良いから楽チン。
始まり jQueryとかReactとかVueとかriotとかえとせとら、htmlファイルにcdnからjsファイルを読み込んで実行することのできるフレームワークがある中、世界的にまだまだマイナーなaureliaというフレームワークは「ビルドしてね」と公式でrecommentされているため、どうしても気楽ではない。 だがcdnとか使えてライブラリ読んでデモ作ったらもっとアピールできないか？ というissueがaureliaのGitHubリポジトリに投げ込まれているのも確認した。 なので。 単一ファイルでaureliaを実装できるかやってみた。 準備 必要なファイルはだいたいCDNにある。 aurelia-core https://cdnjs.cloudflare.com/ajax/libs/aurelia/1.0.2/aurelia-core.min.js aureliaのフレームワークファイ
セットアップ済みの Aurelia は触ったことはあるけど、自分でセットアップしたことない。 英語もちんぷんかんぷんだけど、まあやれば分かるべーってことで、やってみる。（2017年10月16日時点） 環境 OS X El Capitan 10.11.6 npm v8.7.0 やること Setup with Webpack やってみた Configuring Your Environment npm 使うから Node.js を入れておいてね、って内容。 上記の環境に書いた通り、既に入れているのでパス。 Setting up the Project Structure and Build 最新版をダウンロードして、その中から必要なものをアプリケーションのスケルトンにしてね、って内容かな。 今回は「ESNext Skeletons」の Webpack を使えるやつにします。 ダウンロード 「D
bootstrap-tooltip を使う時、必ず js で初期化メソッド呼び出しをしないといけないのが面倒。 しかも Aurelia のように bind ありきだとすんごく面倒。 なので、簡単に bootstrap-tooltip を使うために Custom Attributes を使って部品化してみた。 対象読者 Aurelia で bootstrap-tooltip を楽に使いたい人。 公式ドキュメントの この辺 を読んですんなり理解できる人には要らないかも。 環境 OS X El Capitan 10.11.6 npm v8.7.0 aurelia-skeleton-navigation-webpack 1.1.2 Bootstrap v3.3.7 （上記 skeleton に入っていたやつ） Aurelia の Setup with Webpack をやってみる で作った初期環境
Aurelia には Custom Attributes/Elements の機能があります。 これには双方向で変数の値を bind する two-way bind の機能があって、とても便利。 けど、その two-way bind が呼び出し元に反映されるまで、ちょっと遅いことが分かりました。 環境 OS X El Capitan 10.11.6 npm v8.7.0 aurelia-skeleton-navigation-webpack 1.1.2 Bootstrap v3.3.7 （上記 skeleton に入っていたやつ） two-way bind って？ ここに書いてあるやつです。 http://aurelia.io/docs/fundamentals/cheat-sheet#databinding .two-way - Flows data both ways: from vi
今回は Aurelia で Date Range Picker を使う方法について書いていきます。 最終的に、下図の「Expiry Period」のようになります。 日付を範囲選択したい場合に便利ですので、宜しければご覧ください。 また、解説不要な人のために GitHub リポジトリの URL を載せておきますね。 https://github.com/phayacell/aurelia-daterangepicker 該当のコミットはこちら。 https://github.com/phayacell/aurelia-daterangepicker/commit/23643928914ce9e98958e04f5ec20c5907092b74 Date Range Picker とは A JavaScript component for choosing date ranges, date
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く