はじめに 第7回はRails以外のWebフレームワークの簡単な紹介と、SinatraでHello Worldアプリケーションを動かすところまでを解説しました。今回はSinatraで実際のアプリケーションを作り、SequelとHamlという2つのライブラリを紹介します。 Sinatraの特徴は、CGIスクリプトのようにファイル一つからアプリケーションが書ける気軽さです。CGIスクリプトといえば、代表的なものは何と言っても掲示板(BBS)です。そこで、今回はSinatraで掲示板アプリを作ってみました。ソースコードが少し長めなので、githubにて全文を公開しています。適宜参照しながら読み進めて下さい。ファイル構成は以下のようになっています。 start.rb アプリケーションの本体。 model/comment.rb 掲示板の書き込みを表すモデルの定義。 view/index.haml トッ
IBMの技術サイトである「IBM developerWorks Japan」に掲載されているOSS関連のドキュメントが素晴らしい。 Linux/OSS関連だけでも、2010年12月時点で600以上のドキュメントが登録されており、その質も非常に高い。 翻訳記事のようで、たまに日本語がおかしいところがあるけど、それを補って余るくらいの密度。 その中からインフラエンジニアとして、知っておくと良さそうな文書、面白そうな文書を何個か抽出してみた。 オススメはLPIC101の対策記事。実例を交えて詳しく解説されており、Linuxの動作を理解する上で非常に役立ちます。 本家サイトはこちら >> http://www.ibm.com/developerworks/jp/ リンクが切れているときは、本家サイトで検索してみてください。 ■Linuxカーネル系 ◆/procファイルシステムを使用したLinuxカ
Latest Word » Tutorials » Noise Texture in Photoshop Jul.25.2010 Noise Texture in Photoshop Tags: Beginner, Photoshop I wanted to switch it up this week to do a quick tip on how to create noise (grainy) textures with Photoshop to add subtle detail to your next project. A lot of times I feel that its the small and subtle details that really makes a project shine. Let’s get started. 1. Fill Base Lay
Links Sections Chapters Copyright Sections Chapters ERRATA Welcome! Introduction Part I: Basic Perl 01-Getting Your Feet Wet 02-Numeric and String Literals 03-Variables 04-Operators 05-Functions 06-Statements 07-Control Statements 08-References Part II: Intermediate Perl 09-Using Files 10-Regular Expressions 11-Creating Reports Part III: Advanced Perl 12-Using Special Variables 13-Handling Errors
Gitの使い方を覚えるにあたって、まず知っておきたいのは――git-cloneだのgit-commitだのは当然として――「操作をミスったときにどのように回復するか」である。それを実現するのは、次の3つのコマンドだ。 git-commit --amend git-reset git-reflog git-commit --amend あるファイルをコミットしたとしよう。 $ (edit...) $ git commit -am 'メッセージ生成処理を実装したよ。'しかし、しばらくして彼は気づいた。 def create_massage(param) ...typoしてる!massageじゃない、messageだ!マッサージを作ってどうする! 慌てるな。まずは直してステージに上げるんだ*1。 def create_message(param) ...$ git add .そして…。 $ gi
バージョン管理ツールGitの基礎練習です。 Windows XPのコマンドプロンプトでGitの基本的なコマンドを動かしていきます。 Gitを学び始めるきっかけにどうぞ。 (筆者もまだGitを使いこなしているわけではありません。 誤りのご報告、改善提案などは大歓迎です。フィードバックからよろしくお願いします) 目次 はじめに ダウンロードとインストール ファイルをGitの管理下に置きましょう 新しいファイルを追加します 新しいディレクトリを追加します 編集からコミットまでの流れはこんな風に進みます ブランチを使ってみましょう ここまでの作業ログを見ましょう この文書に書かなかったこと 関連リンク 更新履歴 ぜひ、感想をお送りください はじめに Windows XPのコマンドプロンプトで、 バージョン管理ツールGitの基本的なコマンドを動かしてみましょう。 この文書の通りに実行すると、 基本的
バージョン管理ツールSubversionの基礎練習です。 Windows XPのコマンドプロンプトでSubversionの基本的なコマンドを動かしていきます。 Subversionを学び始めるきっかけにどうぞ。 目次 はじめに ダウンロードとインストール リポジトリ用のディレクトリを作ります リポジトリを初期化します 新しいモジュールを作ってインポートします チェックアウトして作業開始 新しいファイルを追加します 新しいディレクトリを追加します 普段の作業はこんな風に進みます ファイル名を変更してみよう この文書に書かなかったこと 関連リンク 更新履歴 ぜひ、感想をお送りください はじめに Windows XPのコマンドプロンプトで、 バージョン管理ツールSubversionの基本的なコマンドを動かしてみましょう。 この文書の通りに実行すると、 基本的なSubversionのコマンドをひと
Processingで作った作品をAS3に移植しました。 プログラムのイメージ画像。 CrossDrawer Processing版 CrossDrawer ActionScript3版 ASファイル群(FlashDevelopプロジェクト一式) こちらもご覧ください。 FlashDevelop環境で、AS3を開発してみる。 処理の流れ setup関数で初期化 Event.ENTER_FRAMEでdraw関数をループ実行 マウスクリックでreset関数を実行し、カンバスをクリア。 という流れになっています。 setupメソッドから見てみます。 /** * A initialization function which refers Processing. */ public function setup():void { stage.scaleMode = StageScaleMo
Supawhat? Stripes are undoubtly very popular graphical element these days. They are used in many ways in web design, mostly as background patterns of various layout parts or block elements. Here is a fresh tip that could save your time. Solid and transparent When i match colors for some web site, i find it very easy if i use one small .GIF image, which has one stripe transparent and others are sol
斜線の背景も最近のWebデザインの特徴の一つです。Background Image Maker を使えばカンタンに斜線の背景画像を作ることが出来ます。が、もっと便利でかつ汎用的な斜線の背景画像の作り方が Super Stripes で紹介されていたので試してみました。 まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。 ラインツールで 1px の「硬い線」を斜めに引きます。 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。 書き出しをすれば画像は完成です。 あとは、css で背景画像と背景色を同時に指定します。
今回は、Mac OS X のDashboard っぽいバーを作ってみます。(ちなみに、私は根っからのWindowsユーザーで、Dashboard を触ったことはありません・・・) まず、角の丸みが100%の角丸矩形を描きます。塗りの色は#000000、ストロークは「なし」にしておきます。 描画した矩形をコピー&ペーストで複製します。(下の図ではわかりやすいように複製したほうの塗りの色を変えています。)元の矩形を「base」、複製したほうを「gradation」とします。 次に「gradation」の大きさを変えておきます。幅と高さをそれぞれ2pxずつ小さくしてください。 矩形ツールで「gradation」の半分の高さの長方形を描き、「gradation」の上辺と揃えます。長方形の塗りの色を#000000、透明度を50%ぐらいにすると、重なり部分が見えるので調整しやすいです。 ここで、Par
FireworksでWeb2.0デザインしてみる - Part.3 そろそろネタが尽きてきましたが、第三弾です。今回はバッジに挑戦! 星型で適当な大きさの星を描きます。 画像を選択すると黄色のポインタが5つ現れると思います。これらのうち、「頂点」というのを動かして頂点の数を24ぐらいにします。さらに、「半径2」も動かして、下の図のようにします。 次は塗りを調整します。「塗りの種類」で[グラデーション]-[線形]を選び、左右の色を調整します。 さらに、グラデーションの方向を縦にします。shiftキーを押しながらだときれいに90度回転させることができます。 ドロップシャドウをかけます。各設定値はキャプチャのとおりです。 完成!これは簡単に出来ました。 ちなみに、PingMag - 東京発 「デザイン&ものづくり」 マガジン » Archive » ウェブデザインのトレンド:死の宣告にもあるよ
FireworksでWeb2.0っぽいデザインを試みるこのコーナー。第二弾はMacのAqua風ボタンを作ってみましょう。 下の図のような感じの角丸矩形(「くけい」って読むのね。)を描きます。角の丸みは20-30%程度。塗りの色は淡い色に、ストローク(線)の色はなしにしておきます。 次に描画した矩形を2回コピー&ペーストして複製を作ります。(つまり全部で3つが重なっている状態。)便宜上、上から順番に「base」「100% round」「temp」という名前をつけます。下の2つはしばらく使わないのでロックをかけておくとよいでしょう。 一番上の「base」を編集していきます。まず、ストローク(線)の色をつけます。「塗り」よりも濃い目の色にすると見栄えが良いです。(例では塗りの色を#DDFF88、ストロークの色を#99CC00、ストロークの種類は1pxの柔らかい線にしてみました。) 次に「シャドウ
先日、勢いで Macromedia Fireworks 8 を購入しました。私はどうも Photoshop や Illustrator が苦手、というか使いこなせません。メニューが豊富すぎてわけがわかんない。が、Fireworks はバージョン2 ぐらいから会社で使っていて、相性がいいのです。 で、せっかく買ったので、Web2.0っぽいデザインにチャレンジしてみました。まずは第一弾。「mirror reflection(反射)」です。 こういうやつ。 反射させたいオブジェクト(A)をコピー&ペーストで複製(B)します。 複製したオブジェクト(B)を選択して、[修正]-[変形]-[縦反転]で反転させます。 反転させたオブジェクト(B)を元のオブジェクト(A)の下に移動させます。 反転させたオブジェクト(B)を選択して、[コマンド]-[クリエイティブ]-[イメージのフェード]を選び、メニューか
Greg O'Keefe, gcokeefe@postoffice.utas.edu.auv0.8, September 2000 日本語訳 千旦裕司v0.8, December 2000 この文書は、ソースコードから最小限度の Linux System を構築する方法を述べたもの である。以前は、 From PowerUp to Bash Prompt ( 日本語訳) の一部であったが、これを分離し、双方の文書を簡潔かつ明確な主題を持つものに した。ここで構築するシステムは、本当に 最小限度のものであり、 実際の役に立つシステムではない。ソースコードから本格的なシステムを構築したい なら、この文書ではなく、Gerard Beekmans の Linux From Scratch HOWTO を参考にしてほしい。 1. 何が必要か 2. ファイルシステム 3. MAKEDEV 4. カーネ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く