こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう！😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います！
TypeScript + Vue.js の始め方
こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう！😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います！
Vue.js + vuexによるToDoアプリケーションの実装
前々回の記事でLaravel 5.4 + Vue.jsの開発環境を構築し、前回の記事でLaravel 5.4によるWeb APIを作成しました。 今回は、作成したWeb APIを使用したToDoリストアプリケーションを、Vue.jsを使って作成します。 PHP側の積み残し はじめに、昨日のコントローラーを修正します。 もともと、ItemControllerのindex()メソッドは「Item::all()」メソッドで全てのアイテムを返していました。しかし、画面上に表示するのは未完了のアイテムだけです。そこで、index()メソッドを以下のように変更します。 <?php public function index() { return response(Item::query()->where('checked', false)->get()); } <?php public functio
jQueryから離れるためのJavaScript代替ライブラリまとめ
jQueryは便利すぎて、ついつい他のフレームワークを使いながらも一緒に組み合わせて使ってしまったりします。その結果として読み込むサイズが肥大化したり、動作が重たくなったりします。特にスマートフォンのようにリソースがデスクトップほど潤沢でない場合は顕著です。 そこでjQueryから離れて代替ライブラリを使ってみましょう。多くのライブラリはjQueryを踏襲して似たような使い方ができるようになっています。 Minified.js jQueryのようにDOM操作、アニメーション、イベント、HTTPリクエストをサポートしています。また、コレクション、日付や数字のフォーマット、テンプレートといった便利ユーティリティも備えています。 サイズは4KB（ミニファイ&Gzip）で、jQuery 2.1.4の29KBに比べて大幅に軽量です。 Minified.js – A Truly Lightweight
LocalKitを使っているなら自動テストも簡単。JavaScriptテストフレームワークまとめ
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
外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 こんにちは、鴨田です。 タイトルが長くなってしまってすみません。 皆さんの中で、自分のサイトコンテンツの中で、 iframeを使って外部サイト(自分で更新できない)を表示したいときに、 iframe内のコンテンツを拡大縮小出来なくて困ったことがあったり、 サイトコンテンツをレスポンシブレイアウトではなく、 固定幅のまま、あらゆるブラウザで、 ウィンドウサイズに合わせてピッタリに拡大縮小したい、 と思ったことがある人はいないでしょうか？ 前置きが大変長くなりましたが、 そんなことがあったけど出来なくて諦めたとか、 これからそんなことをしないといけないという方がいたら、 是非とも参考にしてください。 iframe内コンテンツの拡大縮小 例えば、このアシアルブログを横幅600px内で
（PHPで）指定ディレクトリ以下を全部チェックしてファイル一覧を取得する方法
こんにちは。宇都宮です。 「特定ディレクトリ以下のファイル全てに対して処理を行うプログラム」を書く機会というのは、たまにありますね。 「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
あんなこともこんなことも。そう、Node.jsならね。
こんにちは、斉藤です。 前回までのラズベリーパイは一旦置いておいて、今日は別の話でブログを書きます。 そう、Node.jsです。 Node.jsと言えば、WEBサーバーとして立てる方も多いと思いますが、ちょっとした別の使い方もあります。 ということで、今回はWEBアプリの開発に役立つNode.jsの便利なモジュールをご紹介します。 みんな使っているあのモジュールや、知らなかった便利なモジュールがあるかも！？ それでは、ご覧下さい！ ライブラリダウンロード webアプリと言えば、色々なJSライブラリですよね？ これらをいちいち公式ページをブラウザで開いて、ダウンロードしてくるのは面倒ではないですか？ そんなときに役立つのがこちら！ pulldownというモジュールをインストールしましょう。
AWS SDK for JavaScriptでAmazon S3とDynamoDBをクライアントサイドJavaScriptのみで操作する
AWS SDK for JavaScriptでAmazon S3とDynamoDBをクライアントサイドJavaScriptのみで操作する 久保田です。 AWS SDK for JavaScriptのデベロッパープレビューがリリースされました。AWSは今までウェブサービスのサーバサイドからしか扱えませんでしたが、このライブラリを用いることで、AWSのサービスをクライアントサイドのJavaScriptからでも操作できるようになります。つまり、IaaSとして利用できるAWSをサーバサイドのプログラム無しでBaaSのように扱うことができます。最も有名なBaaSの一つであるParse.comもバックエンドにはAWSを利用していることが知られていますが、今回登場したAWS SDK for JavaScriptを用いるとParse.comのようなBaaSと同じようなことがAWSでもできるのではないかと注
スマホアプリ開発の見積もりで気をつけたいいくつかのこと
こんにちは、鴨田です。 普段はプロジェクトマネージャーやデザインディレクション、デザイナーとして、 働いている時間が長いのですが、営業として他社様に出向き、 案件ヒアリングや見積もりをすることがあります。 スマホ案件に携わることが多いため、大体の場合はスマホアプリ案件なのですが、 見積もり時に注意すべき事が多々あります。 今日は、スマホアプリ開発の見積もりで注意すべき点について、 いくつかご紹介できればと思います。 １．対応OSのバージョン 対応OSに関しては、おそらくiOS、Android両対応であったり、 どちらかをリリースしてから、もう一方を作るというケースが多いと思います。 重要なのは、どのバージョンを対象としてる作るのか、です。 iOS6.0以上、Android4.0以上、ということであれば、 ほとんど問題なく、開発を進めることが出来ます。 これが、iOS5.0以上とかAndro
AngularJSに触れてみる その1
AngularJSはGoogle社が開発しているJavaScriptのMVCフレームワークです。Webの技術を使うMonacaでももちろん使うことができます。また、jQueryなどの他のライブラリと併用することもできます。MVCとはModel(モデル)、View(ビュー)、Controller(コントローラー)の略称でありそれぞれのコンポーネントにアプリケーション中の役割を分割する思想、手法です。 Model:アプリケーション内で使うデータ構造。 View:マークアップなどアプリケーションのユーザーの実際に目にするもの。 Controller:アプリ内で使うデータを操作するコンポーネントであり、ModelとViewを操作するもの。 AngularJSのMVCに関して本家ドキュメントへのリンクを貼っておきますので、詳しくはこちらを参照してください。 Model View Controller
最近のJavaScript開発まとめ
こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ
nginx(リバプロ)とapache(Webサーバ)でアクセス要求制御をしよう
Apacheの設定ファイルを変更します。 80番はリバプロ側で処理するためApacheではListenポートを8010に変更する nginx側の設定を変更します。 インストール後は「/opt/local/etc/nginx」に設定ファイルのサンプルがあり、 通常はこちらを参考にして設定しますが、今回は設定ファイルを下記のように設定します。 １．mimeタイプはデフォルトのものを利用します sudo mv /opt/local/etc/nginx/mime.types.default /opt/local/etc/nginx/mime.types user nobody; worker_processes 1; error_log logs/error.log info; events { worker_connections 256; } http { include
準備が簡単。JavaScriptテストツール「Testacular」
各質問に答えていくと設定ファイルができあがります。 今回はテストフレームワークはjasmine、 ブラウザはChrome、Firefox、Safariとしています。 ※各質問の選択肢はタブで切り替えられます。 Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine Do you want to capture a browser automatically ? Press tab to list possible options. Enter empty string to move to the next question. > Chrome > Firefox > Safari > Whic
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（後編）
こんにちは、橋本です。 前回にひきつづき、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 consoleオブジェクトには以下の19個(logを除くと18個)のメソッドがあります。 assert count debug dir dirxml error group groupCollapsed groupEnd info log markTimeline profile profileEnd time timeEnd timeStamp trace warn そのうち前回は、assertメソッドからgroupEndメソッドまで見て行きました。 今回はinfoメソッドからwarnメソッドまでの使い方について書いていきたいと思います。 infoメソッド console.info(messa
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（前編）
こんにちは、橋本です。 今回と次回の２回にわたり、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 Javascriptのコードをデバッグする際に、console.logを使ってメッセージやオブジェクトの内容をログに表示することがあるかと思いますが、 この「console」オブジェクト、実はlogメソッド以外にも複数のメソッドがあります。 まずは、consoleオブジェクトにどのようなメソッドがあるか、console.logを使って表示してみたいと思います。 consoleオブジェクトの中身を見てみると、__proto__オブジェクトに以下のメソッドが定義されています。 assert count debug dir dirxml error group groupCollapsed g
続・イラストでわかるgit入門の入門：ブランチを切る
drwxr-xr-x 3 masatoshi staff 102 6 13 18:29 . drwx------+ 17 masatoshi staff 578 6 13 18:28 .. drwxr-xr-x 10 masatoshi staff 340 6 13 18:29 .git
イラストでわかる！git入門の入門
こんにちは、アシアルの志田です。 社内でもgitが浸透し、皆バージョン管理といえばgitだよね、という空気になってきました。 ですが、これまでバージョン管理システムを使ったことがない人にオススメしても、 「gitて…まあ…そりゃ…ねえ、いつかやらないといけないけど…」 「ギット？ジット？俺はgiはジと読む派なので、gitは胡散臭いと思う」 「そもそもバージョン管理して何が嬉しいの？なんか難しそうでいやだ」 というような反応ばかりでした。 きっとみんな、gitって難しくて訳のわからんもんだと思っているのでは？と思い、 今回はgit入門の入門、gitってなんだ？というところから、簡単にgitを使う際の流れについてご説明します。 ちょっと不安を覚えるようなイラストがついていますので、頑張って読んでください。 バージョン管理ってなに？ プログラムを書いていて、こんなことありませんか？私はあります…
とても便利なvimのコマンド紹介
こんにちは。小川です。 今日はvimのコマンドでも紹介しようかなと思います。 僕はテキストエディタは大体vimを使っています。 執筆をしたときもvimでやっていましたし、PHPもvimで書いています。 vimって色々コマンドがあって便利ですよね。友達とvimのコマンドを教えあったりして、度々「こんな便利なコマンドがあるのか！」と驚かされます。 今日はそんなvimのコマンドの中から普段使っていて便利だなーと思うものをいくつか紹介していきます。 ちなみにShiftを押しながらのコマンドは、アルファベットキーの場合は大文字で表記します。 エンターやエスケープを押下する必要がある場合はエンターやエスケープと記述します。「:」ではじまるコマンドモードはエンターを押さないと意味がないので、そこは省略します。 同時押しは+でつなげて表記し、基本的には1文字ずつ順番に押下します。 ■ページ移動 「ggで」
【ぐぬぬ】iPhoneアプリのこんなとき、どうするの？？
@interface UILabel (resize) - (void) resizeWithPoint: (CGPoint)point; - (id) initWithText:(NSString *)text andFont:(UIFont *)font; - (id) initWithText:(NSString *)text andFont:(UIFont *)font andPoint:(CGPoint)point; - (CGRect)resizedFrameWithPoint: (CGPoint)point; @end @implementation UILabel (resize) - (void)resizeWithPoint:(CGPoint)point { self.frame = [self resizedFrameWithPoint:point]; } - (id
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gitを使い始めたらやっておきたい便利な設定いろいろ