WordPressをAWS上に構築すると得られるメリット まとめ | DevelopersIO
はじめに 最近、WordPressに興味が出てきたのでAWS上に構築して勉強しているのですが、AWSとWordPressって相性いいんじゃないかと思うことが何点かありました。そこで自分が気づいたWordPressをAWSに構築するメリットをまとめたいと思います。今回はWordPressの4.2.2 を使って試しています。 WordPressをAWSに構築すると得られるメリット一覧 静的コンテンツをAWSのサービスから配信できる ローカルに静的コンテンツを置かないことでスケールアウトできる 構築したHTMLファイルをS3でホスティングできる 簡単にWordPressのバックアップが作成できる Web開発に便利なサービスが使える Elastic Beanstalkを使って簡単に構築できる [おまけ]Amazon SESと連携できる 1.静的コンテンツをAWSのサービスから配信できる WordP
はじめてのマテリアルデザイン入門 | DevelopersIO
この記事では、マテリアルデザイン初心者の自分が良いなと思うサイトをご紹介します。 上から順に見ていくと理解が深まるのではないのかなと思います。 マテリアルデザインとは？ よくわかるマテリアルデザインの設計コンセプト よくわかるマテリアルデザインの設計コンセプト | fladdict マテリアルデザインの設計コンセプトが分かりやすく書かれている良記事です。 これをまず読んでみてコンセプトを掴んでおけば、理解が深まると思います。 マテリアルデザインとフラットデザインって結局何が違うの？ Googleマテリアルデザインとフラットデザインって結局何が違うの？[UI/UX] | naver フラットデザインなら知っているよっていう人はこちらを見ると良いかもしれません。 動画で見てみる マテリアルデザインを解説してくれてます。 日本語字幕が出ているので親切です。 ちなみにGoogleのデザイン関連の動
[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}
【鍵管理】~/.aws/credentials を唯一のAPIキー管理場所とすべし【大指針】 | DevelopersIO
よく訓練されたアップル信者、都元です。AWSを利用していると、APIキーの利用は必要不可欠です。数多くのAWSアカウントを扱っていれば、たまたまAPIキーは利用せず、管理コンソールへのパスワードだけで済んでしまうケースもあるかもしれませんが、これはごく例外的な状況です。しっかりとAWSを使いこなしている以上、APIキーを管理する機会が必ずあります。 鍵管理が大変 というわけで、皆さんは自分用のAPIキーを数多く管理しているわけですが、その管理は行き届いているでしょうか。少なくとも「失くしたｗｗｗ」なんていう事態は是非避けたいものです。大丈夫すか？ では、とあるキーがありましで、それが書き込まれている場所を全て挙げられますか？ あちこちのファイルに書き込んだりしていませんでしょうか。aws-cli用の設定ファイルはもちろん、環境変数設定用の~/.bash_profileの中、シェルのhist
お名前.comからAmazon Route 53へドメインを移管する | DevelopersIO
こんにちは、虎塚です。 Amazon Route 53でドメインが管理できるようになって数ヶ月がたちました。Route 53では、Amazon Route 53でドメインを購入する ｜ Developers.IOにあるように、ドメインを新規に取得することができます。さらに、別のドメインレジストラで登録していたドメインを、移管して管理することもできます。 そこで今日は、他のドメインレジストラに登録しているドメインをRoute 53へ移管する手順を紹介します。例として、 お名前.comで管理しているドメインを想定して説明します。 ちなみに、移管手続きからAmazon側での処理完了までの所要時間は、移管元の事業者によって異なります（移管元が何も応答しなかった場合、5〜7日間かかるとのことです）。今回は約6時間でした。 はじめに この記事の内容は、AWSの公式ドキュメントをスクリーンショット入りで
[Polymer] Material Design を使った Web ページを作ってみる | DevelopersIO
Material design with Polymer Google I/O 2014 で発表になった「Material Design」ですが、Web の場合は Polymer で提供されています。Polymer は Web Components を使ったフロントエンドフレームワークです。昨年の Google I/O で発表されました。 ということで、リファレンスを参考に Polymer を使って Material Design の Web ページ制作を試してみたいと思います。 デモで Material Design の世界を体験してみよう その前に、Material Design でどのような Web ページが作れるのか、デモの Web ページが公開されているので、ちょっと触ってみましょう。以下の 3 つのデモが公開されています。 Topeka (クイズアプリ) Paper Eleme
![[Polymer] Material Design を使った Web ページを作ってみる | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/72ef0cd6f2febb767fc5805699941053937cbb1b/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F06%2Fpolymer.png)
Google の新しいデザインガイドライン「Material Design」 | DevelopersIO
Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge
CoffeeScript と TypeScript をそれぞれ実務案件で使ってみた感想 | DevelopersIO
そんな訳で、CoffeeScript を触り始めて半年弱、TypeScript を触り始めて1ヶ月弱ほど経ちました。まだまだ日は浅いですが、いちおう両方とも実務案件にて使用したということで、ここらで双方に対する振り返りを簡単にしておくとします。 CoffeeScript について http://coffeescript.org/ 学習開始時期: 2014年1月頃 始めたきっかけ: Middleman や Ruby on Rails が標準サポートしているため、面倒な環境構築等をしなくて済んだから Ruby や Haml のようなテキスト量の少ない文法が好みだったから そんな訳でとっかかりとしての基礎学習期間はだいたい2〜３日くらいで、そこから既存のプロダクションコードを CoffeeScript に書き換えつつ実案件に取り入れていきました。 おおまかな特徴 要は JavaScript をよ
Ruby on RailsにてBootstrap3のサンプルページを作成する | DevelopersIO
はじめに サンプルアプリ等を作成する際、デザインに悩むことは多いかと思います。 (特にデザインセンスに乏しい私のようなプログラマは・・・) このような時に、Bootstrapは強い味方となります。(今更感は強いですが・・・) またBootstrapにはデザインのサンプルが用意されているので、このサンプルをベースとしてアプリを作っていけばデザインについて悩むことを減らすことができそうです。 今回はRuby on Rails 4 にBootstrap3を適用し、サンプルにある「Starter template」と同じページを作る 手順について纏めてみたいと思います。 作業手順 以下に、今回の作業手順を書いていきます。 1.ページ作成 まずはRuby on Railsにて、今回表示するページを作成します。 コントローラ、ビューの作成 今回表示する画面のコントローラは「welcome」、ビューは「
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ブラウザでの
社内AWSエンジニア向けMac用ツールまとめ資料を公開してみる | DevelopersIO
はじめに こんにちは植木和樹です。今年の5月にクラスメソッドにJoinしてから早半年。当時6名体制だったAWSチームも15名近いメンバーとなりつつあります。 クラスメソッドでは入社した社員にMacBook Airが貸与されます。薄くて軽くて持ち運びに便利なので、いつでもどこでも仕事ができます（歓喜）。さて入社して数日間は仕事をするための環境作りに時間がとられるものですが、なるべく早くフルスロットルな仕事体制を整えてもらえるようクラスメソッド社内で使っているツール類をまとめてみました。 セットアップ手順まで記載するとエントリが長くなるのでツールの紹介のみです。参考となるセットアップ手順については紹介内でリンクを貼っています。 業務系ツール Chrome 配布元サイト Chrome ブラウザ 作業ミスを防ぐため、お客様のAWSアカウントごとにChromeユーザーを切り替えて使いましょう。設定方
MacBook / iMac 買ったらすぐにインストールしておきたいアプリたち | DevelopersIO
ある朝出社してみたら僕のデスクにでっけーアルミ板が置いてありました。 15inch MacBookPro Retina です。プライベートでは MacBook Air を使っていますが、11inch と小さいのでこの大きさはなかなかインパクトがあります。Retina ディスプレイモデルになって以前のモデルよりも薄型軽量になったとはいえ、結構ズッシリします。子供は勿論ですが女性でも持ち歩くのは大変なんじゃないかな。多分ちょっとした凶器になりますね。自分もなるべく持ち歩きたくはないです。 このたび会社から新規に Mac を支給されたということで、まず最初にしなくてはならないのがマシンのセットアップなわけです。どのアプリをインストールするのか、開発環境はどうやって構築するのか等々、色々と試行錯誤しなくてはならなかったりと結構な時間を費やすことになるわけです。下手したら1日くらい費やしてしまいかね
WebアイコンフォントFont AwesomeのSCSS版を使ってみる | DevelopersIO
画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。 Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。 【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 注意 今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたい
【AWS】JenkinsとserverspecでChefのテストを自動化する | DevelopersIO
はじめに こんにちは植木和樹です。相変わらずCloudFormationとChefな毎日を送っています。そのおかげで、最近は実験用サーバを設定するときにも極力手作業はなくし、CloudFormationやChefを使って自動化・省力化する習慣がつきました。以前作ったCookbookを使用して、コマンド1つで新環境が構築されたときって気分いいですよね。 さてChefのCookbookが増えてきて徐々に再利用が進んではいるのですが、Cookbookを作成してから数週間もすると「本当にこのクックブックはまだ動くのかな？」と不安になってきます。ここはやはり、Cookbookが正しく適用されることを継続して保証する仕組みがほしいところです。 本日はChef Cookbookのテスト自動化の一例として、JenkinsからEC2を起動してからchef-soloを使ってCookbooksを適用し、その後s
ブログ記事をわかりやすくする！画像加工ツールの紹介と使いかたのコツ | DevelopersIO
画像を制するものは、ブログを制す 主に技術的な記事において、記事の内容がわかりやすいか、わかりづらいか大きく左右するのが画像です。 わかりやすい言葉遣いも大切ですが、画像や図表は何文字分もの情報量を一発で伝えることができる表現手法です。わかりやすさの面では、文章でいくら長々と事細かに説明しても、一枚の絵に負けてしまうこともあります。それほど画像や図表の威力は大きいのです。ぜひ効果的に使っていきたいですよね。 しかしながら、画像はただぺたぺた貼り付けておけば良いというわけではありません。内容を補足するために文字を足したり矢印を付けたりすることで、よりわかりやすいものにすることができます。とはいうものの、画像の加工って結構面倒です。 そこでわかりやすい画像を素早く作ることができる画像加工ツール・サービスをいくつかピックアップしました。使いかたのコツも一緒に紹介したいと思います！ Skitch
AWSにおける静的コンテンツ配信パターンカタログ（アンチパターン含む） | DevelopersIO
独自ドメインSSLだとCloudFront使えないから横綱無理だよねー、という話がありました。うん、確かにそうでした、執筆時点では…！ 本日2013/06/12、CloudFrontの独自ドメインSSL対応が発表（英語・日本語）されましたので、みなさん揃って横綱になればいいと思います。 よく訓練されたアップル信者、都元です。AWSを利用して構築した環境から、クライアント（モバイルやブラウザ等）に対してHTTPを使って静的なコンテンツを配信したいケースって、多いですよね。多いというか、むしろどんなシステムにも多かれ少なかれ、静的なコンテンツ配信があると思います。 スケーラビリティ・柔軟性・可用性・パフォーマンス・コスト 静的なコンテンツというのは、コンテンツをリクエストに応じて生成したりせず、完成品としてのファイルが手元にある状態です。例えば、多くのWebシステムにおいて、ほとんどの画像やJ
[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サイト高速化の具
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 | DevelopersIO
はじめに みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 前「【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応」はマインクラフトネタでフォントの作成について紹介しました。 今回は、作成したフォントをWebフォント化して読み込んでみたいと思います。 前回作成した匠顔フォントはこちら Creeperフォントをダウンロード 1，Webフォントについて 少し古いですが詳しい解説はこちらの記事「Webフォントについて調べてみた」をどうぞ。 一部抜き出して紹介します。 1.1，Webフォントとは CSS2.1時代、Webサイト上で利用できるフォントはユーザーのローカル環境にインストールされているフォントに限られていました。Mac、Windows PC共通のフォントは無いためデザインにも大きな制約がありました。デザインフォン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
