syncなどのコマンドを使うことが多いかと思います。CLIで作成したSPAをデプロイする前提で簡単に使い方を紹介します。buildした結果生成されるファイルをScottyを使ってデプロイします。SPAにアクセスできるようになります。scriptsにまとめてしまいます。},...また、Scottyがグローバルインストールされていない環境でも利用できるよう、devDependencyに登録しておきます。CLIが必要ないのがよい。「手元でサクッとビルドしてとりあえず確認環境を構築したい!」といった用途に向いているかなぁという印象。ドキュメントの音声入力機能を使い、mp3ファイルやブラウザ上でストリーミング再生した音声ファイルを文字起こしする方法(小技)を紹介します。-Google標準機能では、入力元の音声はマイク入力のみの対応となっていて、直接音声ファイルを入力することはできませんが、Soundflowerというフリーソフトを使い、音声ファイルをマイク入力として扱うことで音声を直接文字起こしすることができます。手順はいたって簡単です。Soundflowerのインストール今回はGitHubからdmgファイルをダウンロードしてインストールしました。入力Googleドキュメントで使用する入力デバイスを選択するGoogleドキュメントを開き、ブラウザのアドレスバーの右端に表示されるビデオマークをクリックして、入力デバイスを選択します。Chromeの場合)音声ファイルを再生する文字起こしをしたい音声ファイルを再生します。この時、出力はSoundflowerになっているため、内蔵スピーカやイヤフォンから音声は聞こえません。Googleドキュメントで音声入力Googleドキュメントを開き、通常の音声入力を行う手順で、マイクをOnにします。ウィンドウが非アクティブになると音声入力が停止されるので注意が必要です。メモng-lazyload-imageを使って、スクロールに応じた画像の遅延読み込みをしてみる。今回はわかり易い例として、スクロールに応じてグリッド配置した画像を例にした。--saveapp.moduleにインポートしておく。タグのlazyLoadディレクティブに画像URLを指定します。src属性の代わりに、lazyLoadを使うだけなので、使い方はいたって簡単です。2以降で動作するようにしています。}}ここまでの手順で、スクロールに応じて画像を遅延読込することが出来るのですが、「ふわっ」と徐々に画像を表示させるアニメーションを加えるためのCSSを追加します。いうクラスは、ng-lazyload-imageによって画像が完全に読み込まれたタイミングで動的に付加されるクラスです。Animationsを使ってみることにしました。そもそも今まで触ったことなかったので、気にしてなかったけど、どうやらv4.2以上ではアニメーション関連が強化されているらしい。今回紹介する内容では、v5.1.1を使っています。In-Outアニメーションをさせてみたいと思います。具体的には次のようにぬるっと表示される詳細検索パネル(風)のものです。今回は、次のコマンドでサンプルのプロジェクトを作成しました。--inline-templateまた、app.moduleにBrowserAnimationsModuleをインポートしておきます。],...検索ボックスまずは検索ボックスです。テンプレートには、input要素と、buttonを配置しているだけです。「詳細」ボタンを押した際に、親のコンポーネントにボタンが押されたことを通知したため、OutputとEventEmitterを使っています。}}詳細検索パネルこちらは、詳細検索パネル(風)です。今回は、アニメーションの例なので詳細検索に関する機能は省いていますが...親のコンポーネントで見通しが良くなるよう別ファイルにしていますが、特にロジックを持たないコンポーネントです。}app.component次にapp.componentです。newした際に作成されるものを編集して使っています。アニメーションの定義もこのコンポーネントで行っています。検索ボックスから受けたpanelOpenイベントに対してonChangePanelState()メソッドをバインドしています。}}テンプレート内の@panelOpenTrigger、triggerのpanelOpenTriggerテンプレート内にトリガーを定義してanimationsのtriggerと関連付けを行っています。})),アニメーション前の初期状態のstyleを定義しています。state()の第一引数voidはコンポーネントが表示されていない状態を表しています。})),アニメーション後のstyleを定義しています。*はコンポーネントが表示された際の状態を示しています。*で全ての状態の移り変わりをハンドリングするよう設定しています。今回の場合、パネルを開く時、閉じるときで同様のアニメーションを実行します。animate()メソッドで実際のアニメーションを定義しています。ここでは、0.2秒かけてstyleがstate()で定義した状態に変化します。ease-in-outはイージングの種類です。Panelでもそれぽいことができたかもしれない。Animationsの取っ付きとしてはよかったかなと。AngularCLIAngluarCLIでComponentを作成する際にVue.jsの単一ファイルコンポーネントっぽく、1Component1ファイルとする方法を紹介します。--inline-templateオプションを付けて実行することでcss、htmlの内容がtsファイルにインラインで記述されます。事前にプロジェクトの設定ファイルに記述しておく方法です。確認オプション指定、もしくは.angular-cli.jsonに設定を記述した状態でComponentを作成してみます。作成されたコンポーネントを確認すると、一つのtsファイルにstyleとテンプレートがまとまっているのが分かるかと思います。パッケージの中を覗きたいことがあると思います。node_modulesを入れておくと素早くnpmパッケージ内のファイルにアクセスすることができて便利だったので紹介します。VisualStudioCodeでは、プロジェクトの.gitignoreに登録されているファイル、ディレクトリは検索や移動の対象にならないようになっています。その為、node_modules以下のファイルにアクセスしたい場合、サイドパネルのエクスプローラーを開いてnode_modules以下に移動して...という作業が発生しがちでした。node_modulesからインストールしておきます。node_modules」を選択node_modulesを検索できるようになるので、module名を入力するか候補から選択することでパッケージ内のファイルにアクセすることができます。終わりにこのように、エクスプローラーを開いてnode_modules以下に移動して...という作業を減らすことができます。node_modules」が便利Tweet広告を非表示にするもっと読むコメントを書く2017-11-23Angularでプレビュー画像を自動回転するAngularで画像プレビューを行う際に、画像のExif(Orientation)情報を見て自動で向きを回転させる方法です。JavaScript-Load-Imageという便利なライブラリと、Reactでの使い方を紹介したありがたいブログ記事があったので、かなり簡単に実装することができました。実装していきたいと思います。exifとかでググるとexif-jsというライブラリが真っ先にヒットするが、JavaScript-Load-Imageの方が断然使いやすいAPIが用意されている印象でした。24px">画像を選択させるinput要素のchangのイベントをイベントハンドラonInputChangeで受けています。URL形式に変換しています。試してみる試しに、Exif(Orientation)情報が含まれる画像をアップロードしてみます。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。