はじめに こんにちは! 前回の 「UITableViewをStoryboardで実装し、理解する」 から一歩進んだ 「UITableViewに表示したデータを検索する」 を今回は実装して行きます。 この記事は4月からiOSアプリエンジニアとして働く方、転向する方を対象としています。 「iOSアプリケーションを1度でも作ったことがある」、もしくは「入門書を1冊読んだことがある」方には特に参考になるような記事になると思います。 何故Storyboardを使うのか 早速 前回 と同様に新規プロジェクトを作ります。 今回もStoryboard上でUIを作っていきます。 何故UIをStoryboardで作るかというと、 「実行 → デバッグ → 画像・位置・色・重なり順の表示修正」 といったフローをデザインビューで作成出来るので、開発期間の短縮&コードの見通しがよくなるからです。 反面、ゲームアプリ
SIL Open Font License (OFL) 参考URL : SIL Open Font License (SILオープンフォントライセンス) CC BY 参考URL : 表示 3.0 非移植 (CC BY 3.0)ク CC BY-SA 参考URL : Creative Commons — 表示 - 継承 3.0 非移植 MIT 参考URL : MIT License - ウィキペディア BSD 参考URL : BSDライセンス - ウィキペディア Webフォントアイコンを選んでみる。 http://fontello.com/ それでは、実際に上記サイトへアクセスして使用してみたいと思います。 サイトへ行くと沢山のWebフォントアイコンが用意されています。 Webフォントアイコンの選択 今回は、Webフォントアイコンで有名なFont Awesomeを使ってみたいと思います。 Fo
A proof-of-concept effect recreation of the animation seen in a prototype app by Marcus Eckert. The idea is to flip a grid item in 3D, expand it to fullscreen and reveal some associated content. We’ve created two demos with a vertical and a horizontal rotation. Today we’d like to share a little animation concept with you. It’s the recreation of an effect we spotted in this fantastic prototype app
100% width tabbed content with some example media queries for smaller screens. A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout. The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space. The content columns and the containing media boxes have three different layouts. The food
Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations. Today we’d like to share some item transition inspiration with you. We tried to keep the idea of the transition general, so we did three different use
こんにちは。望月です。 今日はヒジョーに縁の下の力持ち的なサービス、STSについてです。 権限不足のエラーメッセージ IAM userを利用して利用できる権限を制御している場合、Management Consoleで許可されていない操作を実行しようとした場合にエラーになることがあります。 *1たとえばReadOnlyのPermissionを与えられているユーザがEC2をTerminateしようとした時などですね。Management Consoleですと、こういったエラーが表示されます。 画面だとエラーメッセージが見づらいですが、なにかエンコードされた文字列が並んでいるのが確認できると思います。AWS CLIからだとこういった出力があります。 $ aws ec2 terminate-instances --profile no-permission-user --instance-id i
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 作業ログを残していきましょう! Todo管理の重要性は皆さんが知るところでしょう。しかし個人的にはToDid、つまりやったことのリストも大事だと思っています。これからやるべきこと、やっていること、やったこと…その3つが蓄積されてこそ成長があるのではないでしょうか。 ということで紹介したいのがdoingです。今何をしているかを記録していくというToDoingを管理するソフトウェアです。 doingのインストール Rubygemsで配布されていますのでインストールは簡単です。 $ gem install doing doingの使い方 例えば次のようなコマンドを打ちます。 $ doing now "Research for MOONGIFT" これで記録完了です。他にもサブコマンドはた
こういう事前チェックの仕組みは便利ですね。 設定を変更して再起動して動作を確認してミスしていたら再度修正…これは非常に心の折れる作業です。テストデータとそのテストケースを用意して、修正してからテストまでの時間をなるべく短くしたいと思うことでしょう。 それはFluentdの正規表現ベースでの設定にも当てはまるようで、予めテストできる専用のチェッカー、設定出力ソフトウェアがFluentularになります。 Fluentularの使い方 デモサイトがありますのでさっそく試してみましょう。 設定をfluent.confに書き込むテキストが表示されるのが便利ですね。 予めFluentularで試しておけば、正規表現が正しい状態で設定を変更して反映できるので運用負荷が減りそうです。 FluentularはRuby製のオープンソース・ソフトウェア(MIT License)です。 Fluentular:
おお、これは企業で使えそうですよ! 企業によっては外部にソースコードを預けられないため、自社でGitサーバを構えているところも多いでしょう。しかしそうなると管理画面が欲しくなります。GitHubの管理画面は優秀で、ああいったWebブラウザ上でリポジトリの情報を見たいと思うはずです。 そこで使ってみて欲しいのがGitonomyです。デザインの格好いい、Gitリポジトリマネージャです。 Gitonomyの使い方 GitonomyはPHP + Symfonyの組み合わせで作られていて、Webブラウザ上でGitリポジトリの操作が一通りできるようになっています。ユーザはプロジェクト単位にグループに入り、そこで権限管理される仕組みです。 ソーシャル機能はありませんが、企業ユースであれば十分ではないでしょうか。社内でGitサーバを立てている場合はぜひ導入を検討してみてください。 GitonomyはPHP
fengyuanchen/completer GitHub お手軽に使えるBootstrapベースのオートコンプリート実装jQueryプラグイン「completer」 次のような美しいデザインのオートコンプリート機能が実装できます。 次のように初期化時に候補を指定してあげればお手軽にコンプリート機能が実装できます Ajaxには対応していませんが、予め選択肢が決まっている場合には使えそう 関連エントリ iPhoneの絵文字をオートコンプリートできるtextarea実装jQueryプラグイン「At.js」 textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」 Facebookのお友達からオートコンプリートが可能にするjQueryプラグイン
Immutable Infrastructure Conference #1 : ATND 2014/03/25 Immutable Infrastructure Conference #1 #immutableinfra - Togetterまとめ 最近は最早バズワード化した感も充分ある『Immutable Infrastructure』。この長〜いフレーズを発音する際に途中発音を噛む人が後を絶たない今日この頃、皆様いかがお過ごしでしょうか。(発音に悩んでいる、何とか噛まないようにしたい!という方は以下のエントリを参考にしてみる事をお勧めします) [小ネタ]噛まずにImmutable Infrastructureと言うために | Developers.IO さて、本題です。こちらの『Immutable Infrastructure Conference #1』、発表と同時に参加応募者が殺
Amazon Linux AMI 2014.03 Released! 早速ハマったこと (Perl・glibc編) OpenSSLの脆弱性(CVE-2014-0160)が公開されました。 Amazon Linuxでは、openssl-1.0.1e-37.66 (参考:ALAS-2014-320) で対応済ですが、 この記事の手順でリポジトリをAmazon Linux 2013.09に固定している際は、提供されません。 /etc/yum.confで「releasever=latest」を有効にして、yum update opensslを実行することを強くお勧めします。 ただし、依存関係により、glibcが2.17へアップデートされますので、 十分に動作検証した上で本番適用することをお勧めします。 こんにちは、三井田です。 佐々木さんが『Amazon Linux AMI 2014.03 Rel
はじめに JAWS DAYS2014でImmutable Infrastructureトラックが提供されたり、昨日Immutable Infrastructure Conference #1が開催されたり、ここ最近のテクノロジートレンドはImmutable Infrastructureに染まっている感じがあります。 僕自身も色々なBlogを読んだり自分で手を動かしてみたりと色々試行錯誤を繰り返しているのですが、僕がEC2上でDockerについてやってみたことを整理してみました。 Docker自体ここ数年でたくさんの人が試しているし、アウトプットも多いので、今更感は否めないのですが、これから試す人にとって少しでも参考になれば幸いです。 EC2上でのDockerのセットアップ 今回はCentOSをEC2にLaunchしました。使用したAMIは「CentOS 6 (x86_64) - with
はじめに ついにAmazon Linux AMI 2014.03がリリースされました! Amazon Linux AMI 2014.03 Release Notes Amazon Web Services Blog: Amazon Linux AMI 2014.03 is Now Available 何が変わったのかは上記のRelease Notesを見て頂くとして、私としての目玉featureはRuby 2.0がデフォルトになったことと、Dockerに対応したことです。ですので早速試してみました! Ruby 2.0 以前のAMI(2013.09)では、Ruby 1.8がデフォルトでした。amznリポジトリにも1.9しか無く、Amazon Linux上でRuby 2.0を使うにはyum以外の手段でインストールする必要がありました。しかしその手間も今後は不要です! $ ruby -v rub
アイコンフォントに対応していないブラウザでも画像を表示させるjQueryプラグイン「Icon Font Fallback」 2014年04月01日- Icon Font Fallback アイコンフォントに対応していないブラウザでも画像を表示させるjQueryプラグイン「Icon Font Fallback」 大抵のブラウザはアイコンフォントに対応しているものの、ほとんどの環境で利用できるようにする必要があるサービスにおいてはまだ使えないという状態かもしれません。 そんな場合に使えそうなプラグイン。対応していない場合はpngに置き換えてくれます。 Modernizrを使ってfontfaceが定義されているかを検出して初期化する例も紹介されています 関連エントリ 美しいフラットなアイコンフォント「Dripicons」 好きなアイコンだけ選んでアイコンフォントにできる「Fontastic」 天
nrbrook/BlurBox GitHub 背景をぼかしてコンテンツを立体的にみせるLightBox「BlurBox」 次のような、背景はそのままだけどボカすことで一眼レフで撮影したような立体感を出すことができるようです。 ブラウザの発達でこういうこともFlashなしで出来るようになりましたね。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 Medium風のシンプルなLightBoxが実装できるjQueryプラ
日本語の取り扱いって本当に面倒ですよね。検索なども漢字を間違えば引っかからないし、平仮名と漢字の使い分けも人によって違ったりします。さらにそこに平仮名と片仮名が混在すると大変です。 といったような日本語の取り回しを便利にしてくれそうなiOSライブラリがPaRomajiKanaConverterです。 PaRomajiKanaConverterの使い方 NSString+RomajiKanaConvert.[hm] PaRomajiKanaConverter.[hm] の二つのファイルをプロジェクトにコピーして、インポートします。 後は次のような感じです。NSStringを拡張する形でメソッドが追加されています。 NSString *romaji = @"kyari-pamyupamyu"; NSString *kana = [romaji stringRomajiToHiragana];
これはいい! iOSで分かりやすいアイコンを使いたいと思ったらチェックしてみて欲しいのがionicons-iOSです。Ioniconsで公開されているアイコンをiOSアプリ内で使えるようにしてくれるライブラリです。 ionicons-iOSの使い方 デモアプリを立ち上げると以下のように表示されます。 デモ画面 見やすいアイコンですよね。実際のコードは次のようになります。 - (void)viewDidLoad { [super viewDidLoad]; // UILabel Example: UILabel *label = [IonIcons labelWithIcon:icon_archive size:20.0f color:[UIColor blackColor]]; label.center = CGPointMake(self.view.center.x, self.view
こういう取りまとめてくれるツールは便利ですね! Retinaディスプレイや4Kディスプレイなど高解像度のディスプレイが出回ると、その中で扱われる画像サイズも自ずと大きくなっていきます。それは致し方ないと思うのですが、何の対策もしないのはいただけません。 PNG/JPEG/GIFなど様々な画像フォーマットに応じて圧縮ライブラリがありますが、imgoはそうしたライブラリを一つにとりまとめてくれる優れものです。 imgoの使い方 imgoのヘルプは次のようになっています。 $ ./imgo --help imgo 0.8: Images Optimizer Git repo: https://github.com/imgo/imgo Usage: imgo [-params] [FILE] Options: -h | --help displays help -b | --brute brute
アプリでタップしてもらうための施策としてバッジは効果的です。あまりやると嫌がられますが、数字が出ているとついタップして消したくなるのではないでしょうか。 そんなバッジ表示をナビゲーションバーに追加したりできるのがBBBadgeBarButtonItemです。 BBBadgeBarButtonItemのデモ BBBadgeBarButtonItemを使うと例えばこんな感じに表示できます。 表示例 コードは次のようになります。 // If you want your BarButtonItem to handle touch event and click, use a UIButton as customView UIButton *customButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 20, 20)]; // Add
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 実用性はもちろん、Google Apps Scriptとしても参考になるんじゃないかと。 これまで書き溜めたGoogleドキュメントからMarkdownフォーマットに文書管理を移動する、なんて言われたらどうしたら良いでしょう。WYSIWYGな書き心地とMarkdownの記法は全く違います。すべて書き直し、または捨て去る選択肢しかないのでしょうか。 そこで使ってみたいのがgdocs2mdです。GoogleドキュメントをMarkdownフォーマットに変換してメール送信してくれるソフトウェアです。 gdocs2mdのインストール 相変わらずインストーラーがある訳ではないので手作業でインストールします。 貼付ける内容はこちらです。全て上書きします。 そうするとConvertToMarkdo
個人的にもよく使っているwri.peがオープンソース化されました!Ruby on Railsで作られており、本家はHerokuで動作しているなど自前でWebベースのメモ環境を作るのがとても手軽になりそうです。 ということで早速触ってみましょう。Web APIのトークン設定をすればすぐに動かせます。 wri.peの使い方 トップページです。見たまま本家のwri.peそっくりです。 ログインしました。早速メモを作ってみましょう。 右側にプレビューもあって分かりやすいですね。 カレンダー。メモを作った日付が分かります。 検索はSolrを使っており日本語も対応しています。 バックアップはEvernote、Dropboxにできます。 殆どの機能がJSON出力に対応していたり、iCalでの出力や多数のWeb API、OAuth対応がされているなど今風のWebサービスを作るのに参考になる点が多いと思いま
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Dropboxの手軽さは修正したら自動で同期されるという点にあると思います。この変更したら自動という点が重要で、作業が終わったら手作業でアップロード…なんて手間をかけているから作業を忘れてしまったり面倒に感じるのです。 ということで今回はAuto SFTPを紹介します。ファイルを追加、修正したら自動でSFTPを使ってアップロードしてくれる、そんなユーティリティです。 Auto SFTPの使い方 ヘルプは次のようになっています。 $ ruby sftp.rb -h -f: sftp.yamlに書かれているファイルを呼び出してSSHで接続します。 example: $ ruby sftp.rb servername servernameはyamlに記載されている上位のキーになります。
iPhone4/4s/5/5s/5c、さらにiPad/iPad miniやiPod TouchとiOSデバイスも多様になってきています。それぞれCPUなどのスペックが違っていたり、画面サイズが異なっています。そのため各デバイスでの確認作業が欠かせなくなっています。 一度修正してiPhoneで試し、デバイスを変えてiPadで試し…なんてやっていたら時間が幾らあっても足りません。ということで使ってみたいのがKPRunEverywhereXcodePluginです。 KPRunEverywhereXcodePluginの使い方 KPRunEverywhereXcodePluginは複数のiOSデバイスに向けて一括でビルドできるXcodeプラグインです。 インストールしてXcodeを起動すると、メニューに Run Everwhere が追加されます。 メニュー これを選ぶと接続されているiOSデバ
iOS上でアニメーションを実装するのは大変そうなイメージがありますよね。遅延したり、速度を変えたりと実現方法を考えるとついコードが増えがちです。そのため気の利いたアニメーションを実現すると人気が出ます。 しかしCanvasを使えばコーディングレスでアニメーションが実装できるようになります。まさに魔法のようなライブラリです。 Canvasのスクリーンショット Canvasのデモアプリで様々なアニメーションが確認できます。 デモアプリ アニメーションなので動画でないと分かりづらいかと思います。こちらがデモ動画です。 タップで反応する仕組みになっています。 Canvasの使い方 まずはCocoaPodsに設定をします。 platform :ios, '7.0' pod 'Canvas', '~> 0.1' アニメーションの設定はidentity inspectorで設定します。クラスを CSAn
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました サーバレスでここまでできるのが素敵! Googleドキュメントで文書を残さないといけないが、あのWYSIWYGなUIを使いたくはないというケースは少なからずあるのではないでしょうか。いっそGoogleドキュメントがMarkdownに対応してくれれば良いのだが…と思いつつも早々単純にはいきません。 ということで個人用のメモ環境として面白そうなのがDownDocです。Markdownで記述してその結果をGoogleドキュメントに飛ばしてくれるというソフトウェアです。 DownDocの使い方 日本語についてはデフォルトのスクリプトでは変換処理時にエラーが出るために使えませんでした(Google Drive自体が対応していない訳ではないので修正すれば対応できるはずです)。なおDownDoc
おお、これは実際試すと止められない! Amazon Web Servicesはスタートアップ(に限らないですが)には欠かせないサービスになっています。しかも多種多様なサービスが揃っており、全体を把握している人すら少ないのではないかと思ってしまうくらいです。 企業によってはこれらのサービスを複数使っているでしょうが、その管理画面のFaviconは全て同じものになっていて、タブで開いた時に分かりづらいです。そんな実際に使っている人にしか分からないストレスを解消してくれるのがAWS Favicon Change Chrome Extensionです。 AWS Favicon Change Chrome Extensionの使い方 Chrome Webストアで公開されていないのでインストールは手作業で行います。 インストールしました。 通常は全てこのFavicon。 各サービスを開きました。Fav
今までの書き方からどう変わるのか見てみましょう。 HTML/JavaScriptそしてスタイルシートはここ数年で代替記法がたくさん登場しています。個人的にはHamlやJadeはきついなぁと思ってしまうのですが、CoffeeScriptのようにコーディングがとても楽になる言語もあります。 スタイルシートにおいてはSassおよびScssが有名ではないかと思います。始めてみたいなと思う方はまずは自分の書いたCSSをSass/Scssにするとどういう記述になるのか確認してみるのが良いでしょう。それがcss2sassです。 css2sassの使い方 css2sassではデモのWebサイトが用意されています。 CSSをScssに変換しました。ミニファイされていた内容が綺麗になるのも良いですね。 こちらはSass。括弧がなくなるので読みやすくなりますね。 スタイルシート全体の内容を変換するのはもちろん、
これは使いどころが多そう! Font AwesomeはWeb Fontをアイコンとして使えるので便利なライブラリです。便利さ故に他のケースでも使いたいと思うのではないでしょうか。また、一つのアイコンだけを使うためにWeb Font全体を読み込むのは大変です。 そこで使ってみたいのがFont-Awesome-SVG-PNGです。Font Awesomeのデータを読み込んで指定方式でSVG/画像に変換してくれるソフトウェアです。 作成例。赤いアイコン画像をまとめて生成できます。 Font-Awesome-SVG-PNGのインストール インストールはnpmコマンドで行います。 $ npm install -g font-awesome-svg-png Font-Awesome-SVG-PNGとは別でlibrsvgが必要です。Windowsの場合はosspack32を使えます。 Font-Awes
iOSアプリの開発時によく使うような機能、ユーティリティを集めたのがnomadです。コマンドラインから簡単に使える便利なコマンド集になっています。 nomadの使い方 nomadには全部で5つのコマンドが用意されています。 Cupertino Apple Dev Centerにアクセスするコマンドです。例えば以下のコマンドで登録されているデバイスが一覧されます。 $ ios devices:list Houston Push送信を行うライブラリです。コマンドラインから通知のテストができます。 $ apn push "<token>" -c /path/to/cert.pem -m "Hello!" Dubai Passbookのパスを生成します。 $ pk generate Example.pass -T boarding-pass Venice In-App Purchaseのレシートを
スマートフォンはタッチ操作が殆どで、上下左右の操作を認識しています。しかし人の動きは完璧ではないので若干ずれると意図した動作にならなかったりします。そんな時は猛烈にいらつきますよね。 タッチ操作はともかく、スワイプ操作での誤差はストレスが大きいです。それを防止してくれるライブラリがYIStrictEdgePanGestureです。 公式サイトより まさにこんな感じのストレスを予防してくれます。 YIStrictEdgePanGestureのデモ 下の動画をご覧ください。 矢印が3本あります。水平に動かした場合はメニューが出ます。しかし水平に動かし始めて下に移動するとスワイプ操作がキャンセルされます。さらに最初から斜めの場合は認識されません。 人の動きはアナログなので、何となく行った操作も認識して欲しいと思う訳ですが、YIStrictEdgePanGestureは逆に厳格な動作を求めるように
プログラミング言語はライブラリが肝です。言語単体の魅力はもとより、使えるライブラリが十分にないと利用したいと思えないでしょう。各言語向けにライブラリを紹介するサイトがありますが、それらを一つにまとめあげてしまうのがDepstackです。 Depstackでは有名なプログラミング言語のライブラリがたくさん揃っています。各プログラマーが投票し、より優れたライブラリが探しやすくなっています。 Depstackの使い方 トップページです。さっそく検索してみましょう。 検索結果です。言語やカテゴリで絞り込みができます。 Rubyで絞り込んだ場合。 ライブラリの詳細です。投票している人、そのライブラリを使っているライブラリを表示しています。 投票だけでなく、そのライブラリを使っているライブラリが分かるというのは便利そうです。また、言語の壁を越えて検索できるので、ある技術においてもっと使い勝手の良い言語
ちょっとしたときにCSS3アニメーションを使いたいシーンって多々あると思うのですが、Compass使っていても効果を想像しながら書くのはダルイときが多々あると思います。そんなときはAnimate Mixin for Compass/SASSを使うと、もっと楽ができそうです。 使い方 こちらのサイトから_animate.sassをダウンロードして@import animateするだけです。 どんなエフェクトがあるのかはサイトに一覧があります。ボタンをクリックすると右のオブジェクトがアニメーションするので、効果を確認しやすいですね。 CSS3アニメーションはPC向けサイトではIE対応なんぞがあってとても使いづらいですが、スマホ向けならかなり効果的に使うことができると思います。ちょっとしたアニメーションがあるとそれっぽくなるシーンが多々ありますし、効果的に使っていきたいですね。 Animate
Emojiなどを活用することで楽しくコミュニケーションできるGithub Issueですが、それだけだと少し物足りないですよね。Looks Tiqav To Misawaを入れて日常のコミュニケーションをもう少し彩ってみましょう。 使い方 エクステンションのダウンロード Chromeウェブストアからエクステンションをダウンロード&インストールします。 Github Issueのコメント欄で使う 元ネタが分からないのですが、随所でよく見る”looks good to me”。!lとコメント欄で入力すると画像の候補が出てくる(1つ)ので、画像を選択するとコメントでその画像を使うことができます。 !t<query>の書式で入力すると、tiqavに登録されている画像から検索して選択することができます。ちくわしか持っていない場合は!tちくわと入力すると以下のように画像の候補が出てきます。 !m<qu
iOSアプリをつくって配布するためには、おおまかに分けてこんな感じの知識が必要だと思います。 開発環境の用意の仕方(Xcodeの用意、iOS developer programへの登録) アプリのつくりかた(Objective-C、標準ライブラリの知識と活用方法) アプリの配布方法(テスターへの配布方法、AppStoreへの登録) それぞれどこを見れば良いかまとめておくと便利だと思ったので、まとめておきたいと思います。 開発環境の用意の仕方 iOSアプリの開発をスタートするためには、まず以下の準備が必要です。 MacOS X(最新のもの) Xcode(最新のもの) iOS Developer Programへの登録(実機で動かすために必要) Xcodeの導入から簡単な開発方法まで Xcodeの導入から、使用方法交えての簡単な開発方法の説明がドットインストールにあるので、全くはじめての人はこ
No worries, you've got this! You're about to learn CSS Selectors! Selectors are how you pick which element to apply styles to. Exhibit 1 - A CSS Rule p { margin-bottom: 12px; } Here, the "p" is the selector (selects all <p> elements) and applies the margin-bottom style. To play, type in a CSS selector in the editor below to select the correct items on the table.If you get it right, you'll advance
「意外と知らないリザーブドインスタンス。すぐに効くコスト削減」#jawsdays – JAWS DAYS 2014 参加レポート Vol.16 こんにちは 大場 です。JAWS DAYS 2014 のレポートです。 今回は「意外と知らないリザーブドインスタンス。すぐに効くコスト削減」です。 講演者 1) RI によるコスト削減 アマゾンデータサービスジャパン株式会社:髙山 博史さん 2) RI の売却のお話 CloudPack:櫻井 貴江⼦さん セッション概要 バリバリAWSを使ってる方や技術的に詳しい方も意外と知らない料金割引のオプション「リザーブドインスタンス」に関するセッションです。リザーブドインスタンスって…「申込書が必要?」「料金1年分の前払い?」「1年縛りだから使い続けないといけない?」「スケールアップ出来ない?」「エンタープライズ向け?」いずれもよくある勘違いです。今回は、よ
はじめに 先日のJAWS DAYS 2014での宮下 剛輔氏のセッション「Immutable Infrastructure時代の構成管理ツール基盤SpecInfra」を拝聴して、「おお、このSpecInfra、勉強してみたい!」と思ったのですが。 まずはその前に試しては壊し試しては壊し出来る、Immutableな環境を作ろう....とアレコレ調べていた結果、まずは「手もとのMac OS Xからvagrant-awsとvagrant-configspecを使ってさくっとEC2をプロビジョニングしてみよう」という結論に至ったので、やってみました! 各種インストール Vagrant 公式サイトのDownloadページから最新のパッケージファイルをダウンロードして実行します。 現在最新のVagrantのバージョンは1.5.1です。 $ vagrant -v Vagrant 1.5.1 config
よく訓練されたアップル信者、都元です。 先週土曜日にJAWS DAYS 2014でお話したCloudFormationセッションの一節で、Blue-Green Deploymentを実現するLAMP環境について触れました。この「Blue-Green Deployment」という言葉の出どころは、私の尊敬する人でもあるMartin Fowler氏の記事 BlueGreenDeployment(2010年) のようです。 Blue-Green Deploymentとは TODO…じゃなくてw(自分で傷口を抉る) 要するに、2つの独立したアプリ動作環境(要するにサーバ群)を用意して、それぞれをBlue, Greenと名づけます。そして、ここでは現在Blueがライブ(ユーザに提供中の本番環境)であるとします。 リリース時には、Green側に新バージョンのアプリをデプロイして動作確認を行います。問題
よく訓練されたアップル信者、都元です。 今日の話題はこちら。【重要なお知らせ】2014年4月21日より、既存のAWSアカウントのシークレットアクセスキーを取得できなくなります。: Amazon Web Services ブログ なんだかびっくりしますよね。さて、この変更によって窮地に追い込まれるのはどういう人でしょうか。また、これは一体どういう変更なんでしょうか。考えて行きましょう。 この変更で窮地に追い込まれる人は誰か えーと、必死に考えたんですが、通常思いつく範囲で窮地に陥るようなケースを想定できませんでした。つまり概ね「そんな人いない」という結論で問題無いと思います。 無茶苦茶と言えるような特殊で理不尽な状況を言い出したらキリがありませんが、そういうケースであっても恐らく「それってそもそもセキュリティ的に大問題なわけで、別次元で窮地だしww」というような論破が可能な気がしています。
Elastic Load Balancing(ELB)は、EC2インスタンスへのトラフィックを自動的に分散するAWSのサービスです。負荷分散や可用性を高める目的で利用されます。今回は、2014年2月に追加されたELBのセキュリティを強化するための新機能について解説します。 結論としては、AWSでELBを利用してHTTPS通信を行っているのであれば、特別な事情が無い限り、直ちにセキュリティポリシーの設定を「ELBSecurityPolicy-2014-01」に変更し、セキュリティを強化してください。 設定方法 AWS Management Consoleにログインし、EC2 Dashboardを開き、NETWORK & SECURITYのLoad Balancersをクリックします。変更するELBを選択したならば、Listenersタブを開いてください。 次にHTTPSのプロトコルのCiph
Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations. TimeSeries template with real-time data. This demo features animation of the selection when new data arrives. The data itself is from a function but could be a callback to a remote data source. (click to code) HTML5 time series chart. This uses the TimeSeries template. Templates provide pre-built interactive
プロビジョニング&デプロイ on AWSのキホン #jawsdays – JAWS DAYS 2014 参加レポート Vol.12 レポート くどうです。 さて、Jaws Days 2014に参加したレポートになります。 参加したセッションの情報は以下です。 プロビジョニング&デプロイ on AWSのキホン 吉羽 龍太郎(よしば りゅうたろう) AWSを利用すると伸縮自在なインフラストラクチャを構築することが可能です。 このような環境では頻繁にインスタンスが入れ替えられたり、アプリケーションをデプロイしなおしたりする必要がありますので、自動化が必須です。本セッションではAWS環境におけるプロビジョニングやデプロイの自動化におけるキホンについて解説します。 こんな話しでした Immutable Infrastructure はすぐに実現できる? できない 基本:自動化する ライフサイクルを含
JAWS DAYS 2014 参加レポート、7本目です。株式会社はてなCTOである田中慎司氏の「IaaSとPaaSの微妙な関係」のレポートです! 「IaaSとPaaSの微妙な関係」 by 田中 慎司氏 トラック入り口の張り紙に「タイトル未定」と書かれてしまったことがちょっと悔しそうな田中さんでした。 ※本発表のスライドが後日公表されれば差し込みます。 はてなについて まずははてなの現状について。はてなではデータセンタとAWSのハイブリッド構成になっているが、HatenaBlogはほぼ100%AWSで構成されているそうです。全サービスでトータルすると2000台規模であり、AWSがうち100台程度とのこと。はてなのサービスは古くから提供されていることもあり、既存のデータセンタに数多くの資産があるそうです。 IasSとPaaSの話 「IaaSとPaaSって、どうやって使い分けていますか?」という
Notice Info Message Success Message Error Message Custom Icon (Font Awesome) No Icon Fast Notice Sticky Notice Sticky Info Sticky Success Sticky Error Stickyish Notice Stickyish Info Stickyish Success Stickyish Error Custom Button Icons No Sticky Button No Close Button Permanent Buttons Permanotice Close Permanotice Using NonBlock.js (Click through to things underneath the notice.) Translucent No
JAWS DAYS 2014 参加レポート、6発目は宮下 剛輔氏のセッション「Immutable Infrastructure時代の構成管理ツール基盤SpecInfra」のレポートです! 「Immutable Infrastructure時代の構成管理ツール基盤SpecInfra」 by 宮下 剛輔氏 こちらも立ち見いっぱいのセッションでした。座る事が出来た僕はラッキーです。 当日お話頂いたスライドはこちらです。 サーバ構成管理とは まずは「サーバ構成管理とは何か」からお話頂きました。サーバ構成管理とは「サーバの静的な状態を管理すること」であり、インストールされているミドルウェアやそのバージョン、設定、OSの各種パラメータなどを指すとのこと。 サーバ構成管理を行うためのツールとしてはChefやPuppet、Ansibleなどがありますが、サーバ構成管理ツールの基本原則として以下の4つを上げ
前回はS3のRedirection Rulesを利用したリダイレクト方法について紹介しましたが、以下の様なツイートを見かけましたので検証してみました。結論としてはHttpErrorCodeReturnedEqualsを利用するだけで実現できそうでした。 S3に任意のリダイレクト機能があったんだ。これ使えばサムネールサーバのエンドポイントに直接S3を指定するような設計が出来る?サムネールが無かったら生成サーバにリダイレクトするような感じ。知らなかった…。 http://t.co/wmVSCYOW66 — Keita Kitamura (@keita) March 6, 2014 やりたいことはS3にアクセスしてファイルが存在しない(404)の場合に生成サーバにリダイレクト出来ればよいということになるはずです。ということで以下の構成だったとして404の場合に生成サーバにリダイレクトできることを
CoffeeScript を導入したことによってクラス化が比較的易しくなり、導入前よりもずっと見通しの良いコードが書けるようになってきました。クラス化することによって関連する機能を一箇所に集約することができ、後から機能を追加する際も関連するクラス内に迷わず追記することができるので、コードがあちこちに散らばることがなくなります。そして各クラスは、それぞれが与えられた役目だけに徹する(関連機能が集約されているから)ので、他のクラスのことなど知ったこっちゃないと言わんばかりに意識しなくなり、自然と疎結合なコードになっていきます。 と、いうのが理想なわけですが、実際そうも言ってられなくなったりします。ひとつ以下の様なケースで考えてみます。 出版社(Publisher)と読者(Reader)という2つの登場人物がいます。読者は出版社が近日発売予定のとある書籍を購入したいと考えていますが、出版社内で編
比率の指定 先日 Xcode 5.1 が公開されましたが、皆さんインストールされましたでしょうか。Xcode 5.1 では Storyboard の Auto Layout の編集機能が少しアップデートされており、Aspect Ratio という制約が作れるようになりました。元々 NSConstraints では実現できましたが、Storyboard 上から編集できるのは便利ですね! AspectRatio 制約を追加してみる ということで使ってみます。まずは適当な Label を配置しました。分かりやすく SuperView からの Center X Alignment Constraint と Center Y Alignment Constraint を指定してます。 次に Pin ボタンを押してメニューを開きます。「Aspect Ratio」っていうのが増えてますね!これにチェック
はじめに 先日お伝えしました通り、ELBのアクセスログが取得出来るようになったのですが、すぐさまfluent-plugin-elb-logというfluentプラグインがリリースされました。さすがfluentd界隈、対応が早いです。 ということで、今回はELBのアクセスログをfluentd経由でElasticsearchに取り込み、それをKibanaで表示したいと思います! セットアップ Elasticsearch Elasticsearchは最新のrpmパッケージを更新サイトから取得し、rpmコマンドでインストールします。 $ wget https://download.elasticsearch.org/elasticsearch/elasticsearch/elasticsearch-1.0.0.noarch.rpm $ sudo rpm -ivh ./elasticsearch-1.
はじめに ついにELBがアクセスログを出力できるようになりました!(Elastic Load Balancing Announces Access Logs) ということでやってみました! 設定 [Load Balancers]画面を開き、設定したいELBを選択します。画面下部の[Description]タブの一番下に[Access Logs]という項目があります! なおこの項目は新しいManagement Consoleでしか表示されません。以前のManagement Consoleを使用されている場合は、画面右上に青い吹き出しのようなアイコンが表示されていますので、クリックし「Try the new design」の[Click here]リンクをクリックすると、新しいデザインのManagement Consoleに切り替わります。 さて、[Access Logs]の[Edit]リンク
前回からだいぶ経過しましたが、今回はS3のRedirection Rulesを利用してリダイレクトを行う方法について記述します。Redirection Rulesを利用するとパスやパラメータに関係なくS3バケットへのリクエストを特定のURLにリダイレクトすることができるようになります。 前回はS3のRedirect all requests to another host nameについて紹介しました。この機能はリクエストURLのパスやパラメータを引き継ぐため単純なドメインの移行をした際には有用です。例えばhttp://hoge.example.com/fuga?piyoへのアクセスはhttp://example.net/hoge/fuga?piyoへリダイレクトされます。 一方であるサイトへのあらゆるリクエストを特定のURLにリダイレクトしたいケースもあるかと思います。そのような場合に利
The default configuration $('#demoOne').listnav(); This is the easiest way to use the plugin. None of the default options are overridden and a jQuery ID selector is used to bind the plugin to a single list. 411 Services Accountants Accounting & Bookkeeping - General Service Acupuncture Advertising Advertising - Agencies & Counselors Advertising - Computer Advertising - Promotional Attorneys - Serv
<!-- add placeholder to input or textarea --/> <input name="fieldname" placeholder="Placeholder Value" /> // run Placeholdem on all elements with placeholders Placeholdem( document.querySelectorAll( '[placeholder]' ) ); 2016-11-04 Update This project is no longer being developed or maintained. The effect this plugin gives is visually appealing, but it's a bad practice in terms of usability and acc
gifplayer Star Tweet gifplayer is a jquery plugin that will help you play and stop animated gifs on your website. Something like they do in 9gag or facebook. The advantage of using this plugin is that you can load a lighter static version of the animated gif, and then load the actual animated gif, when the user wants to see it in motion. Improving the initial load time of your page. gifplayer has
darktooltip Star Tweet darktooltip is a simple customizable tooltip with confirm option and effects Basic usage: <div id="def" class="box" data-tooltip="Hello world">default</div> $('#def').darkTooltip(); Advanced options You can specify some options to customize the appearance of darktooltip. Like this: $('#def').darkTooltip({ animation: 'flipIn', gravity: 'west', confirm: true, theme: 'light' ..
こんにちは、運用部 アプリ運用グループの清水です。Golang鋭意勉強中です。 今回は、SNS「mixi」に限った話ではなく、ミクシィ社全体として利用している仮想環境について紹介したいと思います。パブリッククラウドも一部のサービスで利用していますが、今回は、自社で運用している仮想環境にフォーカスして書いてみようと思います。 今まで利用してきた仮想環境 今まで利用してきた仮想環境というと、手作業で構築したKVM(Kernel-based Virtual Machine)環境が中心でした。手作業といってもある程度手軽に構築できるように、シェルスクリプトとCobblerでVMを構築できるようになっています。構築の流れは以下のとおりです。 CobblerにVMのIPやホスト名などをスクリプトで登録する。 KVMのホスト上でスクリプトを実行(koanコマンドでCobblerと連携してVMをセットアッ
Googleアナリティクスの導入から、運用、活用まで、正式なサポートがない初めての人でもゼロから学んでいけるように、丁寧に解説していく。 Googleアナリティクスとは/衣袋教授のGoogleアナリティクス入門講座ぶっちゃけ、ユニバーサル アナリティクスはどこがスゴイのか?(第93回) 本連載も今回でいよいよ最後だ。「Google アナリティクス入門講座」というコーナーだったが、時には少し難しい内容だったかもしれない。 さてユニバーサル アナリティクスが公開されて約1年が経つが、まだ一部の機能で標準のアナリティクスに追いついてないため、本連載ではほとんど触れることはなかった。連載の最後を締めるにあたって、ユニバーサル アナリティクスの魅力についてお伝えして幕を閉じたいと思う。 いつユニバーサル アナリティクスへ移行すべきか?ユニバーサル アナリティクスへの移行をいつすべきかについてまず述べ
#32対応方法で気をつけること①の専用サイトは制作・運用のコストがかかってしまいますが、きちんとリソースが確保できるのならば、マルチスクリーンのための設計に頭を悩ます必要は少なくなります。この場合でも、基本的にはどのデバイスでも同じ情報をユーザーが得られるようにするのがよいでしょう。また、別URLにはしないで、同じURLをサーバーサイドで振り分けるようにしましょう。 ②のテンプレート対応は、使用しているCMSがどの程度対応できるかによりますが、完全にリニューアルするよりは早く済む可能性があります。個別に静的HTMLを出力するような場合は、デバイスごとに違うURLにならないよう注意が必要です。 リニューアルが可能であれば、③のレスポンシブWebデザインの導入が、同じURLでマルチスクリーン対応できるベストな方法でしょう。どのサイズでレイアウトを変更するか、CSSのメディアクエリーで決定するブ
2014年03月20日08:00 REGISTERED APPLE DEVELOPER AGREEMENT ― 16. Export Control. (輸出管理) カテゴリ法務_PFルール businesslaw Comment(0)Trackback(0) この16. Export Control. と一つ飛んだ18条は、輸出管理に関する条項です。 You may not use or otherwise export or re-export any Apple Confidential Information received from Apple except as authorized by United States law and the laws of the jurisdiction in which the Apple Confidential Information
接続処理中の状況が大量にあり、接続によってはアクセス開始から数分間「接続受付中」だったりと、通常では考えられない状況でした。 わかりやすく言うと「もうダメ、これ以上アクセスが来ても処理できないです」という状態でした。 Yahoo!砲などの大量アクセスがあったわけでもないのになぜだろうと考えて、思い当たったのがスマホでした。特に、スマートニュースやグノシーなどのニュース系アプリからのアクセスですね。 PCからのサイト閲覧が中心のとき問題なかったのに、同じアクセス数でもスマホからのアクセスが増えるとWebサーバーがいっぱいいっぱいになってしまうことがあるのです。 ガラケー向けのケータイサイトをやっていた人には当然のことなのですが、モバイルからのアクセスというのは、サーバーから見るとちょっと面倒なんです。通信速度は遅いし(つまりデータの送受信に時間がかかる)、接続の途中で電波の状況が悪くなってし
TL;DR commitオブジェクトに生えているdistinctプロパティを見れば良い. distinctが0の場合,それは重複しているcommitであることが分かる. Ref; https://developer.github.com/v3/activity/events/types/#payload-18 本編 さて,GitHubのWebhooksのpushイベントを受け取って,それをIRCや他のチャットツール等にフォワードしたくなるようなことがままあると思います. これをナイーブに実装しようとすると,pushイベントを受け取って,そのpayloadに乗ってくるcommitsをベロっと舐めてフォワードするような感じになるでしょう. つまり, 2ac1745 commit3 26cecfa commit2 8ee5552 commit1というcommit郡がpushされると,これらのco
こんにちは〜みんなCakeやってる〜??ぼくもボチボチやってますよ〜 今回はCakePHP2.4をなるべく早く身につけてスマートに開発するための情報を紹介したいと思います。 割と自己流だったりするので肌に合わなかったらごめんなさい。 さて、Cake3のリリースが待ち遠しいところではありますが、今回はCake2系についてです。 というのも現場では常に最新バージョンが使える環境とは限りません。PHP5.3を使わざるえない状況は考えられますし、既存プロジェクトの改修案件とかもあります。その時はCake2系をやることもあるよねーというわけです。 対象は「PHPは知ってるけどフレームワークはあんまり...」という方向けです。 1. CakePHPを知る まずは「Cakeってどういう風に開発すればいいの?」ってところですね。 正直、公式のブログチュートリアルがオススメです。 Blog Tutorial
メリークリスマス! PHP Advent Calendarもいよいよ24日目に突入です。 昨日はxhprofについてでしたね。僕もパフォーマンスチューニングの際に使っています。手軽に利用できるのでお勧めです。 さて、このエントリーでは表題の通りMVCについて書かせていただきます。これは、PHPカンファレンス2012&WordCamp Tokyo2012合同LT大会で発表した「やはりお前らのMVCは間違っている」で煽るだけだったこの問題をきちんと解説するものです。 この発表資料を公開するとPHPの枠を超えて広く閲覧いただき*1、また多くの方から突っ込みを戴きました。「LTだから」と言って逃げていた回答をして、気持ち新たに新年を迎えようと思います。 MVCとはなんなのか 間違いを指摘する前にMVCがそもそもどういうアーキテクチャであるのかを確認しなければいけません。 MVCは1970年代にパロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く