サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
セキュリティ
mawatari.jp
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子要素がfloatだった場合も親要素の高さを拡張させる例</title> <style type="text/css"> .parent { background-color: #E5E5E5; padding: 5px; overflow: auto; } .child { width: 100px; height: 100px; background-color: #449D44; margin: 5px; float: left; } </style> </head> <body> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"><
MacにComposerをインストールする方法をメモしておきます。 今回はどこでもComposerコマンドが使えるようにグローバルインストールしたいと思います。その他のインストール方法などはComposerのWebページに詳しくあります。 Getting Started #Installation – Composer 環境 環境は以下の通りです。 PHPに関しては、Mac OS X 10.10.3に初めから入っているものを利用しました。 phpenvや php-versionといったバージョン管理は導入しておりません。 ソフトウェア バージョン Mac OS X 10.10.3 PHP 5.5.20 php -v PHP 5.5.20 (cli) (built: Feb 25 2015 23:30:53) Copyright (c) 1997-2014 The PHP Group Zen
Ansibleのコールバックプラグインを使って、プロビジョニングの実行結果を通知する方法をメモしておきます。 コールバックプラグインについては、公式ドキュメントに概要とサンプルが載っていますので参照してください。 Developing Plugins #Callbacks – Ansible ここでは、Mac OS Xの通知センター (Notification Center) にAnsibleの実行結果を表示させることを目標とします。 今回作成したプラグインは、以下よりダウンロードできます。 Ansible Callback Plugins – GitHub 環境 環境は以下の通りです。 Ansibleに関しては、Homebrewを利用してインストールしています。詳しくは以下を参考にしてください。 HomebrewとAnsibleでMacの開発環境構築を自動化する ソフトウェア バージョン
rbenvおよびruby-buildのインストール、そしてRubyの最新安定版をインストールする作業を自動化したいと考えていました。rbenvでRubyの最新安定版をインストールするワンライナーをメモしておきます。rbenvやruby-buildのインストールは以下の記事を参照してください。 Homebrewでrbenvをインストールする HomebrewとAnsibleでMacの開発環境構築を自動化する rbenvには、インストールできるバージョンを調べる rbenv install -lコマンドは用意されていますが、 latestや stableなどといった最新安定版を調べるコマンドは用意されていません。 何か方法はないかと、rbenvやruby-buildのリポジトリにあるイシューを巡っていた際、Stack Overflowのスレッドにたどり着きました。 ‘rbenv install
source 'https://rubygems.org' ruby '2.0.0' #ruby-gemset=railstutorial_rails_4_0 gem 'rails', '4.0.5' gem 'bootstrap-sass', '2.3.2.0' gem 'sprockets', '2.11.0' group :development, :test do gem 'sqlite3', '1.3.8' gem 'rspec-rails', '2.13.1' end group :test do gem 'selenium-webdriver', '2.35.1' gem 'capybara', '2.1.0' end gem 'sass-rails', '4.0.5' gem 'uglifier', '2.1.1' gem 'coffee-rails', '4.0.1' g
開発用のMacBookを新調したのをきっかけに、HomebrewとAnsibleを用いて開発環境構築の自動化に取り組みました。今回はその環境をServerspecを使ってテストする方法をメモしておきます。 HomebrewとAnsibleでMacの開発環境構築を自動化する 環境 環境は以下の通りです。 ソフトウェア バージョン Mac OS X 10.10.4 Homebrew 0.9.5 Ansible 1.9.1 Serverspec 2.19.0 Serverspecとテストについて Serverspecについては既知の方も多いと思いますが、簡単に説明すると、対象の環境が期待した通りの状態にあるかをテストするためのツールです。AnsibleやChef, Puppetといった構成管理ツールに依存することなく、また、OSの種別毎にテストコードを書き換える必要がないのが特徴です。 Serv
MacにHomebrewを使ってrbenvをインストールする方法をメモしておきます。 Homebrewのインストールについては以下を参照してください。 MacにHomebrewをインストールする 環境環境は以下の通りです。Mac OS X 10.10.2に初めから入っているRubyに関しても記載しておきます。 ソフトウェアバージョン
普段から、Vagrant + Ansibleを用いて、チームで共通の開発環境を作れるようにしています。先月、届いた13″ rMBP early 2015に開発環境を構築していた際、Ansibleがうまく実行できないトラブルにハマりました。 全く同じBox及びプロビジョニングを使って旧環境では問題なく構築できたのに、新環境ではできないことに頭を悩ませましたが、2時間ほど試行錯誤した結果、解決できたので、その事象と原因、対処法をメモしておきます。 環境環境は以下の通りです。Vagrant, VirtualBox, AnsibleすべてをHomebrewでインストールしています。結果からいうとVirtualBoxやAnsibleは直接関係ありませんでしたが、一応、バージョン情報を示しておきます。 ソフトウェアバージョン
3月20日に13″ rMBP early 2015が手元に届いたので、以下の様なツイートをしながらPlaybookを作っていました。 GUIアプリも含めて全部Homebrewで管理してみようかな。 — まわたりなおと (@mawatarin) 2015, 3月 20 んー？Brewfileで管理できないのか？ http://t.co/g8eBr2tInk — まわたりなおと (@mawatarin) 2015, 3月 20 うん。Brewfileの代替はこれがよさそうだな。今夜やってみよう。 http://t.co/mxXRd3IGK2 — まわたりなおと (@mawatarin) 2015, 3月 20 例のごとく、そのとき取り組んだことを整理した上で公開しようとしていたわけですが、その日の夕方、@t_wadaさんによって、Mac の開発環境構築を自動化する (2015 年初旬編)という
MacにRuby on Railsの開発環境を構築する方法をメモしておきます。 Rubyに関してはrbenvを使うことを前提とします。rbenvのインストールについては以下を参照してください。 Homebrewでrbenvをインストールする 目的この記事では、Ruby on Railsを用いたチーム開発のための環境を構築することを目的とします。何かとトラブルになりやすいバージョン管理や、パッケージの依存関係などを意識しなくとも、他のメンバーがインストールコマンド一発で、同一の開発環境を手に入れれるようにするための手順をまとめました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryを使った二重送信防止のサンプル</title> </head> <body> <form action=""> <input type="submit"/> </form> <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $('form').on('submit', function () { $(this).find('input:submit').attr('disabled', 'disabled').val('送信中...'); }); </scr
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLサンプル</title> <style type="text/css"> /* 以下に切り出し */ </style> </head> <body> <p id="sampleId" class="sampleClass" title="sampleTitle">これはサンプルです。</p> <ul> <li>foo</li> <li>bar</li> </ul> </body> </html>
Vagrantの設定については、深くは触れません。 CentOS 6.xのboxを使って vagrant upし、 yum install mysql mysql-server mysql-develとしただけの環境です。 my.ini含め、ゲストOS側の設定は、特に変更していません。 参考までに、以下にVagrantfileの内容を記載しておきます。 # -*- mode: ruby -*- # vi: set ft=ruby : # Vagrantfile API/syntax version. Don't touch unless you know what you're doing! VAGRANTFILE_API_VERSION = '2' Vagrant.configure(VAGRANTFILE_API_VERSION) do |config| config.vm.box =
fancyBoxで、iframeをフローティングウィンドウで表示する際に、デザインの都合上、オリジナルのクローズボタンを設置したいことがあると思います。方法の一つとして、iframe側のHTMLに記述したクローズボタンを機能させる方法をメモしておきます。以下に例を示します。 デフォルトのクローズボタン iframe側のHTMLに記述したクローズボタンの例 iframe側のHTMLに記述したクローズボタンを機能させる方法以下は、サンプルのソースコードです。CSSや、重要でないオプション等は省略しています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>デモ - fancyBox クローズボタンを独自のものにする</title> <link rel="stylesheet" href="assets/
MacにHomebrewを導入する方法をメモしておきます。 Homebrewとは何ぞやとか、使い方等は、以下のサイトが参考になると思います。 パッケージ管理システム Homebrew – Qiita 環境環境は以下の通りです。Rubyに関しては、Macに初めから入っているものを使いました。 ソフトウェアバージョン
Macにbash-completionを導入し、補完を活用する方法をメモしておきます。 Homebrewを使ってインストールを行うので、事前にHomebrewをインストールしておく必要があります。以下の記事を参考にしてください。 MacにHomebrewをインストールする 環境環境は以下の通りです。 ソフトウェアバージョン
以前に、ツイッターでメモしてたものが、時が流れて探しにくくなったので、改めてブログにメモしておきます。 ホスト側でwatchしてても、ゲスト側に更新が反映されない問題Gruntfileに、Compassのコンパイルを定義していて、watchを実行し、SCSSの変更を常時監視していました。そんな中で、この問題に出くわしました。 ことの経緯ひょっとして、VagrantとGruntって相性悪い？ ホスト側でGrunt watchしてても、ゲスト側ではうまく更新が反映されてない。 — まわたりなおと (@mawatarin) 2013, 12月 23 お酒飲みながらだから、自分がバグってんだろうって思ってたけど、この二つの相性に原因がありそうだぞ。 — まわたりなおと (@mawatarin) 2013, 12月 23 ググっても、それらしきものが出てこない…。誰か、同様のトラブルを経験した人はい
たまにしか実行しないので、よく忘れるコマンド「MySQLクエリキャッシュのステータス確認と削除」についてのメモ。 まずは、クエリキャッシュのステータス確認について。 mysql> SHOW STATUS LIKE 'Qcache%'; +-------------------------+----------+ | Variable_name | Value | +-------------------------+----------+ | Qcache_free_blocks | 1 | | Qcache_free_memory | 21430536 | | Qcache_hits | 162 | | Qcache_inserts | 11960 | | Qcache_lowmem_prunes | 0 | | Qcache_not_cached | 24 | | Qcache_que
PHP5.4以降では、 array()を [](short array syntax)短縮構文で書くことができるようになりました。コードの中に存在している array()を []に置換する方法をメモしておきます。 PHP5.4に移行していく中で起こりうる array()と []が混在してて気持ち悪い！という状況等を解消するのに一役買ってくれることでしょう。 ちなみに []記号は、角括弧やブラケット (bracket)等と呼ばれます。 環境以下の環境で確認をしました。 当然ながら、PHP5.4以降がインストールされている必要があります。 ソフトウェアバージョン
Handlebars.jsのプリコンパイルを行いたいので、開発環境にHandlebars.jsをインストールします。そのため、Node.jsが必要となります。Node.jsの環境構築は、ググって調べるか、過去の記事を参考にしてみてください。 nvmとNode.jsとWebSocket.IOをインストールしてWebSocketアプリの環境を作る npmでHandlebars.jsをインストールするnpm (Node Package Manager) を使って、Handlebars.jsをインストールします。Handlebars.jsの公式サイトにも簡単な手順が記載されています。 Handlebars.js – precompile npm install handlebars -g npm http GET https://registry.npmjs.org/handlebars npm
array (size=2) 'User' => array (size=1) 'name' => string 'foo' (length=3) 'Image' => array (size=1) 0 => array (size=2) 'model' => string 'User' (length=4) 'attachment' => array (size=5) ...
Twitter Bootstrap v3.0.0のグリッドシステムのカラム数を可変対応させたのでメモしておきます。 Twitter Bootstrapでは、12カラムのグリッドシステムが採択されていますが、この対応により、任意の数に変更できるようになります。一般的なCSSフレームワークでは、12, 16, 18, 24カラムのグリッドシステムが採択されることが多いようです。僕は24カラムに変更して使っています。 カラムを24個使うことは、まずないのですが、細やかな調整ができるようになるので便利です。例えば、1行12カラムの時に、3.5幅のカラムを作りたいという需要が、1行24カラムであれば、7幅のカラムで実現できると言ったところです。 使い方使い方は簡単で、以下のリポジトリから less/grid.lessを取得して、手元の less/grid.lessと差し替えてください。あとは les
npm install -g grunt-cli npm http GET https://registry.npmjs.org/grunt-cli npm http 304 https://registry.npmjs.org/grunt-cli npm http GET https://registry.npmjs.org/findup-sync npm http GET https://registry.npmjs.org/nopt npm http GET https://registry.npmjs.org/resolve npm http 304 https://registry.npmjs.org/findup-sync npm http 304 https://registry.npmjs.org/nopt npm http 304 https://registry.npm
cat /etc/lsb-release # 以下のように表示されます DISTRIB_ID=Ubuntu DISTRIB_RELEASE=12.04 DISTRIB_CODENAME=precise DISTRIB_DESCRIPTION="Ubuntu 12.04.2 LTS"
昨年、作ったVMware上の開発環境が若干古くなってきたので、更新したときのメモ。 環境構築をする際に追加したリポジトリ（EPEL, Remi, RPMForge）には、当時と同じApache 2.2.15までしかなかったので、CentALTというリポジトリを追加しました。CentOSのバージョンは、当時の6.2から6.3へアップグレードしています。 リンク：CentOS開発環境の構築（Apache, MySQL, PHP） Yumリポジトリの追加とApacheのupdate # Yumリポジトリの追加 rpm -Uvh http://centos.alt.ru/repository/centos/6/x86_64/centalt-release-6-1.noarch.rpm # 意図せず標準外のリポジトリを使うのを避けるため無効化、使う場合は明示する # リポジトリ設定ファイルのenab
CakePHPでRESTful APIを作って、Backbone.jsのデータの永続化をサーバサイドで行う方法をメモしておきます。RESTful APIは、FuelPHP等、その他のPHPフレームワーク、Ruby on Rails等でも簡単に作成することができますので、各々好きなものを選択してください。ここでは、CakePHPを使った例を示します。 ここで制作したアプリケーションは、以下よりダウンロードできます。 Backbone ToDos with CakePHP RESTful API – GitHub 開発環境開発環境は以下の通りです。それぞれ執筆時点での最新バージョンを用いました。 ソフトウェアバージョン
最近、JavaScriptを多用するWebアプリケーションの開発に携わる機会が増えてきました。 jQueryのイベントハンドラをベタに書いていくのは、規模が小さいうちは良いのですが、機能追加・仕様変更等が多発すると少々面倒なことになります。このまま大きくなっていくと破綻が目に見えているので、構造化されたアプリケーションを作りたいと思いBackbone.jsを学び始めました。 Backbone.js 公式サイト 7月上旬から学び始めたので、まだ20日程度ですが、その中で学んだこと等を紹介します。これから勉強を始めてみようと思う人の参考になれば、幸いです。 以下の内容は、Backbone.jsの熟練者が指南しているわけではないことを予めご了承ください。ちなみに、平日の夜と、時間が取れるときの週末を使って勉強して、イベントサービスのWebAPIを串刺し検索するアプリ等を作るくらいには、Backb
XAMPPインストール直後のPHPは、タイムゾーンがEurope/Berlinで登録されているため、日本時間からマイナス8時間ずれた状態になっています。php.iniのdate.timezoneを編集し、時刻合わせを行いましょう。 環境環境は以下の通りです。 ソフトウェアバージョン
fancyBoxでYouTubeの動画を再生する方法CakePHPでPHPUnitを利用する方法をまとめた動画を素材として、見てみましょう。 PHPUnit and You – By Mark Story 再生したい動画のページを表示します。今回の例だと、URLは、 http://www.youtube.com/watch?v=QF1NZM360Ucです。 動画の下部にあるタブを「概要」から「共有」へ切り替えます。 「共有」タブの中のタブを「この動画を共有」から「埋め込みコード」へ切り替えます。 iframeは、fancyBoxで生成するので、必要ありません。srcアトリビュートの値（URL）だけを選択し、コピーします。 これで下準備は完了です。要点をあげるならば、 http://www.youtube.com/embed/のあとに、動画のIDを記述すれば良いということです。 あとは、以下
次のページ
このページを最初にブックマークしてみませんか？
『ウェブエンジニアのメモ帳 | mawatari.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
