[Sketch] 便利ランチャー Sketch Runnerをご紹介! #sketchplugin | DevelopersIO
Sketch Runner とは? こんにちは UI Designerの清田です。 今回は、 Sketchプラグインでお気に入りの Sketch Runnerをご紹介します。 Macユーザーではおなじみのランチャーアプリ「Alfred」はご存知かと思いますが、そのランチャー機能をSketch内で使用できるツールです。 Sketch 内のアートボードへのフォーカス出来たりと痒いところに手が届く機能を提供してくれているので、お試しあれっす。 インストール 必要環境 Sketch バージョン 3.7以上 それでは、インストールのご紹介。 公式サイトへアクセスし、プラグインをダウンロードします。 Runner.zipがダウンロードと解答し、Runner.sketchpluginを実行すると以下のSketchが起動され、 以下のアラートが表示されますがOKするとインストールされます。 正常にインスト
![[Sketch] 便利ランチャー Sketch Runnerをご紹介! #sketchplugin | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/0d61484158db14f687e32e556e8f7da3305ab653/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2016%2F11%2Fsketch-runner-400x400.png)
[iOS] アプリ内で管理している画像を Instagram へ投稿する | DevelopersIO
はじめに iOS アプリから 画像共有サービス「Instagram」へ画像を投稿する方法を調査する機会がありましたので、その結果をご紹介します。 検証環境 OS X 10.11.5 (15F34) Xcode 7.3.1 (7D1014) iOS Deployment Target 8.0 iPhone 6 Plus, iOS 9.3.2 Instagram 8.3 実現したいこと 自分のアプリ内で管理している画像を Instagram へ投稿したい Instagram API を使用する Instagram の API ドキュメントを確認してみましたが、画像の投稿を行うためのエンドポイントはありませんでした! 投稿済みの画像などは取得出来るようです。 Custom URL Scheme を使用する Instagram アプリの Custom URL Scheme のドキュメントを確認して
![[iOS] アプリ内で管理している画像を Instagram へ投稿する | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd616d43627770acf3d2af18695851272d60bed9/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F12%2Fios.png)
node.JsにおけるCSRF対策 | DevelopersIO
はじめに 現在参画中の案件ではNode.js + Expressを用いた開発を行っています。 開発を行っているのはWebアプリのため、当然セキュリティ対策も必要になってきます。 今回は、CSRF(クロスサイトリクエストフォージェリ）対策として、 ミドルウェアであるcsurfを検証しました。 CSRF(クロスサイトリクエストフォージェリ）とは Webサイトにスクリプトや自動転送(HTTPリダイレクト)を仕込むことによって、閲覧者に意図せず別のWebサイト上で何らかの操作(掲示板への書き込みなど)を行わせる攻撃手法。 CSRFとは 〔 クロスサイトリクエストフォージェリ 〕 【 XSRF 】 - 意味/解説/説明/定義 ： IT用語辞典 この攻撃の特徴としては、利用者が攻撃者が用意したリンクやスクリプトにアクセスすることで、 本来フローとは異なるフローでアクセスを行うといった点でです。 対策と
[iOS][Swift] Swift 3.0の変更点まとめ | DevelopersIO
Implemented proposals for Swift 3 SE-0002: Removing currying func declaration syntax カリー化関数宣言構文を削除 func foo(x: Int)(y: Int) の有効性は限定的で、実装が複雑になるから削除する必要があります。 サンプル // Before: func curried(x: Int)(y: String) -> Float { return Float(x) + Float(y)! } // After: func curried(x: Int) -> (String) -> Float { return {(y: String) -> Float in return Float(x) + Float(y)! } } SE-0003: Removing var from Function
![[iOS][Swift] Swift 3.0の変更点まとめ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/4b9b98d8423d1943cae402d21764bf51589e811b/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F11%2Flogo_swift_400x400.png)
tmuxを使いこなす / プラグイン開発で機能を拡張 | DevelopersIO
はじめに こんにちは、中山です。 唐突ですがみなさんtmuxは使われていますか。そう、有名なターミナルの機能を拡張するツールですね。 この種のツールを使っていない方の中には、職場の先輩などに「ちょｗターミナル開きすぎｗブラクラかよｗ」などとドヤ顔で言われたことがある方もいらっしゃるのではないでしょうか。かく言う私もドヤ顔でこの種の発言を繰り返していました。 tmuxはデフォルトの機能がかなり豊富なのですが、tpmというプラグインマネージャを使うとさらに機能を拡張することができます。聞いたことがある方も多いのではないでしょうか。ググると検索結果に結構表示されますね。GitHubのtmux-pluginsというorganizationにはさまざまなプラグインがあります。便利なプラグインを紹介しているブログエントリも結構あります。 私はこのプラグインを今まで結構作ってきました。少しシェルスクリプ
[iOS] iOS エンジニア以外でもリリースできる！iOS アプリのリリース手順のまとめ [2015年11月版] | DevelopersIO
はじめに こんにちは、モバイルアプリサービス部の荒川です。 最近は、お客様の端末でソースコードをダウンロードして、アプリをリリースして頂く機会が増えてきました。iOS アプリのリリースは Android と比較すると非常に煩雑です。 Apple の開発者用アカウント管理や設定、Xcode でのリリース用バイナリの書き出しは、慣れている方でも（公式のUIがたまに変わるので）すぐにできるとは限りません。セキュリティを考慮すると、自社以外の関係者にリリースをお願いすることは、好ましくありません。NDAを締結しても、事故が起きるリスクがあります。 この記事では、上記の問題を解決するために、iOS 開発者以外の方でも Xcode から App Store へリリースできる手順を紹介します。 対象読者としては、 初めて App Store へバイナリを提出する方 リリース担当者から引き継ぎをお願いされ
![[iOS] iOS エンジニア以外でもリリースできる！iOS アプリのリリース手順のまとめ [2015年11月版] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/70be6be4a1b16ae320da190065d24a53f9ea89d0/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F08%2Fapp_store.png)
【要するに】osxcでMacの環境の構成を記述管理する【MacでAnsible】 | DevelopersIO
よく訓練されたアップル信者、都元です。個人的な話になりますが、少し前にMacbookを新調しました。それまで利用していたMacbookは、Time Capsule経由でバックアップ-リストア経由で何台も渡り歩いてきた、最初に手に入れたMacから脈々と受け継がれる秘伝のタレ状態でした。MacPortsでパッケージを管理していた時代もありましたし、Homebrew Caskも導入していませんでした。 マシンを新調するにあたって、再びバックアップ-リストアを行えば、今までどおりの環境をそのまま移行できます。しかし、モダンなサーバ環境構築で取り入れられているInfrastructure As Codeを自分のクライアント環境でも実現できないか、と考えました。 記述に依る定義 サーバ環境の構成をコードで記述するメリットとしては、構築の自動化と再現性の高さを挙げることが多いと思います。要するに開発環境
冷静に、開発者目線で見た「WWDC 2015」まとめ | DevelopersIO
WWDC 2015 2015年6月9日 午前2時（現地時間では6月8日 午前10時）からAppleが主催する 「WWDC 2015」 が開催されました。例年、WWDCではAppleの新製品や新機能の発表が行われます。各種メディアをはじめ、開発者やApple製品のユーザーからも注目される、年に一度のお祭りのようなイベントです。 前回のWWDC 2014では、新言語「Swift」が発表され、開発者からの注目を大いに集めました。 WWDC 2015でAppleが掲げたテーマは、 「The Epicenter of Change」（変化の震央） です。 一体我々にどんな変化をもたらすのか、また震央とは何かに注目し、開発者目線でレポートをお届けします。 それぞれの OS の変化 OS X El Capitan OS X Yosemiteの後継 Mac OSです。ヨセミテ国立公園の名所で命名されていく
Sublime Text 2 のショートカット 12 選（Win、Mac両方） ｜ クラスメソッド開発ブログ
1ヶ月使って便利だと思った Sublime Text 2 のショートカット 12 選（Win、Mac両方） 今、巷で話題になっているエディタ Sublime Text 2 ですが、 最近社内のプロジェクトでも使用する機会が多くなってきました。 Sublime Text 2 http://www.sublimetext.com/ インターフェースがシンプルで高速、 機能を強化するパッケージも豊富で、Gitとの同期も快適です。 このブログでは、1ヶ月プロジェクトで使ってみて、 とても便利だと思ったショートカットを12個紹介します。 自分自身会社ではWindows、自宅ではMacなので、 Windows版とMac版の両方をメモ代わりとして記載することにします。 1. マルチセレクト このショートカットは複数の文字列をインタラクティブに選択し、一度にまとめて編集することができます。 OS X：⌘
AngularJSを使ってみました | DevelopersIO
毎度お世話になっております。クラスメソッドの稲毛です。 6月の中旬にGoogle Developers Blogで「AngularJS」という新しいWebテンプレートフレームワークが発表されました。 MVCモデルを採用しているということで、実際にモデルの変更がビューに反映される様を確認できるサンプルを作成してみました。 Twitter Search Sample 今回作成したのは、テキスト入力へ検索ワードを入力しエンターキーを押下すると、TwitterのSearch API（JSONP）でツイートを検索し一覧表示するといったサンプルです。 HTML 1. スクリプトをロードする AngularJSのスクリプトファイルを読み込みます。 <script type="text/javascript" src="http://code.angularjs.org/angular-1.0.0.min
AngularJSをはじめる前に#AngularJS入門その1 | DevelopersIO
AngularJSをはじめよう ここにあるように、最近はWebアプリを作成する際にJavaScriptのフレームワークを使用するのが当たり前といっていいくらい、 さまざまなフレームワークが存在します。 弊社ブログでもember.jsの記事等、JavaScriptのいろいろなライブラリ・フレームワークを紹介していますが、 私が近頃AngularJSを使用する機会があり、とても使いやすかったので、改めてここで紹介しようと思います。 AngularJSとは もう一度「AngularJSとはなにか」という部分を簡単におさらいを。 AngularJSはGoogleとコミュニティより開発しているオープンソース(MIT)のJavaScript用MVWフレームワークです。 テンプレート言語としてHTMLを使用できたり、双方向データバインディングやDI(依存注入)が使用できたりと、 近年複雑化するWebアプ
AngularJS概要と基礎の基礎#AngularJS入門その2 | DevelopersIO
AngularJS概要 前回はAngularJSを学ぶ際に参考になるサイトの紹介をしました。 それらを見ればいくらでも書いてあるのですが、今回はAngularJSについての解説や基本的な機能等の解説をします。 Angular JSとは 前回もいったように、AngularJSはWebアプリケーションのためのMVC(MVW)フレームワークです。 ※MVW：Model-View-Whatever AngularJSでは次にあるような、いくつかの特徴をもっています。 Angular JSの持つ機能 1.テンプレート言語としてHTMLを使用する AngularJSは、HTMLファイルを使用します。その中で「Directive」という仕組みを利用し、 HTMLの属性や要素に対して特殊な振る舞いを適用します。 Directiveとは、HTMLの属性と要素を独自に拡張した新しいマークアップです。 ngMo
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ブラウザでの
【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻 | DevelopersIO
ダミーテキストの挿入 loremを記載して、展開するとダミーのテキストを挿入してくれます。 //展開前 p*3>lorem //展開後 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus consectetur nisi modi alias aspernatur suscipit nihil laborum vero possimus. Nobis velit iste eveniet atque aspernatur! Repellendus illum nulla similique quia.</p> <p>Magni sapiente dolorum dolorem expedita natus eaque aut nesciunt modi libero aspernatur omn
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
【Middleman】の便利な機能をご紹介。 | DevelopersIO
前回まで、構築の流れをご紹介しましたが、 今回は、出力する際に便利な機能をいくつかピックアップしてご紹介していきます。 アジェンダ 設定ファイルについて ファイルサイズの最適化 HTMLの圧縮 CSS・JavaScriptの圧縮 画像圧縮 GZIPで圧縮 ローカルデータ LiveReload 設定ファイルについて プロジェクファイルを作成するとルート階層に、以下の２つのファイルがあります。 各ファイルに、プロジェクトの各設定していきます。 Gemfile config.rb Gemfile # If you have OpenSSL installed, we recommend updating # the following line to use "https" source 'http://rubygems.org' gem "middleman", "~>3.0.12" conf
Hamlで開発効率アップ｜Sublime text 2でビルドしてみました。 | DevelopersIO
先日、弊社で開催ししている勉強会:【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」のスピーカーを務めさせていただきました。 人生初のスピーカーということで、緊張して時間を10分巻いてしまいました。。。 さて今回はHaml with Sublime text 2と題しまして、ご紹介できればと思います。 アジェンダ Hamlとは？ Hamlの書き方 Sublime text 2でビルド(ファイル出力) おまけ Hamlとは？ XHTML Abstraction Markup Languageの略称です。 と言われましてもなんのことだ？？ってなるかと思います。 日本Hamlの会というユーザーグループで以下のように、説明しれくれてます。 HamlはHTML/XHTMLを生成するためのマークアップ言語です。インデントや簡略構文によって簡潔な記述
SinatraとHamlとScssとCoffeeScriptでモダンなWeb制作環境を構築する #1 | DevelopersIO
こんにちは山形です。 htmlやcss等を書いて静的なWebサイトを制作している方なら誰でも、より効率的な環境求めていると思います。 DreamweaverやAptana等のIDEを使うのも一つの手だと思いますが、より柔軟な環境構築としてご紹介したいと思います。 Rubyをインストールする Windowsの場合 Engineyard社が提供しているRailsinstallerでサクッと入れてしまいましょう。 Railsinstallerはこちらからダウンロード出来ます ダウンロードできたらexeを起動しウィザードに従ってインストールを実行してください。 Mac OS Xの場合 rbenvでのインストールを紹介します。 先にXcode Command line Toolsのインストールを済ませておいてください。 Xcodeの環境設定からインストールできます。 # rbenvをgithubから
WebアイコンフォントFont AwesomeのSCSS版を使ってみる | DevelopersIO
画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。 Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。 【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 注意 今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJS の記事一覧 | DevelopersIO