こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう!😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います!
こんにちは。エンジニアの小椋です。 最近になって初めて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よりダウンロード、インストールしてください。 まずテストスクリプトを書くフォルダを作成します。
こんにちは、アシアルの岡本です MA(マッシュアップアワード)11に参加される方向けにMonacaの情報をお伝えいたします。 この記事は随時更新してまいります。 Monacaはスマホのアプリを開発するためのサービスです。HTML5やJavaScriptといったWeb技術を応用してアプリを作成でき、各プラットフォーム向けにアプリをビルドすることでマーケットにリリースすることが可能です。 開発環境がクラウド上に用意されるためハッカソンのような短期間でチームを組んでアプリを作り上げる時に大変便利です。Goldプラン以上ならプロジェクトを共有することもできるためコンテストに向けてリモートでチーム開発を進めていく場合にもお勧めです。 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
こんばんは、牧野です。 以前、GDでの画像処理を紹介しました。 今日はPHPでよく使われるもう1つの画像処理方法、ImageMagickを使うやり方で画質にどれくらい差があるのか比べてみました。 まずは早速、テスト用プログラムです。 gd_test.php <?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;
こんにちは。宇都宮です。今回は、週末に参加したイベントのレポートです。 3/21(土)に、ng-japanという日本初のAngularJSのカンファレンスが開催されました。会場は渋谷マークシティ13Fにある、サイバーエージェントさんのセミナールームでした。 今回のカンファレンスは、スピーカーにAngularJSのコアチームのメンバーが3名いるのが最大の特長でしょう。当然トークは英語なのですが、英=>日の逐次通訳付きなので、英語が苦手な人でも大丈夫なカンファレンスでした。 参加者の最大の関心事は「Angular 2はどうなるのか?」という点にあったと思います。私自身は、今回のカンファレンスに参加して、Angular 2について前向きな気持ちになれました。 以前は、「Angular 1系から2系への移行は無理」「1系はあと2年くらいでサポート終了」と思っていましたが、1系から2系へはアップグレ
こんにちは中川です。 先日、AngularJS 1.3 がリリースされましたね。 動作速度の改善や、メモリ消費量の削減などパフォーマンス面での改善もうれしいところですが、 機能的にはフォーム関連の機能強化が特にうれしく感じましたので、紹介したいと思います。 ■ ngModel.$validators https://docs.angularjs.org/api/ng/type/ngModel.NgModelController ngModel.$validators を使うと、独自のバリデーション関数を簡単に定義することができるようになりました。 以下の例のように、入力値を引数で受け取り、返り値で真偽値を返す関数を$validatorsオブジェクトに定義します。 $validatorsのキー(ここではvalidCharacters)が、エラーメッセージ表示時などの参照用に利用できます。 n
こんにちは、牧野です。久々のブログになりました。。 2年くらい、インフラに関する仕事がメインでしたが、最近ここ2、3ヶ月はフロント側を作ることが多くなっています。 javascriptを触ることも多くなり、夏休みには以前作ったandroidアプリの百人一首のHTML版を作ったりしていました。よかったら遊んでみて下さい。 http://demo.asial.co.jp/~makki/karuta/ スマートフォンでgoogle chrome推奨です。 さて、今日の話題はjavascriptやプログラミングではなく、メールサーバー設定の話です。 もう何ヶ月か前になりますが、postfixを使ってメールサーバーを立てる機会があったので、その時の設定をまとめようと思います。 やりたかったことは大きく分けて以下の3つです。 ・バーチャルドメイン、バーチャルメールボックス ・pop3メール受信 ・SM
<?php // first.php require_once './vendor/autoload.php'; $client = new Goutte\Client(); $crawler = $client->request('GET', 'http://blog.asial.co.jp/'); // 抽出 $targetSelector = 'h2.lh1_2em'; // アシアルブログの見出しのセレクター $crawler->filter($target)->each(function ($node) { echo $node->text() . "\n"; }); ~/Sites/prac/goutte php first.php 外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 「Monaca for Hyb
こんにちは、橋本です。 今日はiOSのSegueのカスタム方法について書いていきたいと思います。 久々のiOSネイティブネタです。 Storyboardで画面を作っていて画面遷移を作成するときに、画面をSegueでつないで選択肢に出てくるpushやmodalをそのまま使っている方は多いかと思います。 modalを選択すると、デフォルトで4種類のアニメーションが選択出来るので、それでまかなえることも多いですよね。 ただ、pushに関してはアニメーションが基本のスライドアニメーション以外選択できないので、なんとなくスライドのままという方もいるのではないでしょうか。 カスタムで動きを実装するのはなんとなく大変そうですもんね。 気持ちは分かります。 ただ、作り方さえ分かってしまえば、CustomのSegueを作ってスライドアニメーションを独自のアニメーションに置き換えるのはすごく簡単なんですよ。
モバイルアプリでは、サーバーと連動して動作するものが多くみられます。 ハイブリッドアプリでこうしたアプリを作る場合は、Ajaxで実現するのが一般的だと思いますので、そのやり方について説明します。 追記:Android 2.3系およびそれ以前のAndroidは、FormDataオブジェクトが未定義のため、この記事の方法は利用出来ません。ご注意下さい。 追記2:Android 4.4では、Formからのファイル選択自体ができないため、この記事の方法は利用出来ません。(4.4.2で確認。今後のバージョンアップ出来るようになるかは不明です) formタグを使わない手段については、こちら サーバー側の実装 まずは、サーバー側の機能の実装です。 ここでは、普通にブラウザからもアップロード出来るような作りを考えます。実装はphpですが、他の言語でも基本的に同じように作れると思います。 /uploader
<?php function getFileList($dir) { $files = scandir($dir); $files = array_filter($files, function ($file) { // 注(1) return !in_array($file, array('.', '..')); }); $list = array(); foreach ($files as $file) { $fullpath = rtrim($dir, '/') . '/' . $file; // 注(2) if (is_file($fullpath)) { $list[] = $fullpath; } if (is_dir($fullpath)) { $list = array_merge($list, getFileList($fullpath)); } } return $li
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く