速習テンプレートSlim(HTML作成編) - Qiita
テンプレートエンジンSlimを使ってスマートにHTMLを作成する 昨日うちの事務所で開催したagatsuma.survive#02の中でSlimの説明が思ったよりも好評だったので改めてまとめてみます。 このエントリでは Slimを使ってHTMLを作成する ことだけを目的としているため、動的にSlimでゴニョゴニョするような話は出て来ません。HTMLの代替にSlimを使う、といった主旨の内容です。プログラムの話も出て来ませんが、残念ながらコマンドラインを少し使います。 Slim とは? 拡張子は .slim view の構文を本質的な部品まで減らすことを目指したテンプレート言語 Ruby製のテンプレートエンジン 高速, 軽量 インデント重要 用途 Railsプロジェクトのテンプレート Sinatra(Padorino)のテンプレート HTMLの代替(個人的には) SlimでHTMLを作成する
Subversionでファイルを分けてコミットする - kk_Atakaの日記
あらすじ コマンドラインからファイルをたくさんコミットしたいんだけど、コミットログを分けたいので分割してコミットしたい。 参考サイト svn changelist SVNでchangelistに所属していないファイルを扱う方法 - namutakaの日記 404 Not Found svnで間違ったコミットをmergeで戻すコマンドのメモ | 我流天性 がらくた屋 方法 なんかいっぱいファイルがあるとする。 $ ls a001.html a019.html a037.html a055.html a073.html a091.html a002.html a020.html a038.html a056.html a074.html a092.html a003.html a021.html a039.html a057.html a075.html a093.html a004.html
Swiffyとは何？ わかりやすく解説 Weblio辞書
別名：Google Swiffy Swiffyとは、Googleが提供している、Flash形式のファイルをHTML5に変換して再現するサービスである。 Swiffyでは、.swfの拡張子で保存されたFlashのファイルを変換対象としている。変換ツールにアップロードすれば、HTML5、および、SVGやCSS3といったHTML5に準拠した技術を使用したコンテンツとして出力することができる。 Swiffyを使用することで、HTML5やSVGに対応するプラットフォームであれば、Flashプラグインをインストールしていなくても、同じコンテンツを提供することができる。これによって、例えばFlashに対応していないiPhoneやiPadにも、Flashと同じコンテンツを配信できるようになる。 また、従来どおりFlashのオーサリングツールを使用してコンテンツを作成し、SwiffyでHTML5やCSS3の
google-analytics-railsを入れてみた 猫動画・アプリ紹介サイト - masalibの日記
アクセス解析がいずれは必要になるかと 思ったのでgoogleAnalyticsを いれることにしました 設定ファイル変更 cd /var/catmovie vi Gemfile gem 'google-analytics-rails' 詳細はhttps://github.com/bgarret/google-analytics-rails インストール bundle install Installing google-analytics-rails (0.0.3) 本番の設定ファイルにトラッキングIDを追加する vi config/environments/production.rb # googleanalyticsで取得したTrackerIDをセット GA.tracker = "UA-xxxxxx-x" Viewを修正 vi app/views/layout/application.h
Mergely - Compare and merge document differences online
Pure Javascript / HTML5 Written in pure Javascript, Mergely compares documents directly in the browser. Markup and merging are done in real-time with no calls to a server. Track your document changes online Track and merge your documents online. Mergely shows you changes to documents side-by-side so you can clearly see what changed from one version to the next. Mergely helps you take control Take
第9回 メンテナンスページへの切り替え
今回は、Capistrano の deploy:web:disable と deploy:web:enable タスクについて。 cap -T で表示される説明によれば、それぞれのタスクの目的は次の通り： deploy:web:disable -- 訪問者にメンテナンスページを見せる。 deploy:web:enable -- 再びアプリケーションをWebアクセス可能にする。 うーむ。便利そうであるが、これだけでは何がどうなるのか今ひとつピンと来ない。ソースコードを見てみよう（一部、省略）。 namespace :deploy do namespace :web do task :disable, :roles => :web, :except => { :no_release => true } do require 'erb' on_rollback { run "rm #{share
Capistrano and the custom maintenance page · devroom.io
Randuin posted a comment on my previous Lighting fast, zero-downtime deployments with git, capistrano, nginx and Unicorn post asking how I handle database migrations. This is a good question. Database migrations, especially with large datasets, take a long time to run. They also lock your database tables which may cause all kinds of trouble. There’s a quite an easy solution for this, offered to us
＠IT：Webアプリケーション: 第3回 気を付けたい貧弱なセッション管理
※ご注意 他社および他組織のWebサイトなどへのポートスキャンおよびデータの取得などの行為で得た情報を侵入などに悪用するか、または同じ目的を持つ第三者に提供した時点で違法となります。ご注意ください。 本稿の内容を検証する場合は、必ず影響を及ぼさない限られた環境下で行って下さい。 また、本稿を利用した行為による問題に関しましては、筆者および株式会社アットマーク・アイティは一切責任を負いかねます。ご了承ください。 「第2回 顧客データがすべて盗まれる」は、クロスサイトスクリプティング（XSS）と同様に実際のプログラミングを行うプログラマの責任であるという対策で、最も危険と思われるSQL InjectionとOS Command Injectionについて紹介した。今回は、プログラミング以前の設計段階で潜り込むセキュリティホール――見落としがちなセッション管理の脆弱性について説明していく。 We
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
Ruby on Railsが簡単というのは嘘 - toyoshiの日記
WinユーザがRailsアプリをこれから公開しようと思った場合 Windowsで学習を開始するのは不可能なのでLinuxをいれる でもWindowsで進めようとしてmsysGitをいれたりするが結局半日無駄にする なぜかgemが最新じゃないと怒られる gemを単純に使っても後から困るのでrvmかrbenvが必要。使い方覚えないといけない やっとRails3.2導入。javascriptエンジンが入ってないので起動しない やっと起動 HTML書いてるのは情弱だけ => hamlを覚える js書いてるのは情弱だけ => coffee scriptを覚える css書いてるのは情弱だけ => scssを覚える テスト書いてないコードはレガシーコードっていわれる しかたないのでRspecいれる => Rspec覚える ユニットテストだけではしかたないといわれcapybaraもいれる => capyb
html５のW3C FileAPIについて、調べてまとめた。 - それマグで！
html5のファイルAPIについて調べた。http://www.w3.org/TR/FileAPI/ を読みながら、メモ。やっぱり本家ドキュメントは頼りになるのね。 FileAPIはなにか ローカルファイルにアクセスできる。 アクセスできるローカルファイルはinput で指定された物だけ。*1 使い方 input に files タイプを指定するとFileAPIの対象になる。 <input type=files > filesタイプの読み込み方 file = document.forms[0].elements[0].files[0] このように、<input type=files/>へJS経由でアクセスできる。 input type=filesの項目は、複数ファイルの配列になっている。FileListオブジェクト呼ぶ FileList オブジェクト 通常の配列みたいなオブジェクトして定義
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate them without ever having to transfer the data across the network. This page walks through how to use JavaScript to
JavaScript File APIを使ってアップロードフォームに画像プレビューを設置する
前回の続き。アップロードフォームで画像を選択すると、横に選択画像を表示するようにした。 成果物：upload.html (画像ファイルの選択でプレビューを表示) メモ ファイル選択ボタン(input type=”file”)のchangeイベントがトリガー ファイルオブジェクトはdocument.getElementById(“image”).files[0]で取得できるが、jQueryなら$(‘#image’).prop(‘files’)[0]と書ける $('#image').change(function() { var file = $(this).prop('files')[0]; var fr = new FileReader(); fr.onload = function() { $('#preview').attr('src', fr.result); // 読み込んだ画像デ
TM Life - HTML5 File API を使ってファイル読み込み
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. HTML5 で追加された File API. これを使えば ローカルファイルの情報, 中身を取得して JavaScript でいじることができます. 今後, HTML5 の普及とクラウド化が進むにつれて重要な機能になることは間違いありません. サンプルを作ってみたのでよかったらぜひ. ドラッグ & ドロップにも対応しているよん♪♪ Chrome でローカル上で作業する場合, セキュリティ上ドラッグ & ドロップに反応しない場合があります. その場合, Chromeの起動オプションに –allow-file-access-from-files を指定することで読み込めるようになります. SAMPLE And D
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
twitter bootstrap popover使い方 | まとめーたー
photoBy: http://gigazine.jp/img/2012/04/21/palomitas/P1300436.jpgポップオーバーの使い方http://twitter.github.com/bootstrap/javascript.html#popovers に記載されているけど、なぜかうまく動かないのでまとめてみた。 最新版をダウンロードhttp://twitter.github.com/bootstrap/customize.html javascriptがころころ変わっているみたいなので、最新版をダウンロードしておこう。 使用例 一番簡単な使い方rel要素に popover を持つ物全てに適用 <script src="/app/webroot/js/bootstrap.js"></script> $(function() { $('[rel=popover]').po
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
subversionで最新5件のコミットが何のファイルをコミットしたか簡単に確かめる方法 - zenpouの日記
fujitaiju.com
CSS Arrow Please - By Simon Hoejberg - @shojberg