Google App Engine + Githubで静的サイト管理·DryDrop MOONGIFT
静的コンテンツのWebサイトを管理する場合、どうしても面倒でバージョン管理なんてしていられないと思ってしまう。そのため、単なるフォルダにHTMLや画像、CSSファイルなどを入れて作ってしまいがちだ。最初はよくとも、後々変更したり改修しているとバージョン管理しておけば良かったと気づくかも知れない。 管理画面 だがバージョン管理用のサーバを立てたり、デプロイしたり…そんな面倒なことはしたくない。そこで使ってみたいのがDryDropだ。 今回紹介するオープンソース・ソフトウェアはDryDrop、Google App Engine（GAE）とGithubを使った静的コンテンツ管理システムだ。 DryDropはGAEを使いながら、動的ではなくあえて静的なサイトを管理するというシステムだ。さらにそのコンテンツをGithubで管理する。DryDropの管理画面ではGithubのコンテンツ配置場所を指定し
ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法
黄金比、フィボナッチ数列、ファイブエレメンツ、サインウェーブなど数学的な要素を巧みにウェブデザインに取り入れる方法をSmashing Magazineから紹介します。 Applying Mathematics To Web Design 下記は各ポイントを意訳したものです。 また、当サイトでも黄金比をウェブデザインに取り入れる簡単な方法を紹介していますので、あわせてどうぞ。 黄金比をサイトのデザインに取り入れる簡単な３つの方法 はじめに 1. 黄金比（黄金四角形） 2. フィボナッチ数列 3. ファイブエレメンツ 4. サインウェーブ [ad#ad-2] はじめに 「数学は美です。」 数字嫌いの人には、ばかばかしく聞こえるかもしれません。けれども、自然や宇宙にある美しいもの、最も小さい貝殻から最も大きい銀河まで、数学的な要素を持っています。 数学ははるか昔から今日まで芸術や建築のデザインに
Zen-Codingのショートカットをまとめてみました - EC studio デザインブログ
前回の記事ではZen-Codingの導入方法について解説しました。 今回はZen-Codingの機能とそれを実行するためのショートカットの解説をします。 ※2010/02/22現在の最新バージョン「Zen Coding for Aptana v0.6.0.1」を対象にしています。 なおAptana（Eclipse）の場合だとAptanaの方の機能に多くのショートカットが割り当てられているので、利用する環境によってはショートカットを変更する必要があります。Zen-Codingのデフォルトのショートカットが機能しない場合は、記事最後にまとめる変更方法を参考にしてください。 Expand Abbreviation（省略コードの展開） Win：Ctrl+E mac：Command+E Zen-Codingの主な機能のひとつです。
もっとも危ないプログラミングエラー25、+16 | エンタープライズ | マイコミジャーナル
CWE is a Software Assurance strategic initiative sponsored by the National Cyber Security Division of the U.S. Department of Homeland Security. CWE - 2010 CWE/SANS Top 25 Most Dangerous Programming Errorsにおいて脆弱性の原因となる危険なプログラミングエラー25が発表された。開発者にセキュリティ問題の原因となるプログラミングに関する注意を促し、実際にソフトウェアが動作する前の段階で問題を発見し対処できるようにすることを目指したもの。2009年に発表されたリストの更新版にあたり、内容の多くが更新されている。2009年版を使っていた場合には、今回発表された2010年版を再度検討する価値がある。
Ustream/Twitter時代の勉強会・講演会の注意点 - Vox
先日「ネットビジネスイノベーション政策フォーラム」というエントリーのおまけで書いていた「Ustream/Twitter時代の勉強会・講演会の注意点」ですが、膨大になってきたので別エントリーにしました :)
ハイパーテキストリンクのスタイル大全
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク（リンク）はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです
ウェブデザインでこれは気をつけたいの35のポイント
ウェブサイトやブログの作成・運営で、避けておきたい35個のミスをnetjellyから紹介します。 List of Web Design Mistakes You Should Avoid 下記は、各リストを意訳したものです。 ※訳者注： 一部過激なものは表現を少し和らげています。 はじめに ウェブサイトやブログを開発・作成する際に、避けた方がよいミスをリストアップしました。 1. 作るだけでは終わりではない ウェブサイトは開発・作成だけでは終わりではなく、公開・運営する必要があります。そして、オンラインやオフラインでウェブサイトの告知に手間や時間をかけることはいっそう必要になります。もし、あなた自身があなたのサイトについて時間をかけないなら、他の誰もそれはしないでしょう。 2. 広告をコンテンツに混ぜない 広告をコンテンツに混ぜると、短期的にはクリック数を増やすかもしれません。しかし、ユー
PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
ウェブデザインにアクセントを加える画像加工のテクニック7選
レイアウトもばっちり、配色構成もＯＫ、いざガシガシとデザインを組んで行ってはみたものの、何か物足りない。。。 そんなまとまりすぎたデザインに、ピリッと印象的なアクセントを加える7つのテクニックをお届けしちゃいます！ どれもカンタン、ひと手間ちょいと加えるだけでデザインが引き締まるコト間違いなし!? そんなこんなで今回のエントリーは、いまいちインパクトの足りないウェブデザインにアクセントを与えるテクニックをご紹介してまうでー。 ウェブデザインにアクセントを加える画像加工のテクニック 1.1pxのドロップシャドウ これは文字と背景色の兼ね合いが少し悪い（視認性があまり良くない）場合に文字を少し目立たせたり、単純に文字にパキッとした印象を付加したりしたい場合に使えるテクニックです。 ポイントは「はっきりとした色差で、くっきりと1px」って感じで、Photoshopならドロップシャドウで「距離1、
ॐ VCM-100を使って始めるDJ入門 | 拝むように弾いてくれ
と、いうのを希望されましたので、最近VCM-100を買ったばかりのデジタルDJ初心者である僕がやったことを初心者の方対象にまとめてみようかと思います。押忍。 ちなみに、僕が使っているのはMacBookですので、それを前提に話を進めていくことと、今までのエントリーで書いてることも結構あることをご了承下さいね。 まず、すごく乱暴にDJってなにやんの？の説明ですが、2つの曲(A、B)を順番にかけるときに、既に流れているAの曲のテンポにBの曲のテンポとかをうまく同じにして、まるで1曲につながっているかのように流してスムーズにつなげたり、もしくは、良いタイミングでAからBにパッ！と切り替えて楽しい感じで曲を聴き続けられるように流すこと、という理解でいいとおもいます。乱暴でごめんなさいね。話し出したら奥が深いので、ここでは深追いはしません。どこかでお会いしたときにお話しましょう。 さて、ここからは機材
IPA セキュア・プログラミング講座 「Webアプリケーション編」に「Web関連技術」を追加
本ページの情報は、2016年10月時点のものです。2023年10月に再構成をいたしました。 なお、内容に変更はありません。 2016年10月版 2002年2月に「Webプログラマコース」と「製品プログラマコース」、2007年の6月に「Webアプリケーション編」、9月に「C/C++編」と分けて公開してきた講座のうち、原則を中心として共通的なものをまとめて2016年10月に再編しました。 なお、資料内の参照先はすべてサイトリニューアル前のURLであるため、リダイレクトを設定しています。 セキュア・プログラミング講座(2016年10月版／2017年6月一部修正)(PDF:2.3 MB) 2007年版 「ソースコード検査技術の脆弱性検出能力向上のための研究」（注釈1）を実施した一環として取りまとめた内容を、2002年から公開していたセキュア・プログラミング講座（旧版）の改訂版（2007年版）として
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
モダンブラウザでも使えるCSSハック18選（1/3） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/12/16 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） モダンブラウザとMac OS XのIE 5でも使えるCSSハック 前回の「IE 6とIE 7のためのCSSハック16選」では、IE 6とIE 7のためのCSSハックのテクニックを紹介しましたが、今回は、モダンブラウザでも使えるCSSハックのテクニックを下記に分けて紹介します。 IE 6/7/8をハック（IE 6とIE 7、IE 8に効く、もしくはIE 6とIE 7とIE 8に効かないハック） IE 6とIE 7、IE 8に効くハック コンディショナルコメント ユーザーエージェントハック IE 6と
基本的だけど大切なタイポグラフィのシンプルな14のルール
ウェブデザインをはじめ、印刷にも役立つ基本的だけど大切なタイポグラフィのルールをfred designから紹介します。 Simple rules for good typography もしくは、Typophile 下記は、その意訳です。 はじめに ここにウェブや印刷のためのタイポグラフィに役立つ基本的なルールがあります。もちろん、このルールは基本であり、そしてルールは破られることを意図されているものです。 しかしながら、もしあなたが一般的にきちんとしていて美しくみえる何かを制作するためには良いルールです。 1. たくさんのフォントを使わない ウェブサイトなどのドキュメントに一貫性は非常に重要な要素です。一貫性は統一と一つのアイデンティティーをもたらします。 この一貫性を守るためには、一つのドキュメントに対して3つ以上の異なるフォントを使用しないことです。 2. ヒエラルキー ページ内の階
知らなかったらNGなWEBアプリケーション脆弱性一覧 : mwSoft blog
先日、AmebaなうがCSRFという非常にポピュラーな脆弱性を披露したかと思ったら、ここ数日はセブンネットショッピングでXSSの脆弱性と、ID推測による他ユーザの個人情報閲覧の問題が発生しているという噂が流れています。 ユーザの情報を預かっておきながら、基本的なセキュリティの対策もできていないというのは、銀行に例えるなら、お金を預けようとした時に「お金は預かります。ちゃんと保管します。でも警備はあまりしないので盗まれたらスイマセン」と言われるようなものだと思う。 警備に穴があったというのではなく、まともに警備してませんでした、というのはさすがにありえないことです。 そこで、野良WEBプログラマである私が知っている脆弱性を列挙してみた。 私はプログラマであってセキュリティの専門家ではないです。しかも今年の春辺りからずっと外向けのWEBプログラムは組んでません。 その人間が知っているものを並べ
[N] 「Google Analytics完全解説」著者から聞いた知らないと損しそうな5つのTips！
献本はしばしば頂くのですが、献本ついでに著者じきじきに浦和にやってきて「ネタフルでまだ使っていない機能を解説しますよ」とおっしゃるので、思わずお願いしてしまいました。 ということで「Google Analytics完全解説」という本日発売の解説本の著者のお一人から直々に「これは知っておくとお得だなぁ」というTipsを5つお聞きしました！ そんな使い方があるのか！ と驚いたので、ブログにまとめておきたいと思います。 ▼Google Analytics 完全解説 (大型本) 「デフォルト設定のまま使っていませんか？」というのがその主旨だったのですが「はい、デフォルトのままです」というのが、ぼくのGoogle Analyticsの使い方の現状でした。 そこで「より有効に使う五つのTips」というのを教えてもらうことになりました。 新しい機能を使う前に、古いトラッキングコードをブログに埋め込んであ
「2009年のWeb制作情報のまとめ」のまとめ - かちびと.net
復習用。探すのが面倒なので備忘録的 に2009年のまとめをまとめます。時間 がある時に見て自分の必要なものを 確認しようと思います。同じお思いの 方とシェアしようと思ってエントリー。 Web制作関連のみになっています。 かなり時間がかかりそうなので正月辺りにもチェックします。こういうのは一気にやりたい。 100 Best Photoshop Tutorials From 2009 Photoshopチュートリアルベスト100。膨大な量です。 100 Best Photoshop Tutorials From 2009 The Best Free Fonts of 2009 2009年のベストフリーフォント12個。50 Best Free Fonts From 2009も同サイトで発表されました。 The Best Free Fonts of 2009 The Best jQuery Plu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photoshop a Paper Texture from Scratch then Create a Grungy Web Design with it! | Envato Tuts+
http://www.coneco.net/hand/camera/lens.html
IDEA * IDEA
