クソエンジニアが最速でそれなりのWebデザインをできるようになる方法 - UIU
趣味などでWebサービスを作るときにもっとも悩ましいことのひとつがデザインだと思う。外観は重要な要素だとは理解しているし興味も一応あるけれど、実践に乏しいからどうしていいのかわからない。かといって、タダで頼めるような都合のいいデザイナーはいない。結局めんどうになって、Twitter Bootstrapで体裁だけでっち上げた妙にオタク臭いデザインになってしまう。僕もかつてはデザインを気にも留めないクソエンジニアだったけど、必要に迫られて勉強したらそれなりに手を動かせるようになったのでその方法を紹介する。僕が今年入社したスタートアップにはデザイナーがおらず、新機能を作るときなど仕方なくデザインをこなす必要があった。結果的に、仕方ないなりにPhotoshopを使ってプロトタイプを作りHTML/CSSコーディングするくらいはできるようになった。ここに書くのは仕方なくそれなりのWebデザインをする方
自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
【保存版】Webフォントの使い方と無料のおすすめサイト一覧（日本語・欧文） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先週、新婚旅行という人生最大級の贅沢を楽しんできたため、日本に帰ってきて放心状態になっている野田です。 もう少し逃げていたかった……現実から……。 という話は置いておいて。最近LIGのブログではフォントネタが頻繁に登場するようになってきたので、それに僕も便乗しようと思います。 Webに関わっている人でも、「フォントが大事なのはわかるけどWebフォントは設定していない……」 という人も多いんじゃないですか？ 今日はWebフォントの使い方とおすすめの無料で使えるWebフォントサービスをご紹介します。 「わからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！
【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
ブログのメタ情報で3倍得する設定まとめ。拡散性UP！高速化！最適化！ – @attrip
2013年ブログのメタ情報で3倍得する設定まとめ。 2013年もうそろそろ終わりますね。 そこで、attripが厳選する。今年新たに追加したメタ情報をお伝えします。 この設定やっておくとこんなに事であなたのサイトがシェアされやすくなったり速くなったりちょっぴりリッチに見せることができるよ。 1.Twitterカードの設定で画像を大きく表示しよう！！ Twitterカードは、ツイートされた際に表示されるメタ情報です。 何も設定していないと テキストとリンクだけが表示されますが 僕のおすすめは、 Summary Card with Large Image こちらメタ情報で記述することによりつぶやきの表示がこんな風に大きく表示されます。 つぶやきをクリックした際に大きく表示されたらついつい見たくなっちゃいますよね？ Summary Card with Large Image | Twitter
色の組み合わせチェック - 読みやすい前景色と背景色
誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名（CSS2の色名＋SVGの色名、計147色）およびrgb()の表現が使えます（初期値は、読みにくい例が入っています）。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行
すぐれた PHP ライブラリとリソース
すぐれた PHP ライブラリとリソース Awesome PHP の記事をフォークして翻訳したものです (2013年4月25日)。おどろくほどすごい PHP ライブラリ、リソースやちょっとした情報のリストです。 【訳者コメント】 PHP 入門者のかたにはクィックリファレンスとして PHP: The Right Way 、セキュリティに関しては2011年3月に出版された 体系的に学ぶ 安全なWebアプリケーションの作り方 をおすすめします。 Composer Composer/Packagist - パッケージと依存マネージャー Composer Installers - マルチフレームワーク Composer ライブラリインストーラー。 Composer 関連 Satis - スタティック Composer リポジトリジェネレーター。 Composition - 実行時における Compos
次世代規格 HTTP2.0 のファーストドラフト公開 - Block Rockin’ Codes
intro 少し経って、去る11月28日に、HTTP プロトコルの次期規格となる HTTP2.0 のドラフト、 draft-ietf-httpbis-http2-00 が、IETF の httpbis ワーキンググループで公開されました。 このドラフトは Google から提案された仕様である SPDY が採用されています。 HTTP1.1 からのアップデート HTTP1.1 の RFC が提出されたのは 1999 年で、 13 年経った今年 2012年8月 に、 HTTP の仕様を議論する httpbis というワーキンググループが、 HTTP1.1 のアップデート版になる仕様、 HTTP2.0 の策定を開始しました。 これは、 HTTP1.1 の仕様策定がある程度落ち着いてきたこと、次期仕様を考える良い時期であること、 そしてなによりも、 Web の使われ方が大きく変わり、 求められて
IRCbot Console
IRCbot Consoleは、ブラウザから操作できる多機能なIRCボットです。 下記のような機能を持っています。 各種設定を全てブラウザ上から操作可能 RSSの新着エントリをIRCにメッセージとして送信 一定周期や決まった時間にIRCにメッセージを送信 IRC上の発言に対してメッセージを返信 HTTPリクエストを受け付けて、IRCにメッセージを送信(HIP (HTTP IRC Proxy)と同等機能) ログを収集し、ブラウザ上で参照可能 メッセージ送信のスクリプトとしてJavaScript(Rhino)を使えるようにしており、他のWEBサービスを組み合わせることによって、さまざまな使い方ができます。 インストールも簡単で、Javaさえ入っていれば、ダウンロードしてきたファイルを解凍し、実行するだけになります。 なお、Tomcatなどのサーブレットコンテナを既に使っている場合には、ダウンロ
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
grepするときに.svnファイルを除外する - WEB開発初心者の成長記録
■ポイント ・grepのvオプションを使う ・パイプを使う以下、使用例。 ■「.svn」ファイル以外から「sub auto」を含むファイルとその行数を表示する [abyss@test-vmw apps]$ grep -nr "sub auto" ./* | grep -v ".svn" ./Web/lib/Hp/Web/Controller.pm:6:sub auto { ./WebAdmin/lib/Hp/WebAdmin/Controller.pm:7:sub auto { ./WebMobile/lib/Hp/WebMobile/Controller.pm:6:sub auto { ./WebOn/lib/Hp/WebOn/Controller.pm:6:sub auto { ./WebOnMobile/lib/Hp/WebOnMobile/Controller.pm:6:sub a
Java Swingでブラウザを表示する。 | 趣味の記録保存館
今のJavaってすごいから、簡単にできるんじゃね？ と思っていたが、大間違いだった。 色々やっている人はいるようなのだが、私の状況で使えるものがほとんどない。 というわけで、同じような状況の人のため＆備忘録。 ------------------------------- まず、JDIC。 import org.jdesktop.jdic.browser.WebBrowser; こいつを使う。 表示自体はいたって簡単。 WebBrowser browser; browser = new WebBrowser(true); add(browser.asComponent()); 基本的にはこれだけだ。（レイアウトなどは省略してある） ●長所 ・URLを指定して表示、ソースを指定して表示、JavaScriptを実行可能。 ●短所 ・ネイティブのブラウザを使用する。IEがデフォルトになっている場
SwingのWebブラウザコンポーネントMozSwing - kaisehのブログ
JavaOneのSwing for the Massesというセッション資料の中で、MozSwingというWebブラウザコンポーネントが紹介されていました。 MozSwing download | SourceForge.net MozSwingはXULRunnerのラッパーで、Windows, MacOS, Linux, Solaris用のバイナリが同梱されています。 資料によると、SwingでWebブラウザを使いたい場合、現状としては JWebPaneはいつリリースされるか不明 SWT_AWTでネイティブブラウザを埋め込む方法もあるが、EDTが重複したりDOM操作ができなかったりと問題が多い ということで、MozSwingが有力だそうです。 MozSwingを実際に試してみました。 public class WebBrowser extends JFrame { public stat
JavaでWebブラウザをドライブ! WebDriverを使ってみよう
WebDriverとは WebDriverはWebブラウザを操作するためのJavaライブラリだ。WebアプリケーションのUIテストツールとして使用することが想定されており、JavaScriptを多用しリッチなUIを提供するアプリケーションのテストに効果を発揮する。 サポートするブラウザはFirefox、Safari(MacOS Xのみ)、Internet Explorer(Windowsのみ)となっている。また、実際のブラウザは使わずHtmlUnitを使用することも可能だ。この場合、Rhino(Javaで実装されたJavaScriptエンジン)を使用してブラウザ上で動作するJavaScriptの動作もエミュレートすることもできる。また、試験的にiPhone用のドライバの実装も進められているようだ。 同種のテストツールとしてはすでにSeleniumなどがあり、多くのユーザに利用されている。し
ステップ2 ［セキュリティ対策］ セッションIDを暗号化，URL埋め込みは危険
セッション・ハイジャック，セッション・フィクゼーション，クロスサイト・リクエスト・フォージェリの三つがある。せっかく認証を受けたセッションであっても，他人に悪用されてしまうことがある。 セッション・ハイジャックは，セッション管理におけるセキュリティ上の最大の脅威だ（図2-1の1）。クラッカが盗聴や推測などでユーザーのセッションIDを入手し，そのセッションIDを使ってWebサイトにアクセスする。いわゆる「成りすまし」である。クラッカからのWebアクセスを受け付けたWebサイトは，セッションIDから正規のユーザーだと誤認識してしまうわけだ。 2番目のセッション・フィクゼーションは，セッション・ハイジャックと同じ成りすましに使われるものだが，攻撃方法が複雑だ（同2）。 セッション・フィクゼーションを試みるクラッカは，WebサイトにアクセスしてセッションIDを取得する。ただしクラッカは，ログインま
固定IPアドレスのページ (固定IP 提供ISP 一覧)
flatray.com 更新日時: 2022-01-16 固定IPアドレスのページ 跡地 「固定IPアドレスのページ (固定IP 提供ISP 一覧)」は提供を終了しました。 2000年にフレッツISDNで自宅サーバを運用するため、固定IPアドレスを提供するISPの情報を収集し当該ページを作成しましたが、当時と現在では状況が変わっており役目は終了したと考えました。 多くのレンタルサーバ・VPS・クラウドサービス等が提供されており、無償サービスも色々利用可能。 自由にサーバを構築したいなら、月額1000円もあればVPSサーバを利用できる。(PC費用 + 電気料金 + メンテナンス・故障時対応などを考慮すると VPSサーバの方が安い) IPv6サービスを提供するISPが増え、またそのIPv6アドレスは事実上変わらないので、IPv6を利用して外部からのアクセスが可能。(IPv4の固定IPアドレスサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
真面目なアニメーション (html5j 2013, Web Animations)
Engadget | Technology News & Reviews
ホームページの制作・活用のアドバイス 大阪 | フォルトゥナ
HTML5.JP - 次世代HTML標準 HTML5情報サイト