レスポンシブWEBデザインでフィットネスクラブのサイトを作ってみる｜ cocope [Web制作ヒント集 ココペ]
現在WordPressで実案件を想定としたWordPress構築術を紹介しています。レスポンシブWEBデザインで作っているのですがあまり詳しく解説していなかったので今回改めてまとめていきたいと思います。 今回目標としているサイトは小規模のフィットネスクラブです。サンプルサイトをご用意していますのでスマホやPCで確認してみてください。 今回のサンプル： Sample Fitness Club まずはサイトのデザインを考える 最初はどのようにサイトを組み立ててて行くか考えていきます。 完成形のデザインと変わっている場合もありますが、まずはいつも通りにPhotoshopなどでデザインをしていきます。画像にはありませんがスマートフォン用のデザインやタブレット用のデザインも用意しましょう。 極端にサイトの表示、デザインが変わってしまうような場合はレスポンシブWEBデザインにする意味が無いので注意しな
![レスポンシブWEBデザインでフィットネスクラブのサイトを作ってみる｜ cocope [Web制作ヒント集 ココペ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/188075167c1667167cf9ce7196e2cbb5fc4c10f1/height=288;version=1;width=512/http%3A%2F%2Freference.cocole.jp%2Fwp-content%2Fuploads%2F2014%2F12%2Fwp-fitness011.jpg)
1月に見つけたWEBサービス/アプリ/ツール作ってみた系の記事まとめ - undefined
2015年1月に見つけたものをまとめておきます。 Webサービス作ったので作業の流れを紹介してみる Webサービス作ったので作業の流れを紹介してみる - 今日学んだこと つくったもの ScheduleTweet どんなもの? TL上に日付っぽいツイートが流れたらお知らせするサービス 使用技術 サーバ heroku 言語 Python フレームワーク Django その他 ほぼまっさらのmacからサービス公開までの足取りを丁寧に紹介されています。DjangoでのOAuth認証も実装しています。こういうのを読むとwordpress使ってる場合じゃねえって思うようになります。 DjangoでWebサービスつくってみた DjangoでWebサービスつくってみた - Programming Log つくったもの いつかリスト - 人生の目標を管理・共有サービス どんなもの? あなたの今後の人生の目標
第22回 JavaScriptによるUIの実装：ドラッグ | gihyo.jp
こんにちは。前回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。 要素のドラッグ ウェブアプリでよく使われるインタフェースのひとつ、ドラッグを実装してみます。ドラッグを使用するケースは幾つかありますが、今回は投稿用フォームをドラッグで移動できるようにするという使い方を想定してみます。 投稿フォームで入力する際、そのページのコンテンツを見ながら入力したいということはよくあります。フォームを好きな位置に移動できればそれが実現できます。 ドラッグの基本HTML <div class="js-drag" id="js-drag-1"> <form class="js-drag-form" onsubmit="return false;"> <textarea></textarea> <input class="submit" type="submit" value="送信"
JavaScript で DOM 要素の絶対座標を取得する方法 - tmlife
備忘録. スペニット的に使ってもらえれば幸いです. DOM 要素の絶値座標を取得する element.scrollTop とかだと親からの相対値になっちゃいます. getBoundingClientRect() を使えば絶対座標を取得できます. window.onload = function() { var element = document.getElementById('hoge'); // hoge というIDがついたやつを取得する var rect = element.getBoundingClientRect(); console.log(rect.left); // x座標(絶対座標) console.log(rect.top); // y座標(絶対座標) console.log(rect.width); // 幅 console.log(rect.height);
第12回 ［最終回］Meteorが指し示すWebアプリ開発の未来 | gihyo.jp
さて、これまで10回以上に渡って続けさせていただいたこの「Meteor完全解説」ですが、今回が最終回となります。「完全解説」を銘打っておきながら、説明できていない機能を残していることが大変心苦しいのですが、どうかご容赦ください。 ただ前回までの連載により、Meteorのエッセンスとも言える部分についてはほとんど説明を終えたといっても良いかと思います。これまでの記事を振り返ってみても、やはりMeteorは非常に先進的なフレームワークです。Webアプリ開発にかつてないような生産性をもたらすだけでなく、「リアルタイムWeb」の時代をぐっと手元に引き寄せるような手応えを感じます。 今回は最終回ということで、Meteorのさまざまな機能を振り返りつつ、Meteorという先進的なフレームワークが指し示す、Webアプリケーションの未来を探ってみたいと思います。 Nodeを利用した「フルスタックフレー
第27回 見過ごされているWebアプリケーションのバリデーションの欠陥 | gihyo.jp
今回解説するWebアプリケーションのバリデーションの欠陥はPHPに限った問題ではありません。多くのプラットフォームのWebアプリケーションで見過ごされているバリデーション仕様の欠陥です。それは文字エンコーディングのチェックです。 文字エンコーディングバリデーションの必要性 筆者の知る限りでは、2004年に相次いで今まで知られていなかったアタックベクタ（攻撃経路）が見つかりました。2004年に多く見つかった新しいアタックベクタとは不正な文字エンコーディングを利用した攻撃です。不正な文字列を利用したJavaScriptインジェクションやSQLインジェクションの攻撃手法が公開されました。 文字エンコーディングを利用した攻撃自体は当時でも新しい攻撃手法ではありませんでした。文字エンコーディングを利用した攻撃は、少なくとも2000年から広く知られていた攻撃手法でした。ブラウザが文字エンコーディングを
第6回 WebAPI、認証APIのセキュリティ | gihyo.jp
WebAPIの公開 APIとは、何らかの機能を提供するプログラムのことです。WebAPIとは、Webで提供されたAPIということです。たとえば、地図データを提供するAPIや商品の検索結果を提供するAPIが有名です。なるべく多くの人にアクセスしてほしい情報を持っている企業は、WebAPIとして情報を提供することが多くなりました。WebAPIという便利なインターフェースを用意することで多くのユーザにアクセスしてもらい、広告ビジネス等につなげていくのが狙いです。 またWebAPIは、多くの形式に対応していたほうが、多くのユーザに利用してもらうことができるため、なるべく多くの出力形式に対応しようとする傾向があります。以前はSOAPという形式が多く使われていましたが、実装方法が煩雑であったため、現在ではREST、JSON、JSONPのように実装がシンプルな形式のものが多く使われています。 WebAP
第8回 クロスサイトスクリプティング対策の落とし穴 | gihyo.jp
今回は熟練したWebアプリ開発者なら常識のクロスサイトスクリプティング対策の落とし穴を紹介します。 JavaScriptを排除しているつもりで排除に失敗？！ 最近はSanitize（サニタイズ）という言葉の代わりにValidation（検証）という言葉をよく聞くようになったと思います。Sanitizeの意味を辞書で調べると「汚れている物をきれいにすること」とされています。この意味の通り汚れた変数をきれいにして使えば安全に利用できるとする考え方に基づくのがサニタイズ手法です。典型的な例は、「テキストを出力する前に"<"と">"を取り除く」方法があります。 例1 "<"と">"をereg_replaceで取り除く $safe_text = ereg_replace($_GET['text'], '[<>]', ''); この$safe_textを <a href="/script.php?t
HTML5に最適なのはグーグルではなく、アップルだ
オープンスタンダードのHTML5がモバイルアプリへ挑む。 本来ならグーグルがHTML5の開発を先導しているはずだが、現実はそうではない。実際は、その名誉はネイティブアプリの素晴らしさを主張し続けてきたアップルのものだ。 関連記事：グーグルは一刻も早く、HTML5にもっと力を入れるべきだ アップルはオープンソースやオープンスタンダードのリーダーとして知られて来た訳では無い。しかしiOS 8によって両分野でリーダーとなったのだ。多くの性能とユーザー体験を改善するなかで、アップルはアプリケーション開発者にも大幅な機能改善を提供した。それにはiOS 8でハイブリッドアプリが動く新たなブラウザエンジン、WKWebViewも含まれている。 皮肉にも、アップルのかつて敵、Flashを保有するアドビが最も利益を得るかもしれない。 現在のアプリ開発手法 これまでiOSかAndroidのどちらをとっても、性能
これからのWeb制作スタイルとプロトタイプの考え方 - よつば手帖
近年、プロトタイプやフレームワークと言った言葉をよく耳にします。 どのような変化が起きていて、それに至るまでの考え方や、個人的な見解を書きたいと思います。 閲覧環境と利用者の変化 Webサイトの役割の変化について スマートフォンやタブレットの登場によってWebサイトの閲覧環境は大きく変化しました。 PCの前にわざわざ座り、電源を入れて「さぁ、Webサイトでも見るか〜」から、リビングのソファに座りスマートフォン閲覧するようなスタイルが当たり前になってきました。 Web制作者は常時PCをたちあげてると思いますが、Web業界に関わっていない方はわざわざPCのある部屋に行って見るなんて事は少なくなっていると思います。 コミュニケーション的視点の重要性 Webサイトの価値観や利用状況は変化しているのに、実際にそれらをふまえて制作されている場合は少ないように思います。 利用者の見方が変わって来ているの
Chrome Dev Editor - フロントエンド開発ならお任せなChromeアプリなプログラミングエディタ MOONGIFT
Webアプリケーションを開発する際にはテキストエディタやIDEを使うのが一般的です。しかし開発してWebブラウザに表示を切り替えて再読み込みして…というのは手間がかかるものです。 そこでWebアプリケーションをWebブラウザ上で開発してしまおうというのがChrome Dev Editorです。JavaScriptだけでなくDartを使った開発にも対応したエディタになります。 Chrome Dev Editorの使い方 こちらがメイン画面です。Chrome Dev EditorはChromeアプリとしてインストールされます。 最初にプロジェクトを作成します。 エディタはハイライトがついたもので使いやすいです。 内部サーバ機能付きです。 GitやChrome Web Storeへのデプロイ機能があります。 Web Starter KitやPolymerをベースに生成することもできます。 Chr
Railsのテスト,デプロイ,ドキュメント生成をBitbucket, Jenkins で行う - ボクココ
今回はJenkinsとBitbucket の連携をします。 Bitbucket はプライベートリポジトリを何個でも作れて、5人までなら無料で使えるという優れもの。少人数開発ならこれを使わない手はないです。 Github Enterprise だとお金かかる部分が浮きます。 さらに！ Wiki 機能もあり、今回はここに自動生成したドキュメントを反映できるようにします。 またJenkinsはどっかのリモートに置くとそれだけでお金がかかるし、無料のJenkins ホスティングサービスは柔軟性が無いので使いません。その代わりにしばらくはMacのローカルでJenkinsサーバを立てて運用していきます。 ローカルでJenkinsを立てると、Bitbucketへのフックができなくなるので、git push した瞬間にJenkinsを走らせる、みたいなことはできないのでご注意を。 やりたいこと Git p
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ
2014年3月19日 Illustrator, Webサイト制作 これまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 ↑私が10年以上利用している会計ソフト！ Illustrator初心者さんへ Illustratorはベクター形式の画像を作成できるAdobe社のアプリです。ロゴやイラストを作る時にはかかせません。Adobeの公式チュートリアルサイト、Adobe TVではIllustratorの概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustratorは
Webアプリケーションの構成に関する予備知識 - Qiita
自分の担当したWebアプリケーションを引き継ぐ際に、予備知識として説明したことのまとめ 注意事項 もともと明確に定義されていない概念や、簡単に説明するため正確さを犠牲にした部分が多い 間違っていることを前提に、疑いながら読むのがベター アプリケーションの層構造 アプリケーションを構成するオブジェクトには非常の多くの種類がある アプリケーションの（より良い）構成をオブジェクト単位で考えるのは難しいので、もっと粒度の大きい単位で考えたい アプリケーションをいくつかの層（オブジェクトの所属するグループ）に分割し、層単位でアプリケーションの構成を考える View層（ビュー層） レスポンスをクライアントにとって都合のいい形（i.e. 画面）に変換する層 View層のオブジェクトは Controller層のオブジェクトから利用される DomainModel層のオブジェクトを利用して、ユーザーに表示した
ぼくらの七ボタン戦争 - Social Buttons War -
「Java News.jp（Javaに関する最新ニュース）」の安藤幸央氏が、CoolなプログラミングのためのノウハウやTIPS、筆者の経験などを「Rundown」（駆け足の要点説明）でお届けします（編集部） 「ボタン」という形でWebに侵食する「ソーシャル」 最近、あちこちのWebページを見て回る「Webサーフィン」（死語？）をしていると、そこら中にソーシャルネットワーク／SNSと連動する「いいね！」ボタン「+1」ボタンを見かけるようになりました。実世界でも、友達の話を聞いて「いいね！」と思うときは、そういったり、反応したりするでしょう。それと同じような反応や評価がWebの世界にも広くもたらされてきました。 旧来のWeb上のレビューであれば、星5つなどの「5段階評価」、アンケート調査などでは「10段階評価」で示すことが多いものでした。しかし段階評価は人によって基準が異なりますし、お国柄によ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[67WS] 2015年のWebサイトの作り方![[67WS] 2015年のWebサイトの作り方](https://cdn-ak-scissors.b.st-hatena.com/image/square/27fb50fa325acadd473a5e870f6a9a67c961ae7e/height=288;version=1;width=512/https%3A%2F%2Fi.ytimg.com%2Fvi%2FuAgR6rg8GCk%2Fhqdefault.jpg)
Web互換性検証サービス“modern.IE”を「Google Chrome」から直接利用できる拡張機能NOT SUPPORTED
The Design Pixel - Online Magazine for Web Designers and Developers
IBM Developer
『運用屋さんのためのVBA入門』 ～ 運用方法論 運用工程設計・自動化概論 〜
