正規表現をサッと確認するのに重宝した神サイトを紹介してみる | DevelopersIO
はじめに こんぬづは、ゲーム用のPCを東京に置いているため、実家に帰ってくるとゲームができなくてしんどい田中です。こういうときに限って、ゲームの実況動画を見てしまったりして余計に心を痛めています。 さて今回は、今年正規表現をサッと確認するのに重宝した Regexper を紹介します。 Regexper こんなサイトです。とてもシンプル。 以下のような特徴があります。 正規表現を図で表示してくれる 表示した図をダウンロードできる 正規表現を図で表示してくれる 入力欄に正規表現を入力して、Displayボタンを押すと、以下の画像のようにその正規表現のパターンを図示してくれます。 どんな範囲でパターンマッチしてくれるのかがとても見やすくなります。 表示した図をダウンロードできる 入力欄の右下にあるDownloadボタンを押せば、表示した図をダウンロードすることができます。 例えば正規表現の仕様を
fish shell を使いたい人生だった | DevelopersIO
2019年4月15日: fisher version 3.2.8にアップデートしました。これに伴い、もともと記事内で記載していた fisher install コマンドを 、fisher add に変更しました ずっとbashを使っていました。zsh、興味はありましたが、プラグインのための設定を書くのがなんとなく大変そうだという理由で、敬遠していました。そこに fish shell （以下 fish） が手を差し伸べてくれたのです。結論から書くと、bash と同程度の設定ファイルの記述量で、ディレクトリ間の移動やコマンド履歴の呼び出しといった利便性は飛躍的に向上しました。そして見た目が良い。入れて損はありません。 想定読者 Mac で bash を使っている方。 バージョン情報 ソフトウェア バージョン どこまでやるか このたぐいの作業、はじめるとキリがありません。調べるうちにさらに便利な
node.jsのいろいろなモジュール51 – OAuth2認証形式でGoogleスプレッドシートにアクセス | DevelopersIO
node.jsでGoogle Spread Sheetにアクセスその２ OAuth2でGoogle Spreadsheetにアクセスする 前回はサービスアカウント形式の認証とシート共有を使ってGoogleスプレッドシートにAPIでアクセスしました。 しかし、この方法の場合、セキュリティによりシート共有を制限している場合などには使用できません。 Googleでは他にもいくつか認証方法があり、今回はOAuth2を使用してスプレッドシートにアクセスする方法について紹介します。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.10.5 Node : v4.1.2 データとAPIを使用する準備 1.シートの用意とGoogle Developer コンソールにてAPI許可 前回と同じシートを使用します。 Drive APIの許可をしてないなら、許可しておきましょ
Backbone.jsでつくるMVPなUIパターン【タブ】 | DevelopersIO
今回はBackbone.jsを使ってタブUIを作ってみたいと思います。デザインはTwitter Bootstrapをつかって以下のようにしました。 世界的に名高い企業の名前が並んでいますね。 デザインはhtmlを仮組みしてBootstrapで既にできていることにします。（本題と離れてしまうので…すみません＞＜） ボタンの部分に active というクラスをつけると選択中のデザインに変わり、 内容の部分におなじく active というクラスをつけると display: block; となり表示される仕組みです。 すべてactiveな状態 すべて非activeな状態 htmlはこちらです <div id='ui-tab'> <ul class='nav nav-tabs'> <li class="active"> <a href="#apple">Apple</a> </li> <li> <a
Webプログラマーの三種の神器の続き | DevelopersIO
自分がプログラムを書き始めた頃、どんな環境で他のプログラマーが仕事をしているのか分からなかったのですが、昼休みのWebサーフィン中に以下の記事を見つけました。 新入学生/新社会人応援企画: 第3回 あるWebプログラマーの作業環境――豪傑の三種の神器 はてなの伊藤直也さんが新人プログラマー向けに自身の環境を紹介している内容ですごく参考になりました。 そこで紹介しているソフトウェアは次の三つでした。 Emacs Zsh Screen それぞれ使いこなすようになるには大変でしたが、馴れてからはこれらのソフトウェアにものすごく助けられています(まだ使いこなせていない機能も沢山あります)。 この記事は2007年に書かれていて今はインストール方法やパッケージ管理など少し状況が変わっているので、そのあたりをここで書いていこうかと思います（インストール方法はMac環境のみ書いています、事前にHomebr
突撃！隣の開発環境 パート1 【Wantedly編】 | DevelopersIO
こんにちは！おおはしりきたけです。今回は突撃！隣の開発環境というタイトルでイケてる開発会社さんの開発環境についてインタビューさせてもらいました。第1弾として、iOS オールスター勉強会でベストプレゼンターに輝いたWantedlyの杉上さんとRubyエンジニアの森脇さんにお願いしました。Wantedlyさんは既に@yimajoさんがQiitaで連載しているiOSアプリ開発の現場で訊いてみた！シリーズでiOSの開発現場についてのインタビューはされており一部重複してしまっている部分もありますが、ご了承下さい。 突撃！隣の開発環境とは 技術事例やノウハウなどは、ブログや勉強会などで共有されることが多いと思います。しかし、各社の開発環境や開発体制などは意外と共有されていないこと多いと思います。ノウハウの流出になるかもしれませんが、それ以上に、より良い開発を目指している会社さん同士で情報交換を行い、良
MacBook Airの動作が重くなったのでメンテナンスしたら軽くなった件 | DevelopersIO
MacBook Airが重い クラスメソッドでは、AWSチーム発足時から、JOINしたメンバーにMacBook Airを標準機として配っていました。最近、動作が遅くて困っているという声を聞くようになりました。全員がVMWare FusionにWindowsを入れていたり、Docker使ったりと、開発環境を整えているので、確かにメモリ8GBでも足りないかもしれません。私のマシンも文字入力で表示がワンテンポ遅れるほどの重さで困った状態でした。 今回試したマシンは、MacBook Air(13-inch, Mid 2013), 1.7GHz Core i7, メモリ8GB、OS X Yosemite(10.10.3)です。 UPDATE : 貴重なご意見頂いていますので追加しています。 解決策 最新マシンに乗り換える エンジニアはマシンが遅いと仕事になりません。そこで、現時点で最新で全部盛りのM
AWSのアカウント開設後にすべき事をまとめてみた | DevelopersIO
はじめに AWSチームのすずきです。 クラウドサービスのAWS、有効なクレジットカードと電話番号があれば、10分ほどでその利用が開始できます。 AWS アカウント作成の流れ この様に簡単に取得できるAWSのアカウントですが、その管理が不適切な場合、意図せぬ事故の原因となることがあります。 今回、AWSを安全に安心して利用するため、AWSアカウントを開設後に実施すべき設定についてまとめてみました。 AWS環境が、弊社クラスメソッドメンバーズを初めとする請求代行サービスを利用されている場合、一部当てはまらない項目もありますのでご注意ください。 目次 ルートアカウントの保護 MFA（多要素認証）の導入 アクセスキーとシークレットキーの確認 IAM（Identity and Access Management）設定 IAMグループ作成 IAMユーザ作成 IAMユーザの認証設定 IAMのパスワードポ
[Apiary]Markdownで始めるAPI開発とAPIドキュメント作成 | DevelopersIO
APIを作るとき みなさん、毎日API使ってますか？私は、ワンライナーでAPIをコールすることにハマっています。さて、いつも使っているAPIを作る側になったとき、どのように設計していますでしょうか？また、作ったAPIをどのように使ってもらっていますか？そんな疑問に応えるサービスがApiaryです。 Apiaryとは？ Apiaryは、REST APIをサクッと書けるサービスです。また、APIドキュメントも生成してくれます。モックサーバも提供してくれます。API利用サンプルコードも作ってくれます。うん、使わないって選択肢は無いですねｗ。 無料登録すると早速使えるようになります。チームでプライベートなAPI開発をしたければ有料プランを選択してください。 API開発の流れ API開発の流れは、まずはじめにMarkdown形式でドキュメントを書きます。既にサンプルがあるのでこれを使ってみましょう。
![[Apiary]Markdownで始めるAPI開発とAPIドキュメント作成 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/60d7120d91185f1739fec5fcbd006f066b98e9f6/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F02%2Fapiary-logo.png){kind=logo}
お名前.comからAmazon Route 53へドメインを移管する | DevelopersIO
こんにちは、虎塚です。 Amazon Route 53でドメインが管理できるようになって数ヶ月がたちました。Route 53では、Amazon Route 53でドメインを購入する ｜ Developers.IOにあるように、ドメインを新規に取得することができます。さらに、別のドメインレジストラで登録していたドメインを、移管して管理することもできます。 そこで今日は、他のドメインレジストラに登録しているドメインをRoute 53へ移管する手順を紹介します。例として、 お名前.comで管理しているドメインを想定して説明します。 ちなみに、移管手続きからAmazon側での処理完了までの所要時間は、移管元の事業者によって異なります（移管元が何も応答しなかった場合、5〜7日間かかるとのことです）。今回は約6時間でした。 はじめに この記事の内容は、AWSの公式ドキュメントをスクリーンショット入りで
快適 Markdown ライフを送ろう！Mac で使える Markdown 支援ツール6選 | DevelopersIO
Markdown 形式のドキュメントを快適に書こう ちょっとしたメモから Wiki のような文書まで、幅広く利用されている Markdown。私も簡単なメモなどや外部メディア記事の原稿の執筆などに利用しています。 適当なテキストエディタで適当に書くだけでも良いのですが、Mac で Markdown 形式のドキュメントを書く上で便利そうなツール (プラグイン) がいくつかあったので、個人的なまとめを公開したいと思います。 Sublime Text 3 + 各種プラグイン Markdown 形式のドキュメントの作成には、主に Sublime Text 3 を使っています。Sublime Text は言わずと知れた有名テキストエディタで、今やテキストエディタの代表格にまで上り詰めました。バージョン2で一躍有名となり、現在はバージョン3が主流になっています。 Package Control のイン
WebアイコンフォントFont AwesomeのSCSS版を使ってみる | DevelopersIO
画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。 Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。 【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 注意 今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたい
【Grunt】styledoccoでCSSスタイルガイドを自動作成をしてみる。 | DevelopersIO
アジェンダ styledoccoとは? 導入準備 Gruntの設定 CSSのコメント記述方法 動作確認 styledoccoとは？ Node.jsを使用して、CSSのスタイルガイドを作成してくれます。 導入準備 今回はNode.jsのパッケージを使用します。当ブログでも環境構築のご紹介していますので、以下を参考にNode.jsをインストールしてください。 【もうすぐバレンタインデー】デザイナーがCoffeeScprit、TypeScriptの開発環境（Win/Mac）をインストールしてみる 今回の動作環境 OS:windows7 Gruntをインストールする。 今回styledoccoを自動化するに際に、Gruntにお世話になるので以下コマンドからGruntをインスールします。 npm install -g grunt npm install -g grunt-cli gruntで自動化し
Yeomanを使ってAngularJSアプリのひな形をつくってみる | DevelopersIO
AngularJSが人気上昇中らしいです 少し前にJavaScriptフレームワークの人気を集計した結果が発表されてました。(Githubのwatcher数をみてるらしい） 圧倒的にbackbone.jsが抜けてますが、AngularJSもここ数ヶ月で急上昇しています。 backboneは少しだけ使ったことがありますが、AngularJSはいままであまり使ったことがありませんでした。 ここでもAngularJSの紹介をしていますが、いい機会なので、この記事ではYeomanをつかってAngularJSを動かしてみます。 AngularJSとは AngularJSとは、Googleとユーザーコミュニティによって開発されているオープンソースのJavaScriptフレームワークで、昨年バージョン1.0がリリースされました。 データのバインディングとテンプレートエンジン機能によって、JavaScri
[Grunt]Yeomanで開発ワークフローを楽にしよう[bower] | DevelopersIO
※2013/5/14 Yoemanってスペルミスしまくってたのを修正 Yeoman(ヨーマン)とは LESS、Sass、compass、Coffeescript、TypeScript等々、クライアントサイドのWebアプリケーション技術は多様化しています。 Coffee ScriptやLESS等の拡張言語はコンパイルする必要がありますし、jsファイルはconcat/最適化/ミニファイすることも多いです。 ソースを修正するたびにいちいち手動でコンパイルしたり最適化するのは、本来注力すべき事象ではありません。 Yeomanは開発者がアプリケーション開発に注力できるよう、アプリのひな形生成からテストやコンパイル、ファイル最適化といったワークフローを提供してくれます。 Yeomanについてはここでも少しふれていますが、開発を楽に楽しくするためのツールが満載のようですね。 まずはYoemonについての
身につけておきたいWebサイト高速化テクニック #3｜画像形式の基礎知識 | DevelopersIO
こんにちは、ご無沙汰しています。 Web担当の野中です。 前回の第2回「検証ツールとそもそもHTTPって何だ編」から少し時間が経ってしまいました。 というのもテクニックを紹介するために予想以上の予備知識の説明と検証・調査が必要になり、さらにどう順序立てて解説すべきか悩み時間がかかってしまいました。 ちなみに第2回では、Webサイト高速化に関連してくるHTTPについて基本的なことを紹介しています。 より詳しくHTTPについて解説したCodezineさまに寄稿している連載も是非チェックしてみてください。 本題 さて、今回から実践編ということでフロントエンド側のWebサイト高速化対策の１つ、画像の最適化について紹介します。 初学者向けに細かく基本的なことまで解説しますので、記事を3つに分けます。 画像最適化1回目の本記事では、画像に関する基礎知識について紹介します。 未だにWebサイト高速化の具
nodebrew, npm, grunt 環境構築手順 | DevelopersIO
注) macosxでの手順です。 nodebrew nodebrewはバージョンアップの速いnode.jsを、複数バージョン管理するためのツールです。 セットアップ curl $ curl https://raw.github.com/hokaccha/nodebrew/master/nodebrew | perl - setup wget $ wget https://raw.github.com/hokaccha/nodebrew/master/nodebrew $ perl nodebrew setup パス設定 .nodebrew内にnode.js がインストールされるので、PATH通します。 .zshrcや.bashrc などのファイルにこれを足せば良いだけです。 export PATH=$HOME/.nodebrew/current/bin:$PATH $ source ~/.
jQuery 2.0 Grunt ビルド | DevelopersIO
jQuery 2.0 をビルドしてみよう jQuery 2.0 を自前でビルドしてみます。自前でビルドすることでモジュールを省くことができます。 ビルド ビルドするためにはgruntコマンドを使います。インストールしていない場合は、gruntをインストールしておきます。 gruntについては、nodebrew, npm, grunt 環境構築手順でインストールしてください。 また、grunt -version コマンドでgrunt-cliが入っていない場合は、grunt-cliをインストールしておきます。 $ grunt -version grunt-cli v0.1.7 grunt v0.4.1 ソース取得 githubからjqueryのソースを取得します git clone git://github.com/jquery/jquery.git 依存ファイル取得 npm install
【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」を開講しました！！ | DevelopersIO
【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」を開講しました！！ クラスメソッドブログ課外授業5日目 今回は今大人気のSublimeText2とSass&Compassの勉強会でした。弊社のブログでも大変人気なこのシリーズですが、今回も募集30名という枠に対して倍近い応募があり人気の高さが分かりました。 1時間目：ちょっと心地よいHTMLコーディング with Sublime Text2 1時間目は、清田 隆志によるsublime text 2 のパッケージ（プラグイン）についての話でした。発表したスライドは以下になります。 スライドのリンクは以下になります。 https://dev.classmethod.jp/slide/html-coding-with-sublime-text2/ ロレム・イプサムについて熱く語る清田先生。サ
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
