Google ChromeをWebアプリケーション開発に使っている方はたくさんいます。なぜならば、ChromeのDevToolsが便利だからです。ソースを見たり、編集したり、さらにブレークポイントを仕込んで処理をとめたりとWeb開発を大いに加速してくれる存在です。 そんなDevToolsだけを切り離したアプリケーションがChrome DevTools Appです。実用と言うよりも挑戦的な試みではありますが、面白いソフトウェアです。 Chrome DevTools Appの使い方 Chrome DevTools AppはGoogle ChromeのDevTools部分だけをnode-webkitを使ってアプリ化しています。同じようにnode-webkitを使って作ったアプリのデバッグに使える可能性もあるでしょう。ブラウザと密着してしまっているように見えましたが、こうやってデバッグ機能だけを切

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コードのコピペは絶対に悪であるという訳ではありませんが、そこにはメソッド、関数としてまとめられるかも知れないというリファクタリングの余地があります。なのでリファクタリングを行う際には一度既存のコードについて重複した部分がないかチェックしてみると良いでしょう。 クライアントサイドのJavaScriptやnodeで作ったアプリケーションであればjsinspectを使ってみましょう。 jsinspectの使い方 インストールはnpmで行えます。 $ npm install -g jsinspect インストールが終わったらソースコードのあるディレクトリを指定するだけです。 $ jsinspect ./ Match - 2 instances ./app.js:12,18 ./app.js

チャットやコミュニティサイトをはじめ、Webサイトを訪れているユーザに通知を投げたいと思うケースは多々あります。HTML5のデスクトップ通知を使う手もありますが、サポートしていないブラウザもあります。 そこで試してみたいのがHTML5 Push Notificationsです。サイトの訪問中にしか使えませんが、サーバサイドでも簡単に使えるデスクトップ通知ツールです。 HTML5 Push Notificationsの使い方 送信例。左側の画面で書いた文字が両方の画面に通知として表示されています。 文字を変えれば通知も変更できます。 HTML5 Push Notificationsはサーバサイドからも通知を送信できます。例えばPHPの場合、次のようなコードでできます。 $app_key = 'YOUR_APP_KEY'; $app_secret = 'YOUR_APP_SECRET'; $a

みなさんは、 ・社内：複数人でコーディングをしている ・パートナー：五月雨式にコードのやりとり ・個人：いろんなバージョンのコードを要求されたので管理しないといけない ・WordPress：コード改変したらサイトがぶっ壊れたので前の状態に戻したい という場面に遭遇したことがあるかもしれません。 その時に有益なのが、ソースの「バージョン管理」を導入すること。そのバージョン管理の中でも有名なのが Git というシステム。そして、その Git を使ってソースコードをホスティングするサービスが、GitHub です。オープンソースであれば無料で使うことが出来ます。 今日は、GitHub を使って、実際に Git のレポジトリを作成し、 WordPress サイトをみんなで共同で改変していくことを体験しませんか？

Nexus 5を常用しているAndroidユーザになってしばらく経つので、そろそろAndroidアプリを作りたい気持ちになってきた。先日、そのためにMacBook Proを新調したほどの、気の入れようである。ちょうど3連休だったので、2日目・3日目を使って、あれこれ調べながら、初めてのAndroidアプリ開発をしてみた。 kentaro/palimpsest · GitHub やりたかったこと まずは簡単なタスク管理ツールを作ってみようと思った。こんな感じ。 毎日習慣的に行いたいタスクがいくつかあるので、ちゃんと習慣的に行えるよう管理したい タスクは、名前と回数からなる(例: 腕立て伏せを30回する、英和辞典を5ページ読む、みたいな) また、ちゃんとしなかった場合は、前日以前の回数が今日の分に加算されるので、ちゃんと毎日やらないと大変なことになる 画面 ほぼ「sqliteのテーブル1つに対

Web制作やアプリ開発では、本格的なデザインに入る前にワイヤーフレーム作ることがよくあります。制作会社によってはPower pointやExcelなどが使われることもありますが、それらはワイヤーフレームに最適化されておらず、やや不便。 以下で紹介するようなツールを使えば、もっと便利で豊富な機能を使うことができます。Excel方眼紙から卒業したい！という方は要チェック。 無料で使えるワイヤーフレームツールまとめ JUSTINMIND こちらはワイヤーフレームからデザインまで可能なプロトタイピングツール。PCサイトはもちろん、モバイル向けのサイトやアプリのワイヤーフレームも作れます。Photoshopのような洗練されたUIで、ドラッグ＆ドロップでコンテンツを追加することができます。 Wireframe CC こちらは完全フリーで使えるワイヤーフレームツール。Webアプリなのでブラウザ上で編集す

CI サービスをいくつか触ってみたのでまとめ。 今回の目的は、テストを実行すること。なので、ビルドやデプロイ辺りはちゃんとは見ていない。 ドキュメントで確認しただけの項目などもあったりするので、間違っていたらごめんなさい。教えてもらえると助かります。 ただ、これは記事を書いた時点での比較で、今後のサービスの変更に対応する予定はないです。 触ってみたサービス一覧 アルファベット順。 AppVeyor CircleCI Drone IO Magnum CI semaphore shippable Travis CI wercker codeship ってのもあったけど、無料プランは月100ビルドまでとかで常用には耐えないと感じたので中身見てない。 機能比較 機能比較は全て無料プランでのもの。有料だと対応している場合でもここでは x にしている。 比較項目は私の独断と偏見で適当に選出した。 項目

最近、Meteorを試して見てます。これはちょっとスゴイ。正直、当時Railsに受けたのと同じ興奮がある。 Meteorの説明は「リアルタイムWebアプリケーションフレームワークMeteorについて」あたりが分かりやすいので、こちら参照。 実は、2012年の公開時から存在は知ってたんだけど、チュートリアル見たくらいで特に興味はありませんでした。 しかし、今は違います。それは主にスマホアプリの開発にかなりの威力を発揮しそうだと気づいたからです。 まず、なんで公開時にあまり興味がなかったかですが、そもそもRailsなど同レイヤーのWebアプリケーションの開発FWとして考えていました。 その場合 SPA リアクティブな開発モデル クライアントとサーバを同一コード(JS)で書ける サーバサイドのDBをクライアントから透過的に呼び出せる(IsomorphicなDBモデル) という特徴はせいぜいリアク

実はかなり前から気になっていた会社さんだったのでこうしてディーーープに絡む事ができて大変嬉しかったです。今後共「世界規模でチームを作るディレクター」を増やしつつ応援したってください。

GitHub: jackfranklin/the-refactoring-tales 読んだ日付: 2015年1月11日 まだ4章の途中までしか書かれてないですが、ウェブ版は無料で読めてPDF版等は買えるようになるようです(6-7章ぐらい予定) The Refactoring Tales - JavaScript Playground またGitHubにソースが公開されています(ウェブページはまだ反映されてない感じのtypoの修正等がありました) 感想 1,2章はフロントのJavaScriptで、jQuery世界を例にjQueryでべったり書いてしまったものをどうやって分けていくかの話。 1章はとても読みやすくて完成度もあるので読んでみるといい気がします、2章のカヌーセルの話はもっと深くやっても良かったような気がします。 縦に並ぶ$を見かけるとつらい感じになりますが、まずは手が出しやすい場

Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順 Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置 Hover.cssを呼び出す Hover.css用のタグを記入する 利用するファイルも、hover.css（縮小版はhover-min.css）

TrackerTrackerはPivotal Trackerのデータをスクラムにあった形で表示してくれるソフトウェアです。 最近のプロジェクト管理のスタイルはアジャイルが多いように思います。また、その中でも人気があるのはスクラムです。Pivotal Trackerのデータをスクラムにしてビジュアル化してくれるのがTrackerTrackerです。 カラムがステータス、その中にタスクが入っています。 タグによる絞り込みが可能です。 タグは複数設定できます。 イテレーションのステータスやベロシティをグラフ化できます。 TrackerTrackerはPivotal TrackerのデータをWeb API経由で取得して表示しています。さらに表示だけでなく、操作による書き込みにも対応しています。複数プロジェクトの出し分けにも対応しており、よりアジャイルなプロジェクト管理に最適な画面を提供します。 T

2013/3/9 NADECで講演した内容です。 都合上、やったみた結果の一部内容は省きました。 何かあればTwitterで @arimamoto までお願いします (^^)/ Read less

デザインユニットUXデザイン担当の酒井です。 mixiでは昨年来、最重要キーワードとして「ユーザーファースト」を掲げ、ユーザー様のご意見やご利用状況に基づいたサービス施策の実現を素早く行えるようになるために、開発プロセスの改善を継続的に行なっています。今回は、この「ユーザーファースト」なmixiを実現するための取り組みについて、具体的にご紹介していきたいと思います。 なぜ今、ユーザーファーストなのか？ 昨年11月に開催した『ユーザーファーストウィーク』で笠原社長からもご説明させていただきましたとおり、mixiというサービスが大きく成長したこれまでの数年の間に、いつのまにかユーザー様と私達との間に「ギャップ」が生まれてしまったという強い反省があります。mixiを取り巻く外部環境の変化に対応していく中で、これまでもユーザー様にとっての「心地よいつながり」とは何なのかを真摯に検討し、時流に合わせ