開発裏話1、開発裏話2、と紆余曲折を経てリリースした Twister Alternative ですが、今回はgihyo.jp の連載記事にも関連し、デザイン面からみたサイトの高速化のお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。 デザイン面でサイトの高速化というと不思議に思われる方もいらっしゃるのではないでしょうか。 Google App Engine のリクエスト制限 Twister では当初、Google App Engine で動いていました。Google App Engine ではリクエスト数に制限があるので、1回のページ読み込み時に発生するリクエストは最小限にしなければなりません。サイトの至るところで使われている一つ一つの画像はリクエストを増やしてしまう原因となります。 そこで

punypng is a PNG optimization image compression tool that makes PNG, GIF and JPEG images smaller, developed by Gracepoint Fellowship Church* Flash required. Supported Types: JPG, GIF and PNG (Max 500KB each) What is punypng? punypng is a free optimization service that can dramatically reduce the file size of an image by converting it into a highly-compressed, lossless PNG image. That translates to

つかいかた How to Use 1.本文を入力して Go! 2.PDFを印刷！ 3.折る！ 4.読む！ 使用感 Sample image 20pt 14pt 12pt 10pt 8pt 5pt 皆様の声 8p Voice 8p Orihon Makerに関するツイート 更新履歴 History 2013/05/17 横書き出力機能 2013/02/04 ノンブル(ページ数)ON/OFF機能 2012/10/18 表紙以外の画像ページ作成機能・明朝フォント指定可に 2009/11/27 いろもじ機能β(安定白黒版はこちら) 2009/10/28 空行対応・折り線ON/OFF機能 2009/10/27 表紙機能 2009/10/26 β版Start 次回予告 Trailer PDF生成履歴一覧 お問い合わせ Contact Produced by BWN project "8P". News

CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に &nbsp; を設定。&nbsp; がなかったり、要素の後方に&nbsp; があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

■「受ける側に何が必要かを考えてほしい」 「とにかくうれしいです」。金沢市の佐藤洋子さん（４５）＝仮名＝は、年内の母子加算復活が決まり、安心した表情を見せた。 毎月、生活保護費など約二十四万円で暮らす。育ち盛りの小中学生の娘三人との四人家族で、五万円弱の食費は増える一方だ。支給日前の夕食は、具がモヤシだけのお好み焼きやふりかけご飯でしのぐこともある。「ごめん、もうお金ないから」「いいよ」。素直に納得してくれる娘たちには感謝している。 節約できるのは洋服代ぐらい。今年四月に中学校に入学した次女（１２）には、体操服を一枚しか買ってやれなかった。「これでもう一枚買えます」 母子加算の復活に伴い、代替措置の「ひとり親世帯就労促進費」は廃止が決まった。所得に応じて月額最大一万円を支給し、就労による自立を支援する制度だ。九月に仕事が始まり、十一月分から受け取る予定だった佐藤さんは、「一万円がなくなるの

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 関連 便利な画像ください 誰か絵の色塗りおしえてくれ 絵は線が下手でも塗りでごまかせると聞いたから

PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_ShortURL」 2009年10月26日- PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_ShortURL」が本家PEARにあがってます。 bitly, tr.im以外にも、is.gd, short.ie、digg、tinyurl の短縮サービスが現状では使えて、今後もプラグイン形式で簡単に増やすことができるクラス構造になっています。 alpha版という位置づけなので注意が必要ですが、簡単にURLの短縮ができるのでとても便利です。 サービスで、URLを短縮したい、そしてその短縮URLに好きなサービスを使いたいので選択できるようにしたい、というニーズに応じる際に非常に便利なライブラリとなっています。 では、それぞれのサンプルコード

PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ

Windows7風ナビゲーション作成チュートリアルが公開されています。 次のような綺麗なWindows7風ロゴとボタンでナビゲーションの作成の流れがわかります 以下のエントリを参照してください。 Photoshop Tutorials - HV-Designs.co.uk 関連エントリ ボタン作成のPhotoshopチュートリアル集 つい押したくなるようなボタン作成Photoshopチュートリアル集

完成したサイトにSEO対策を施すよりも、始めからSEOを考えて制作を行った方が効率も良く、バランスの取れたサイトが出来上がります。 基本となるデザインレイアウト 上図はネットで配布されているテンプレートなどで良く見かけるデザインですが、SEOを意識した簡易的なレイアウトとなるとどうしてもこんな感じになってしまいます。あくまで基本となるレイアウトですので、作るサイトにあわせ位置の調整や、必要な項目の追加を行ってください。 ヘッダー ページの見出しとなるh1と、ページの概要を説明するためのテキストを配置します。h1とテキストは全ページ異なるユニークなものを記述します。 ヘッダーの左側にはロゴを配置し必ずリンクにします。ロゴは、ソースの上部に位置し、全ページ共通のトップページへのリンクとなる為、CSSの画像置換えを使用しアンカーテキストにはメインキーワードを含ませた方が良いでしょう。 イメージリ

商用サイトでも無料で利用できる高解像度の葉っぱのPhotoshopのブラシをSix Revisionsから紹介します。 Leafd: 10 Free High-Res Photoshop Leaf Brushes ブラシは個人・商用とも無料で利用可とのことで、ライセンスはCC 3.0です。 葉っぱは全部で10種類あり、2000px前後の高解像度なものとなっています。

Black and white anywidth centered menu demo ドロップダウン型ナビゲーションはラベルのテキスト量に関わらず中央に配置され、カラーはスタイルシートで指定されているので簡単に変更が可能なようになっています。 また、ナビゲーションの随所には効果的に1ピクセルのラインが配置されています。

二枚の画像を少しずつフェードでブレンドして切り替える画像ギャラリーのスクリプトをblog.olicio.usから紹介します。 Floom demo デモはまるでフラッシュのように、進捗のバーが表示され、画像を切り替えると共にテキストも変更し、次々と画像を表示します。 オプションでは、アニメーションのスピード、ブレンドの方向、キャプションの有無などが変更できます。 FloomはMooToolsのプラグインのため、実装にはmootoolsが必要です。

.htaccessファイルは301リダイレクトで使用しましたが、リダイレクト以外にもアクセス規制や404ページの指定で活躍してくれます。 .htaccessはご利用のサーバによって使用できない可能性がありますので、詳しくはホスティング会社にご確認下さい。 URL正規化の為のリダイレクト 検索エンジンは同じURLでもwwwの有無、index.htmlの有無で異なるURLと認識する場合がありますので、統一する為に.htaccessを使用します。 ※個人的にはURLの正規化によるSEO効果はさほど感じていません。内部リンクが統一されていれば特に正規化しなくても良いと思っています。 www有り無しの統一 www有りで統一する場合 Options +FollowSymLinks RewriteEngine on RewriteCond %{HTTP_HOST} ^example.com Rewrit

画像を読み込んでさまざまな圧縮方式や色数でPNG形式変換を試行し、ファイルサイズが最も小さくなる設定で保存できる画像変換ソフト「AzConvPNG」v1.07が、10日に公開された。Windows 98/Me/2000/XPに対応するフリーソフトで、現在作者のホームページからダウンロードできる。 PNG形式の画像圧縮規格には、内部的なデータの並びを最適化し圧縮効率を上げる“フィルター”が5種類用意されている。PNG画像を扱うプログラムは任意のフィルターを使用してPNG変換を行う仕組み。 本ソフトは、読み込んだBMP/JPEG/GIF形式の画像に各フィルターを適用してPNG圧縮を複数回試行し、ファイルサイズが最も小さくなるフィルターを適用して保存するのが特長。また、PNG形式の画像を読み込んで同様の再変換をテストできるので、もとの画像とファイルサイズを比較し、小さくなる場合のみ再保存すること

PNGを取り扱うソフトウェアは、LZW特許問題があった為に大変豊富になったのですが、 ペイント系のソフトウェアでは画像をフルカラー(24Bit以上)でPNG保存する場合が多いです。 しかし、実際にそのままフルカラーPNGをウェブ上で使うと、ファイルサイズがGIFを使うよりも返って大きくなる場合が多々有ります。 フルカラーPNGは、高画質と言う事実も有りますが 一部のナローバンド(低速モデム)ユーザーや、GIFオンリーユーザーにとっては、 苦痛になる場合が有るようですから PNGを必要に応じてダウンサイジングしてコンパクトにするのも 有る意味、不快感の少ないサイトデザインと言えるのでは ?と思います。 このページでは、ファイルサイズや、減色、PNG独自機能の特徴を強化する 又は、こだわれる為の便利なソフトウェア紹介を目指して行きます。 簡単操作で、良い感じのPNG対応フリーソフトや、安価なシ

ブックマークレットで手軽にスプライト画像/CSSコード生成 Steve Souders氏は14日(米国時間)、自身のブログ上でSpriteMeを公開したとアナウンスした。SpriteMeはCSS Spritesを使うにあたりcoolRunningsを使用して必要なスプライト画像を生成、および表示のためのCSSコードを出力してくれるWebサイト。同Webサイトにはブックマークレットが用意されており、ユーザはブックマークレットを任意のWebサイトで実行するだけで簡単にスプライト画像と必要なCSSコードを入手できる。 SpriteMeの動作の流れはおもに次のとおり(Demoより抜粋)。 CSSより背景画像(background-image)が指定されている箇所を抽出 抽出した画像の幅や高さをもとに、グルーピングをおこなう グループごとにスプライト画像を生成 生成したスプライト画像を現在表示してい

What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can

VT/Intel Virtualization Technology 対応CPUリスト VT（インテル バーチャライゼーション・テクノロジー）は、Windows 7のXP互換モードの動作に必要です。VT（インテル バーチャライゼーション・テクノロジー）の機能を使うには、CPU,BIOSの両方がVTに対応している必要があります。 2009年10月23日時点のリストとなります。正確な情報は、下記サイトでご確認ください。 http://ark.intel.com/VTList.aspx

HiFi RegExp Tool - Write and Test Regular Expressions in Real-Time その場で動作させて確認する正規表現入門ツール「HiFi RegExp Tool」 ボックスの中に、正規表現を入れるだけで、リアルタイムにページの内容が正規表現に沿ってマッチング＆ハイライト表示され、どの正規表現がどういう意味を表すのかというのが一目で超クイックに分かってしまう便利ツールです。 ボックスに入れられた正規表現に沿って次のように、ハイライト表示されて、カラフルに色分けしてくれます。マッチしたテキストの一覧もページ下部に色付きで分かりやすく表示してくれます。 ページ内のテキストはクリックすることで自由に書き換えることも可能です。 サイドバーには正規表現のチートシートも掲載されています。 これはかなり便利。正規表現入門の高速道路ですね。

特集「オープンソース×10年」 予算ゼロからのIT環境整備2014/01/30 特別寄稿：センチメンタル・ジャーニー ~OSSはまだ16だから~2014/01/30 EC-CUBE – オープンソース・Eコマースの雄の進化を見る！2014/01/30 Zabbix Japanに聞いたオープンソース×ビジネスを成功させるための3つの基本2014/01/30 MOONGIFTの運営で大事にしている3つのこと2014/01/30 2007〜8年の大きな変動まとめ！2014/01/30 なぜプレミアム？そこから得られた経験教えます2014/01/30 2006〜09年、各年の人気オープンソース・ソフトウェアベスト52014/01/30 狙われやすいサイトはどんなサイト？オープンソース×セキュリティについてペンタセキュリティシステムズに聞く2014/01/30 aegifが考える企業でOSSを開発す

なかなか面白いサービスを見つけました。CREATE YOUR COMICというサイトで、マンガが作れるジェネレータです。 まずマンガのフレームを選択して、こんな感じの画面になります。 オブジェクトをドラッグしていきます。背景画像やキャラクター、文字を重ねてマンガを作っていきます！ データはPDFでダウンロード可能で、プリントアウトも可能です。リンクを貼付けられる機能がついてるとさらに面白いんですけどね。 一度見てみてください。 CREATE YOUR COMIC 早起きできたからいろいろ進めるぞ。

最近ソースコードを書く機会が時々あるので、HTMLとCSSを整備してみました。 実体参照への変換は、今までDreamweaverのデザインビューにペーストして、コードビューで変換されたものを使っていたんだけど、<br />が入っちゃうんですよね。 なのでakiyanの以下のページを使うことにしました。自分で作ろうかな、とも思ったけど、これが便利だからいいかな。 HTML実体参照変換 ソースは以下のようにしました。 HTML <span class="small">ソースコードのキャプション</span> <div class="codex"><pre><code>ソースコードが入ります</code></pre></div> pre { margin:0; padding:0; overflow:auto; white-space:pre-wrap; word-wrap:break-word

net tuts+で、Mootoolsでレトロなパタパタ時計を作るチュートリアルが紹介されています。 1秒ごとに、パタッパタッとめくれる時計ですね。 上の部分と下の部分でHTMLを分けていて、CSSでスタイリング、Mootoolsで動きをつけているようです。時計もjavascriptでこういう動きが表現できるんですね。 デモは以下から。 Demo ソースもダウンロードできるので、一度見てみてください。 Learn how to Create a Retro Animated Flip-Down Clock 今日はいろいろあった。新しい感情が芽生えた。力強く生きていかないとな。

フォントhack.jpは日本語フォントの総合案内サイトです フォントhack.jpは、日本語フォントの魅力を皆さまお届けするフリーフォント総合案内サイトです。自由にインストールして利用できる、フリーフォントを中心に紹介しております。またフォントなニュースやフォントに関するブログなど書体に特化したコンテンツを提供しています。 フォントとは？ フォントはある様式に従って文字をデザインしてそれをパソコンなどで表示したり、印刷できるようにしたものです。パソコン内では「0」と「1」の組み合わせ(2進法)でデータ化されていますが、液晶画面などに表示するときやプリンターで印刷するときに文字となって表現されます。書体とも呼ばれていますが、これは昔あった写植のなごりで、ゴシック体(カクカクした感じの書体)とかナール(丸文字の書体)などと呼ばれていました。写植とは、写真植字といい、文字が沢山書かれた文字盤の上