タグ

ブックマーク / dev.classmethod.jp (17)

  • Visual Studio CodeによるRubyのデバッグ | DevelopersIO

    はじめに 好物はインフラとフロントエンドのかじわらゆたかです。 Facebookを見ていたらVisual Studio CodeでRubyがデバッグできるというのを見かけたので、試してみました。 環境 OS : OSX El Capitan (10.11.4) Visual Studio Code : 1.0.0 rbenv 1.0.0 ruby用の拡張を導入する。 Visual StudioのMarketplaceにしたがってインストールを進めていきます。 Ruby | Visual Studio Marketplace Visual Studio Code上でF1キーを押下し、ext install rubyと入力することでダイアログが表示されるので、 拡張機能のインストールと選択します。 インストールが完了すると、Visual Studio Codeの再起動を促されるため、再起動しま

    Visual Studio CodeによるRubyのデバッグ | DevelopersIO
  • CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO

    例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く(このサンプルはChromeブラウザでの

    CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
  • 突撃!隣の開発環境 パート1 【Wantedly編】 | DevelopersIO

    こんにちは!おおはしりきたけです。今回は突撃!隣の開発環境というタイトルでイケてる開発会社さんの開発環境についてインタビューさせてもらいました。第1弾として、iOS オールスター勉強会でベストプレゼンターに輝いたWantedlyの杉上さんとRubyエンジニアの森脇さんにお願いしました。Wantedlyさんは既に@yimajoさんがQiitaで連載しているiOSアプリ開発の現場で訊いてみた!シリーズでiOSの開発現場についてのインタビューはされており一部重複してしまっている部分もありますが、ご了承下さい。 突撃!隣の開発環境とは 技術事例やノウハウなどは、ブログや勉強会などで共有されることが多いと思います。しかし、各社の開発環境や開発体制などは意外と共有されていないこと多いと思います。ノウハウの流出になるかもしれませんが、それ以上に、より良い開発を目指している会社さん同士で情報交換を行い、良

    突撃!隣の開発環境 パート1 【Wantedly編】 | DevelopersIO
  • 快適 Markdown ライフを送ろう!Mac で使える Markdown 支援ツール6選 | DevelopersIO

    Markdown 形式のドキュメントを快適に書こう ちょっとしたメモから Wiki のような文書まで、幅広く利用されている Markdown。私も簡単なメモなどや外部メディア記事の原稿の執筆などに利用しています。 適当なテキストエディタで適当に書くだけでも良いのですが、MacMarkdown 形式のドキュメントを書く上で便利そうなツール (プラグイン) がいくつかあったので、個人的なまとめを公開したいと思います。 Sublime Text 3 + 各種プラグイン Markdown 形式のドキュメントの作成には、主に Sublime Text 3 を使っています。Sublime Text は言わずと知れた有名テキストエディタで、今やテキストエディタの代表格にまで上り詰めました。バージョン2で一躍有名となり、現在はバージョン3が主流になっています。 Package Control のイン

    快適 Markdown ライフを送ろう!Mac で使える Markdown 支援ツール6選 | DevelopersIO
  • node.JsにおけるCSRF対策 | DevelopersIO

    はじめに 現在参画中の案件ではNode.js + Expressを用いた開発を行っています。 開発を行っているのはWebアプリのため、当然セキュリティ対策も必要になってきます。 今回は、CSRF(クロスサイトリクエストフォージェリ)対策として、 ミドルウェアであるcsurfを検証しました。 CSRF(クロスサイトリクエストフォージェリ)とは Webサイトにスクリプトや自動転送(HTTPリダイレクト)を仕込むことによって、閲覧者に意図せず別のWebサイト上で何らかの操作(掲示板への書き込みなど)を行わせる攻撃手法。 CSRFとは 〔 クロスサイトリクエストフォージェリ 〕 【 XSRF 】 - 意味/解説/説明/定義 : IT用語辞典 この攻撃の特徴としては、利用者が攻撃者が用意したリンクやスクリプトにアクセスすることで、 来フローとは異なるフローでアクセスを行うといった点でです。 対策と

    node.JsにおけるCSRF対策 | DevelopersIO
  • 新しいプログラミング言語 Swift | DevelopersIO

    Objective-Cに替わる新しいプログラミング言語Swiftの登場 WWDC2014で発表された新しいプログラミング言語Swiftでできることを紹介したいと思います。 今までとこれから Swift使うとこんなにコードが短くなるぜという例です。 今まで これから 確かにスマートですね。 言語ガイドをダウンロード iBookでガイドを読めますのでダウンロードしてみましょう。 変数の宣言 varは変数、letは定数 var myVar = 42 myVar = 50 let myConst = 42 コントロール if,switch,for-in,for,while,do-while let individualScores = [76, 43, 103, 87, 12] var teamScore = 0 for score in individualScores { if score >

    新しいプログラミング言語 Swift | DevelopersIO
  • AngularJS 案件ふりかえり | DevelopersIO

    4 ヶ月強続いた案件がひと段落したので、過去に投下した下記エントリを元に振り返ってみました。 https://dev.classmethod.jp/client-side/javascript/angularjs12xstartup/ angular.module() の戻り値をグローバル変数に格納した代償 以前、Angular モジュールをグローバル変数に格納するよう var ns = ns || {}; ns.App = angular.module('testApp', …); と記述していましたが、この記法を採用して ngmin が動かなくなる…という現象に遭いました。なので、Angular コンポーネント ( controller, service など ) を定義するときには、以下のように記述することにしました。 (function () { 'use strict'; ang

    AngularJS 案件ふりかえり | DevelopersIO
  • Immutable Infrastructure Conference #1 に参加してきた #immutableinfra | DevelopersIO

    Immutable Infrastructure Conference #1 : ATND 2014/03/25 Immutable Infrastructure Conference #1 #immutableinfra - Togetterまとめ 最近は最早バズワード化した感も充分ある『Immutable Infrastructure』。この長〜いフレーズを発音する際に途中発音を噛む人が後を絶たない今日この頃、皆様いかがお過ごしでしょうか。(発音に悩んでいる、何とか噛まないようにしたい!という方は以下のエントリを参考にしてみる事をお勧めします) [小ネタ]噛まずにImmutable Infrastructureと言うために | Developers.IO さて、題です。こちらの『Immutable Infrastructure Conference #1』、発表と同時に参加応募者が殺

    Immutable Infrastructure Conference #1 に参加してきた #immutableinfra | DevelopersIO
  • [iOS 7] [iBeacon] Mac を Beacon 端末にする | DevelopersIO

    2014/11/06 更新 CBPeripheralManager が Yosemite (OS X 10.10) では動かないバグがあるようです。 そのため Mac で試す場合、Mavericks 以前の OS X バージョンで実行する必要があります。 http://stackoverflow.com/questions/25492316/cbperipheralmanager-startadvertising-not-working-on-os-x-yosemite 現在既にバグレポートが報告されているようなので、 次のバージョンでFixされることを期待するしかないようです。 情報を提供くださいました ppia さん、誠にありがとうございます! 2014/11/19 更新 Yosemite (OS X 10.10) で CBPeripheralManager を動作させたい場合、 Bl

    [iOS 7] [iBeacon] Mac を Beacon 端末にする | DevelopersIO
  • AngularJS コードの構造化 | DevelopersIO

    複数人で AngularJS を利用した Web アプリケーションを構築するときに必要なルールをまとめてみました。 ( あくまで策定中のルールであり、今後も改変する可能性があります。また、ベストプラクティスを謳うものではありません ) 使用 AngularJS のバージョン angular.js 1.2.5 angular-route.js 1.2.5 参考サイト Dan Wahlin's Blog | Structuring AngularJS Code http://weblogs.asp.net/dwahlin/archive/2013/12/01/structuring-angularjs-code.aspx GitHub | mgechev / angularjs-style-guide / README-ja-jp.md https://github.com/mgechev/a

    AngularJS コードの構造化 | DevelopersIO
  • CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた | DevelopersIO

    みなさまこんにちわ。 Webサイト高速化やSCSSの連載を書いている野中です。 そういえばGoogle Readerが終了するとのことでとても残念ですね。 読者のみなさまも次の引っ越し先ツール探しで忙しいところだと思います。 そこで、クラスメソッド開発ブログのRSSも忘れずに登録をお願いします。 とても更新頻度の高いブログということもあり、いろいろな切り口のRSSを用意しています。 題 それでは題ですが、レイアウト系のCSSフレームワークって色々ありますよね。 個人的にはHTML上のクラスにあまり意味のない文字列は入れたくないので使っていませんでした。HTMLも編集しなければならないので。 ふとSass/SCSSでExtendしたりMixinsで制御できるものであれば無駄なクラス指定を減らして可変でレスポンシブなグリッド制御ができるんじゃないか思って探してみたら色々とありました。 最初

    CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた | DevelopersIO
  • Node.js + MongoDB 位置情報を保存し検索する(CoffeeScriptで)【19日目】 | DevelopersIO

    MongoDB には、地理空間のインデックスが用意されていて、簡単に位置情報を操作することが出来ます。 今回は、つぶやきを HTML5 の Geolocation API から取得した位置情報とともに MongoDB に保存しておき、 現在地近くのつぶやきだけを検索して表示するという簡単なサンプルを作ってみます。 ありがたいことに、うえじゅんさんの作った Node.js + MongoDB のサンプルがあるのでこれをベースに作っていきましょう。 https://dev.classmethod.jp/server-side/node-socket-io-mongodb/ 位置情報を保存するフィールドを定義 つぶやきのモデルに位置情報の保存フィールドを定義します。 「message.coffee」 mongo = require 'mongoose' mongo.connect 'mongod

    Node.js + MongoDB 位置情報を保存し検索する(CoffeeScriptで)【19日目】 | DevelopersIO
  • BootstrapのCSSを簡単にいい感じにカスタマイズできる厳選サービス2+1つ紹介 | DevelopersIO

    Bootstrapいいよね Bootstrapです。大人気の見た目系フレームワークですね。いろんなサイトで見かけます。 自分もそうなのですが、エンジニアでコードは書くけどデザインの事はよく知らない。だけど「使いやすくて、いい感じにしたい」という欲求を満たしてくれてます。ただ、デフォルトは見やすいんだけど、ちょっとカスタマイズしたいなとか、色指定があった場合など困りますね。例えばありそうなのが「コンテンツ管理画面を作りたい、デザインは特にこだわらない、けど使いやすいのがいいな。」とかさらに「イメージカラーが青だからそれベースで」とか。 そんなあなたにぴったりな厳選ツールを紹介しちゃいまっくすぅ〜! Lavish 〜 画像から配色を生成してくれます 〜 このサービスは画像を解析してBootstrapの配色を捻り出します。 何処かの企業向けに作る場合に企業のロゴなどから配色してみるといい感じにな

  • Sublime Text 2の基本とカスタマイズ【Vim風】

    2012年12月4日:Vim化について指摘と参考になる情報をいただいたので追記しました。 こんにちは、僕はVimユーザーです(ちなみにVimを完璧に使いこなしているわけではありません)。 今更ながら「Sublime Text 2」というナウでヤングなエディタも使いこなせるようになりたいと思い、Sublime Textの基設定からプラグインやスニペットの作り方まで調べた内容をこの記事にまとめることにしました。 細かい情報までまとめることはできなかったので、より詳しい内容を紹介してくださっているブログやサイトへのリンクを設けています。 この情報以外にもSublime Text 2をVimに近づけるプラグインやカスタマイズ方法があればコメントいただけるとうれしいです。 また、間違いがあればコメントいただければすぐに直します。よろしくお願いします! Sublime Text 2は有料($59)の

  • Backbone.js -JavaScriptのMVCフレームワーク- | DevelopersIO

    Backbone.jsとは? Backbone.jsは、JavaScriptによる大規模なアプリケーション開発を行う際に力を発揮するMVCフレームワークです。データバインディングとカスタムイベントを備えたModel、配列情報を表すCollection、イベントをハンドリングするView、サーバーサイドのアプリケーションと連携するためのRESTful JSONなどをフレームワークとして備えています。 大規模な業務アプリケーションのユーザーインタフェースをJavaScriptでゴリゴリと作ろうとした場合、100%に近い確率で失敗するかと思います。これは、Flexのようなビルド時のコンパイラエラーを検出できないこと、存在するフレームワークがインタラクションやビジュアルに特化していること、ブラウザーやOSの組合せでAPIレベルの仕様が異なる事、同じブラウザーでもバージョンの違いにより挙動が異なる事

  • node.js v0.8.1のClusterモジュールを試す | DevelopersIO

    node.js v0.8.0が出た。すぐにv0.8.1になった v0.8.0の特徴 すげぇ速くなったよ より安定したよ 子プロセス起動時の引数指定が変わったよ クラスターモジュールが最高っす ドメインモジュールが追加されたよ REPL(対話型node)が良くなったよ ビルドシステムがwafからgypになったよ いろいろ変わったな v0.8.1の特徴 V8エンジンを上げたよ。 v3.11.10.12 npmを上げたよ。 v1.1.33 いろいろ修正したよ セットアップ node.js v0.8.1のインストール手順です。 $ . .nvm/nvm.sh $ nvm install v0.8.1 $ nvm use v0.8.1 v0.8.1 $ npm -v 1.1.33 $ npm update クラスターモジュールを試す v0.8.0の目玉であるクラスターモジュールを試してみたいと思いま

    node.js v0.8.1のClusterモジュールを試す | DevelopersIO
  • AS3ライクにコーディングできるHTML5開発支援フレームワーク「Arctic.js」を触ってみました | DevelopersIO

    Arctic.jsとは Arctic.jsは、ActionScript3ライクに記述できる、主にゲーム開発で使用することを目的とした HTML5開発支援フレームワーク(JavaScriptライブラリ)です。 ディー・エヌ・エー(DeNA)が自社アプリ開発用に社内で使われていたようですが、2012年1月24日にオープンソース化されました。 Mobageの「ガンダムロワイヤル」などで使用されているとのことです。 ライセンスはMIT Licenseで提供されています。 以下のような特長があります。 豊富なアニメーション作成支援機能 表示ツリー、イベント伝播モデル ActionScript3.0*4と近いAPI による、Flash 開発経験者の学習負担軽減 各種スマートフォン OS の断片化を吸収し、開発工数を大幅に削減 ※ DeNA株式会社様のプレスリリースより抜粋させていただきました Arct

  • 1