こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう!😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います!
![TypeScript + Vue.js の始め方](https://cdn-ak-scissors.b.st-hatena.com/image/square/39e482c008d605a5b5f9180e98756d084baf2b67/height=288;version=1;width=512/https%3A%2F%2Fblog.asial.co.jp%2Fogp-logo.jpg)
こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう!😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います!
新しいJavaScriptであるECMAScript6(以下ES6)はすでにnode.jsをはじめとする幾つかの環境で使えるようになっています。クラスやimport、Promise、テンプレート文字列など便利な機能がたくさんありますが、なかなか使う機会に恵まれないのではないでしょうか。 そこでよく使われているのはBabelで、ES6で書いたコードを従来のJavaScriptであるECMAScript5(以下ES5)に変換してくれるソフトウェアです。Babelを使うことによって、コーディングは先進的なES6で行いつつ、実際の利用はES5で幅広いブラウザに対応させると言った利用ができます。 今回はその逆で、すでにあるES5のコードをES6に変換してくれるLebabというソフトウェアを紹介します。LebabはBabelを逆から読んだ名前になっています。 Lebabの使い方 Lebabはnpmを使
jQueryは便利すぎて、ついつい他のフレームワークを使いながらも一緒に組み合わせて使ってしまったりします。その結果として読み込むサイズが肥大化したり、動作が重たくなったりします。特にスマートフォンのようにリソースがデスクトップほど潤沢でない場合は顕著です。 そこでjQueryから離れて代替ライブラリを使ってみましょう。多くのライブラリはjQueryを踏襲して似たような使い方ができるようになっています。 Minified.js jQueryのようにDOM操作、アニメーション、イベント、HTTPリクエストをサポートしています。また、コレクション、日付や数字のフォーマット、テンプレートといった便利ユーティリティも備えています。 サイズは4KB(ミニファイ&Gzip)で、jQuery 2.1.4の29KBに比べて大幅に軽量です。 Minified.js – A Truly Lightweight
前回までのコードはRubyで書いていましたが、MonacaアプリはHTML5/JavaScriptが主な利用言語になります。そこで今回はアプリを動かすスクリプトをNode.jsベースに書き直してみます。 これがうまく動けば、Gulpのようなテストランナーと組み合わせることで、コードの変更からテストまでがとてもスムーズになるはずです。DevOpsを積極的に進める上でも役立つのではないでしょうか。 Appiumのインストール、起動までは前回までの記事を参照してください。 Node.jsの設定 Node.jsについてはあらかじめインストールされていることとします。まだ未インストールの方はNode.jsよりダウンロード、インストールしてください。 まずテストスクリプトを書くフォルダを作成します。
Monacaはアプリ開発をプロジェクトという単位で行います。そして、プロジェクトを立てる時のひな型になるのが『テンプレート』です。テンプレートは新規でプロジェクトを立てる時に選択することが出来ます テンプレートはRSSリーダーやブロック崩しのような具体的なアプリになっているものから、SNS連携機能だけを用意したものなど大小様々に用意されています。まっさらな状態から始めたいときは『最小限のテンプレート』を選択してください Monacaにはプロジェクトをインポートしたりエクスポートする機能があります。インポートはプロジェクトを新規で立ち上げる際に選択が可能です。テンプレートを選択するタイミングで『Import Project』というボタンが画面右上にでてきますので、そちらを選択してください。 インポートできるプロジェクトの例 Monaca公式ガイドブックで紹介されているアプリをインポートするこ
LocalKitを使うメリットの一つにテストフレームワークが容易に使えるようになるという点が挙げられます。そこで今回は開発したJavaScriptコードでユニットテストを実現するためのフレームワークを紹介します。 Jasmine: Behavior-Driven JavaScript describe("CallTracker", function() { it("tracks that it was called when executed", function() { var callTracker = new j$.CallTracker(); expect(callTracker.any()).toBe(false); callTracker.track(); expect(callTracker.any()).toBe(true); }); it("tracks that num
<?php $image_file = 'sample.jpg'; $img = new MyImage($image_file); $img->resizeImage(500, 500); $img->createImageFile('.', 'gd_sample.jpg'); header('Content-type: image/jpeg'); readfile('gd_sample.jpg'); class MyImage { var $img; var $width; var $height; var $font_path; function MyImage($image_path, $font_file_path = null) { $this->img = imagecreatefromjpeg($image_path); $this->width = imagesx($th
タイトルだけ見るとOnsen UIの紹介がメインのように見えますが、実際は、ハイブリッドアプリの概要から始まり、HTML5アプリのパフォーマンスチューニングの話題が主要な部分を占めます。 ハイブリッドアプリにはUIフレームワークが欠けていた、だからOnsen UIを作ったのだ、という開発の経緯がよくわかるプレゼンでした。 スライドにない部分としては、Onsen UIと同じくハイブリッドアプリ用のUIフレームワークであるionicとの比較について、会場からの質問がありました。 OnsenUIのionicと比べた利点としては以下がある、とのことです。 – (ionicが初期はiOSにフォーカスしていたのに対して) OnsenUIはAndroidでもパフォーマンスの最適化を行っている – OnsenUI 1.3ではWindows Phoneサポートを追加する予定 – OnsenUIは日本語ドキュ
こんにちは中川です。 先日、AngularJS 1.3 がリリースされましたね。 動作速度の改善や、メモリ消費量の削減などパフォーマンス面での改善もうれしいところですが、 機能的にはフォーム関連の機能強化が特にうれしく感じましたので、紹介したいと思います。 ■ ngModel.$validators https://docs.angularjs.org/api/ng/type/ngModel.NgModelController ngModel.$validators を使うと、独自のバリデーション関数を簡単に定義することができるようになりました。 以下の例のように、入力値を引数で受け取り、返り値で真偽値を返す関数を$validatorsオブジェクトに定義します。 $validatorsのキー(ここではvalidCharacters)が、エラーメッセージ表示時などの参照用に利用できます。 n
myhostname = mail.makmakmak.asia alias_maps = hash:/etc/aliases alias_database = hash:/etc/aliases myorigin = /etc/mailname mydestination = #relayhost = mynetworks = 127.0.0.0/8 [::ffff:127.0.0.0]/104 [::1]/128 192.168.0.2 ... mailbox_size_limit = 0 recipient_delimiter = + inet_interfaces = all virtual_mailbox_domains = makmakmak.asia, localhost, localhost.localdomain, localhost virtual_mailbox_ba
「最新SPA開発を学ぼう!ウェブエンジニアのためのAngularJS入門」という題でPHPカンファレンス2014で登壇してきました 10月11日に開催されたPHPカンファレンス2014にて、「最新SPA開発を学ぼう!ウェブエンジニアのためのAngularJS入門」という題で登壇してきました。 PHPのイベントですが、HTML5関連の話題もOKということでSPA開発とAngularJSについて話してきました。 SPA(Single Page Application)は、近年開発が増えているウェブアプリケーションの一形態ですが、このお話の中では、それが近年増えてきた理由についてまず説明しました。SPA開発ではAngularJSフレームワークがよく利用されているのですが、このフレームワークはSPA開発に適した機能セットを持っています。お話の後半では、AngularJSの紹介と、AngularJS
シャワー後の水切りでヘドバンしてたら頸椎を痛めてしまいました。あれは絶対やめた方がいいです。と周囲に広めているたきゃはしです。急に本題ですが今回はPHPで簡単にできるWebスクレイピングをご紹介します。 ◯ Webスクレイピングとは Webサイトからデータを抽出するソフトウェア技術のことです。 RSSやWebAPIが公開されていないサイトからでもデータ抽出が出来るようなイメージです。 早速クローラーの Goutte(グットゥ) を使って紹介していきたいと思います。 Goutte は Symfony や Twig、Pimple等の開発者として知られるFabienが手がける人気ライブラリです。 ◯ インストール
#import "FlipSegue.h" @implementation FlipSegue - (void)perform { UIViewController *sourceViewController = (UIViewController *)self.sourceViewController; UIViewController *destinationViewController = (UIViewController *)self.destinationViewController; [UIView transitionWithView:sourceViewController.navigationController.view duration:1 options:UIViewAnimationOptionTransitionFlipFromLeft animations:
モバイルアプリでは、サーバーと連動して動作するものが多くみられます。 ハイブリッドアプリでこうしたアプリを作る場合は、Ajaxで実現するのが一般的だと思いますので、そのやり方について説明します。 追記:Android 2.3系およびそれ以前のAndroidは、FormDataオブジェクトが未定義のため、この記事の方法は利用出来ません。ご注意下さい。 追記2:Android 4.4では、Formからのファイル選択自体ができないため、この記事の方法は利用出来ません。(4.4.2で確認。今後のバージョンアップ出来るようになるかは不明です) formタグを使わない手段については、こちら サーバー側の実装 まずは、サーバー側の機能の実装です。 ここでは、普通にブラウザからもアップロード出来るような作りを考えます。実装はphpですが、他の言語でも基本的に同じように作れると思います。 /uploader
こんにちは。宇都宮です。 「特定ディレクトリ以下のファイル全てに対して処理を行うプログラム」を書く機会というのは、たまにありますね。 「PHP ファイル 再帰的」といったワードで検索すると、色々引っかかります。それぞれ一長一短あります。「特定ディレクトリ以下のファイル全てに対して処理を行うプログラム」の様々な実装例を紹介します。 1. scandir()とis_file()/is_dir()を組み合わせる <?php function getFileList($dir) { $files = scandir($dir); $files = array_filter($files, function ($file) { // 注(1) return !in_array($file, array('.', '..')); }); $list = array(); foreach ($files
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く