2015年 09月 10日 開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました カテゴリ： gulp タグ：gulpタスクランナー タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。 1.タスクランナーとは？ gulpで何ができるのか？ 2.gulpに必要な環境を整える – Node.jsのインストール 3.gulpに必要な環境を整える – package.jsonの作成 4.gulpに必要な環境を整える – gulpfile.jsの作成 5.gulp-ejsを使った開発環境 6.

textlintはMarkdownなどテキスト向けのLintツールで、テキスト版ESLintみたいな感じのツールです。 JavaScriptでルールを書けるテキスト/Markdownの校正ツール textlint を作った | Web Scratch 最近azu/JavaScript-Plugin-Architectureという小さな書籍を書いていて、色々簡単に使えるような仕組みを追加しています。 この記事では簡単なtextlintの導入方法について紹介します。 公式サイトには一部ルールを含むオンラインデモが公開されています。 textlint · The pluggable linting tool for text and markdown ドットインストールにてNode.jsのインストール、textlintの利用方法、エディタとの連携などのチュートリアルが公開されています。Node.

【ぇ、使えるの!?】PHPExcel＋マクロでグラフ付きExcelを出力 PHPExcelでゼロからグラフを書いてみよう PHPExcelでテンプレートファイルからグラフを作ってみよう の最終章 Excel_Reviserが終了し、xlsしか出力できないので、 xlsxで出力したい場合、PHPでExcelをいじる場合はPHPExcelを使うしかない。 PHPExcelでグラフを出力するための備忘録。 PHPExcelバージョン：1.8.1 Excel:2013 PHP:5.5.27 考えられるパターン テンプレートファイル使わない テンプレートファイルを使う -> グラフをあらかじめ埋め込んでいるもの テンプレートファイルを使う -> マクロ埋め込み **「テンプレートファイルを使う -> マクロ埋め込み」**で行ってみましょう。 （そもそも）ぇ、マクロ使えるの？ 「PHPExcel マク

現在は、普段使いでAtomを使用していて自分でスニペット作りたいなと思っていたんですが、 あまり方法がよくわからず足止めをくらっていました。 本日ようやく時間があり、スニペット登録方法が分かりました(遅い) チームでの開発だと、お決まりの型でコード書く事が多くなるのでスニペット登録は重要ですよね。 snippet.csonへの追加 Atom > Open Your Snippetsから、snippet.csonというファイルを開きます。 ここに、自分の入れたいスニペットを登録してゆきます。 ただ、このsnippet登録の際に、スニペットを適用するセレクタが必要で、 htmlであれば text.html.basic jsであれば source.js のような感じで、値が必要になります。 これを手っ取り早く知る方法として、スニペットを登録したいコードにカーソルを当てている状態で、 alt +

恥ずかしながらPlantUMLというツールを知らなかったんだけど、IntelliJ IDEAのPlantUMLプラグインで初体験。なにこれ快適。 テキストファイルなので、シーケンス図、クラス図などいろんな設計がVCSで管理・マージできるすばらしさ。 IntelliJ IDEAのPlantUML integrationでサクサクライブビュー。マウスとキーボードを往復せずとも書けるので思考を途切れさせません。 プロジェクトファイルと一緒に管理していれば不整合も減らせそう。 導入手順 プラグインリポジトリで'PlantUML integration'検索、インストール。PlantUML本体も含まれる？ので別途インストールは不要です。 シーケンス図以外の描画に使う'graphviz'をインストール。macなら'brew install graphviz'でOK。 プラグインの設定でgraphviz

こんにちは！LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 皆様、CSS書いてますでしょうか。 今回はSMACSSやBEMをある程度ご存知の方向けに、コンポーネントをマークアップする際に役立つテクニックと題して、「SMACSSを使う際に役立つテクニック」「BEMを使う際に役立つテクニック」「さまざまなシーンで役立つテクニック」をご紹介したいと思います。 なお、SMACSSやBEMをご存知ない方は、本記事の参考文献＆記事のリンクが参考になると思いますので、はじめにこちらをご参照いただければと思います。 ※「コンポーネント」という言葉は、使われるシーンによってさまざまな意味になりえますが、本記事においては「Webページを構成するパーツ」と定義させていただきます。 SMACSSを使う際に役立つテクニック編 まずはSMACSSを使う際に役立つテクニックからご紹介します。

DropboxにGitリポジトリを保存している人は多いかと思います。筆者もそうやって使っています。ただしこの場合、ファイルを下手に編集していると編集中コピーができあがってしまうことがあります。 そこで使ってみたいのがgit-remote-dropboxです。git-remote-dropboxはまさにDropboxをGitリポジトリのマスターにしてくれるソフトウェアです。 git-remote-dropboxの使い方 git-remote-dropboxをインストールすると、次のようにdropbox::が使えるようになります。 $ git clone "dropbox::/Files" これを実行すると手元のディレクトリにリポジトリが作成されます。もしDropboxにディレクトリがない場合は自動的に生成されます。git-remote-dropboxはローカルではなく、Web APIを使って

【Service Worker最前線】仕様策定の現場で何が議論されているのか？ 安田 絹子 昨年末頃からホットなトピックになりつつある「Service Worker[1]」ですが、その先行実装が落ち着いてきた今夏、仕様に対する提案や今後の方向性などについて話し合うF2F（Face-to-Face）ミーティングがサンフランシスコで開かれました。本稿では、このミーティングの様子を中心に、Service Workerの最近、そしてこれからの論点をいくつか解説してみたいと思います。 Service Workerは昨年5月に最初のドラフトが公開されたばかりの新しいAPIですが、Webの前提を変える可能性を持った基盤APIとして注目されています。Service WorkerはあくまでWebの1つのAPIにすぎませんが、このミーティングではWebのこれからの方向性を考える上でも興味深い議論がいくつかなさ

二週間ほど前からなぜか急にElectronを触りはじめたんですが、題材につくっているretro-twitter-clientというTwitterクライアントの v0.0.12 を出しました。別に各バージョンごとにブログで報告しているとかそういうことはなくて、急にv0.0.12を報告しています。ありがとうございます。折角なので最近の変更点を紹介します。 キーボードショートカット タブを移動するためのキーボードショートカットを追加しました。Macの場合は ⌘+] で次、⌘+[ で前のタブに移動できます。よく使う検索語句を登録しておくカスタムタブ機能など、今後もタブを便利にしていく可能性があるので、いまのうちに便利機能を付けておこうという気持ちです。他に、検索ボックスにフォーカスするとか、DevToolsを開いて内部実装を調べるとか、いろいろ便利なものを適当に付けています。メニューに項目も追加さ

B! 331 0 0 0 SSH関連のポストが結構たまったので取り敢えずのまとめ。 SSHクライアント Windows Mac Android/iPhone 多段SSH 外部から見れないページを外部から見る方法 その他ポートフォワード 同じサーバーに複数接続時に接続高速化 接続を強化 無料ダイナミックDNS Mac関連 SSHクライアント ターミナルです。 LinuxならGnomeターミナルなりなんなり入ってる物で良いでしょうし、 Macも取り敢えずは入ってるターミナル.appで使えます。 Windowsでは現段階ではコマンドプロンプトやPowerShellではsshがサポートされてないので 1 何らかの物を入れてあげる必要があります。 Windows Windowsでは今パッと入れるのであれば MobaXtermが一番優れていると思います。 MobaXterm: Windowsでのcyg

はじめまして、リーン開発チームでバックエンド開発を担当している亀山（@kametec_jp）です。 早速ですが、タイトルの「社内WEBシステムを改修せずにChrome Extensionでユーザビリティを改善した話」に入りたいと思います。 リクルートライフスタイルには、おしゃれな会議室が色々あります。 こういうのとか、 こういうのとか、 こういうのとか、 イスや机や壁紙の異なる会議室がいくつも存在します。 そして、会議室は予約制になっており、社内のWEBシステムから予約を行って使用する形になっています。 問題点 社内のWEBシステムは、会議室予約を行う際に、会議室の名前と定員人数しかわからない仕様になっており、 予約した後、会議室を使う直前になって適切ではない部屋だと判明する、ということが何度かありました。 ※画面のスクリーンショット（一部ぼかしてます） 改善案 現状のシステムがイケてない