フロントエンド

angular-cli + UIフレームワーク Angular2-Material で Angular2 アプリを構築するチュートリアル

はじめに 本稿では Angular2-Material というUIフレームワークを導入し、Angular2 のアプリの枠組みを作るまでの手順を説明しています。 前提としてこの手順を進める前に node.js と angular-cli を入れておく必要があります。 node.js、angular-cli を導入するまでの手順は僕が先日書いた以下の記事 http://qiita.com/kent_ocean/items/f1a1d21fd9997cc5d6f8 をご参照ください。 Angular2-Material とは https://material.angular.io/ https://github.com/angular/material2 Angular2...

【Rails】URLをインデックス可能な形でデータベースに保存する方法

はじめに URLをデータベースにユニークに保存したくなる時があると思います。 URLは仕様としては長さの上限はありません。 クエリパラメーターやフラグメントを含めた長いURLは、string型では保存できずtext型で保存する必要があります。しかし、text型はご存知の通りMySQLやPostgreSQLでは、インデックスを貼れません。 インデックスが貼れなければ、UNIQUEインデックスも貼れないので、重複データが挿入される可能性があります。 また、すでに保存されたURLを検索するのにも不利です...

Laravel 5 パッケージのつくり方

本記事は Qiita Advent Calendar 2016 - Laravel の 15 日目の記事です。 Laravel 5.3 製のアプリケーションで ConoHa オブジェクトストレージとファイルをやりとりするヘルパークラスを作ったのですが、 こういったものをパッケージとして公開する方法に興味があったので手順をまとめました。 ちなみに、できあがったものがこちらです。 okashoi/laravel5-conoha-object-handler (この記事では公開用のリポジトリとして GitHub を使うという想定で書いているので、必要に応じて読み...

MQTTでArduino YunとmyThingsとつなげ、IoTをやってみた

今回、紹介するのはArduinoでもIoTができるよ! というものになります 例えば、こんな感じです これは、スマホをサーバを経由し、Arduinoに命令を出し、ロボットアームを動かしています IoTに関しての何かを作る時とか、そもそも自分の作ったデバイスをネットに繋げる時に選択肢として真っ先に上がるのは、RaspberryPiだと思います しかし、実はArduinoもIoTに対して様々な取り組みをしており、当然ネットにつながるボードも出しているのです! ArduinoのIoTへの取り組み YunとTianと...

koaでjsonwebtokenを使っていい感じに認証する

koaのプラグインであまりしっくりくるものがなかったので、自分で認証処理を作ってみます。素人なので、中身はともかく「koaいい感じだ」くらいに思ってもらえれば結構です。 主にSPAのバックエンドで使う用になると思います。https://github.com/endaaman/koa-jwt-example に全コード乗せてあります。 ゴール 認証方法 Authorization: Bearer <JSON WEB TOKEN>というヘッダで認証します。 トークンの取得(ログイン) POST /api/sessionで リクエスト { "username": "hoge"...

TypeScript での Chrome 拡張機能開発 Tips

はじめまして、こんにちは、水音ぴねといいます。高知で大学生してます。 今回は、私が TypeScript を使って Google Chrome 拡張機能を作る上で見つけたことを書いていきたいと思います。 少々長くなりすぎた感があります。必要なところを、つまみ食いしてください。 前置き Google Chrome 拡張機能とは ? Google Chrome の機能を拡張するソフトウェアで、Web の技術 (JavaScript / HTML / CSS) 使って作ります。そして、一般的に Chrome 拡張機能と呼ばれるものには、大きく分けて以...

PHPでのAPIドキュメント作成ツール(RESTful APIとソースコードドキュメント生成)

PHPでのAPIドキュメント作成ツール(RESTful APIとソースコードドキュメント生成) restfulなAPIのドキュメントを残す必要があったので、記載しておきます。 npmのapidoc http://apidocjs.com/ コメントにささっと書いてすぐ確認、バージョンの比較まで可能 インストール npm install apidoc -g プロジェクトルートにapidoc.jsonを用意して { "name": "example", "version": "0.1.0", "description": "apiDoc basic example", "title": "Custom apiDoc browser title", "ur...

Office UI FabricとAngularJSでToDoアプリを作る

Office Fabric UIの基本的なUI部品の使い方を調べていますが、ある程度実用的なアプリを作るとどんな感じになるのか試してみたくなりました。 そこで今回はOffice Fabric UIとAngularJSを使ってToDoアプリを作ってみました。以下のURLからアプリを試すことができます。 ToDoアプリ(Office UI Fabric+AngularJS) http://furandon_pig.bitbucket.org/sample/officeui/todo_app.html ToDoアプリの簡単な使い方 まずはToDoアプリの簡単な使い方。と言ってもToDoアプリの最低限の機能を実装...

VPS + DockerでEC-CUBE 2.13系のテスト環境をサクッと構築

ローカル環境ではなく、VPSに開発環境を立ててみんなで検証したいこともある。というより開発機が低スペックのWindowsだとVagrantも動かしたくない。 なので、安いVPSにDockerを導入し、検証してみようと考えた次第。 VPSを用意 海外VPSのVULTRにて構築。 初期イメージにCoreOSも存在するので、コンテナ環境を準備するのも楽。 ただ今回は「そいや既にデプロイしてるUbuntuテスト環境あったっけ」「ログインの為の秘密鍵用意すんのめんどかった」との理由でUbuntuから構築することに。...

Laravel5でカスタムバリデーション

Laravelでカスタムバリデーションを作るのはちょっとめんどい。 いくつかのやり方があるようですが、ここでは、Validatorを継承したクラスを作り、それをサービスプロパイダに登録するやりかたを検証してみます。 やりたいこ ・なんでもいいので、カスタムバリデーションを作る。 やりかた ・Illuminate\Validation\Validatorを継承したクラスでルールを定義 ・サービスプロバイダを定義 ・サービスプロバイダを登録 ・カスタムバリデーションを使う という流れ Validatorを継承したク...

D言語で電子錠システムを作っている話

これはD言語 Advent Calendar 2016 16日目の記事です。 はじめに この記事では今年の4月あたりから卒業研究として制作している電子錠システムを紹介したいと思います。 先にどのようなものを作ったか、画像と動画を載せておきます。 制御はRaspberry Pi3です。見た目はひどいですがちゃんと動きます。下にArduinoが見えますが過去のシステム(後述)で使っていたもので関係ありません。 このようにFeliCaタグを読み取り部に近づけると鍵の開閉を行ってくれます。一人で撮ったのでブレて...

Gulp で sass / scss ファイルを自動でインポートする

gulp-inject は JavaScript ファイルや CSS ファイルなどのターゲットファイルを Html ファイルなどのソースファイルに自動的に挿入することができる Gulp プラグインです。 v2.2.0 に Sass 対応のプルリクエストが取り込まれたため、sass, scss ファイルに対して sass, scss, css ファイルを自動的にインポートすることができるようになりました。 klei/gulp-inject Add support for Sass by superbrothers · Pull Request #134 · klei/gulp-inject Sass ファイルを自動でインポート...

React DnD を使ってMQTT のモニタリングツールを作った

この記事はNIFTY Advent Calendar 2016 の10日目です。 こんにちは。NIFTY IoT デザインセンター のエンジニアの @yutaszk です。 最近はReact Advent Calendar に書いたりErgoDox Advent Calendar に書いたりしています。 さて、みなさんはMQTT は使っていますか? IoT デザインセンターではMQTT を使いデバイスをインターネットと繋ぐことも多いです。 しかしデータがただしく送られているかを、細かくプリントデバッグするのは大変です。 そこでデバッグ用に、React DnD を使ってモ...

CentOS6.xでwordpress+mimizukuテンプレートの導入をしてみた

mimizukuってなぁに? モンキーレンチが公開したwordpressのテーマフレームワークです。 Mimizuku Child を使ってMimizuku による子テーマ開発環境を構築する テンプレを使うまでの事前の環境構築をメインに自分用メモの記事です。 モンキーレンチさんにはいつもお世話になりっぱなしで (smart custom fields/habakiri使わせていただいています!) blogとアドベントカンレンダーを拝見してましたー。 脱bootstrapを常々感じていたので記事を見て、これは!! これこそが! というこ...

[初心者歓迎] Packer + Ansible + TerraformでWordPressを構築

この記事はフロムスクラッチ Advent Calendar 2016の13日目の記事です。 1. はじめに。 「Keep it Simple, stupid! But fail fast! learn a lot!」    ↓↓↓ いかに素早く失敗して そこから学ぶかが重要だと思う今日この頃。 ご機嫌いかがでしょうか?jkです。 2. 想定読者 最近っぽいインフラをやってみたい人 アプリの人でインフラをちょっとかじってみたい人 hashicorpツールをちょっとかじったことある人 3. インフラは、インフラだけのものではない。 いろいろな場面で、以下の...

Electron で Markdownプレゼン作成ツールを作って公開するまで

Markdown でスライドを作るためのツールを漁っていたのですが、なかなか自分好みのものが無く、Electron の勉強を兼ねて作ってみた話です。 成果物 今回作ったプレゼンツールは、以下にてプレリリース版を公開しています。 Marp - Markdown presentation writer https://yhatt.github.io/marp/ (旧称 mdSlide) 追記 (2016/07/13 19:42) _人人人人人人人人人人人人人人_ > 突然のGithubトレンド入り <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄ Markdown スライドツール比較表 私の欲しい機...

ng2-dragulaでコピーと入れ子のドラッグアンドドロップを実現する方法

以前、ng2-dndというライブラリを使ってAngular2のドラッグアンドドロップを実現する方法について書きました。 ng2-dndはHTML5準拠のdnd処理で非常にいい感じなのですが、入れ子のソートやオブジェクトをコピーするような処理を実現できません。 そこで、ng2-dragulaという別のライブラリを使ってコピーしたパーツを入れ子で配置するという処理を実装してみました。 このような処理が使われる例としては、リソースエディタみたいにツールバーからアイテムを引っ張ってきて配置するよう...

EditorConfigでコーディングスタイルを指定する

.editorconfigはエディタやIDE間で異なるコーディングスタイルを統一するための設定ファイルで、だいたいのテキストエディタには.editorconfigに対応したプラグインが用意されているので誰でもすぐに使えるとおもう。 EditorCongfigはCakePHPのほかにもAngularJSやTwitter Bootstrapなど結構色々なところで使用されているみたいです。実際のプロジェクトでの使用例はWikiに一覧があるので、サンプルに困ることはありません。 .editorconfigの基本的なこと .editorconfigの文字コードは...

吉里吉里2/KAG3のセーブデータをチェックするツールを作った

脆弱性"&'<<>\ Advent Calendar 2016の19日目の記事です。 吉里吉里2/KAG3のセーブデータに危険なスクリプトが含まれていないかをチェックするツールを作った。 http://sanya.sweetduet.info/krkrsvchk/ ツールの実行画面 吉里吉里2/KAG3とは 吉里吉里 ダウンロードページ NScripterのようなノベルゲームエンジン。今一番使われているんじゃないかと思う。 「吉里吉里製ゲーム」という言い方を良くされるけれど、吉里吉里2自体はより汎用的で、ノベルゲーム専用のエンジ...

sue445製itamaeプラグインいろいろ

20日目なので僕が今まで作った itamae プラグインをまとめて紹介します 1 itamae-plugin-resource-encrypted_remote_file itamaeで暗号化されたファイルを復号化して転送するためのプラグインです https://github.com/sue445/itamae-plugin-resource-encrypted_remote_file https://rubygems.org/gems/itamae-plugin-resource-encrypted_remote_file 使い方 ファイルを暗号化 別途 reversible_cryptography をインストールして暗号化してください gem install reversible_cryptography...