レスポンシブ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)
最近の Rack サーバ事情について - おもしろwebサービス開発日記
先月、heroku の推しサーバが unicorn から puma に変わったという発表がありました。unicorn だとスロークライアントの影響を受けやすいというのが理由なようです。 もう少し詳しく調べてみましょう。 そもそもスロークライアントってなに その名の通り遅い回線のクライアントです。3G環境のモバイル端末などが該当します。 「unicorn だとスロークライアントの影響を受けやすい」とは unicorn はプロセスモデルのサーバであり、blocking I/O モデルを採用しています。つまり、クライアントとの通信中プロセスが専有されるということです。 例えば unicorn がワーカプロセスを3つ立ち上げていて、そこへ通信完了に10分かかるようなスロークライアントが3つ接続されたら…、続くクライアントはスロークライアントの通信が完了するまで実行を待たなければならなくなります。プ
デプロイ自動化を進めるためのチェックリスト | Ryuzee.com
いままで色々なところで言ってきたことをだらだらとまとめてみました。 計画および準備段階要求される品質の定義をおこなうDevとOpsの双方で情報が共有されるようにするいつデプロイを開始するのかを明らかにするデプロイの際にインフラを変更する必要はあるのかを明らかにするデプロイを行う時間帯、行わない時間をあらかじめ決めておく(休み前を避ける)ブランチ戦略、マージ戦略を決める継続的インテグレーションの戦略を決めるログの出力戦略を決めるビルドとリリースの自動化人的要素を減らす繰り返し可能にする自動作業と手作業を混ぜないビルドを自動化する誰のマシンでもビルドできるようにするユニットテスト、結合テスト、UIテストなどテストを自動化する本番にデプロイする際にコードを書換えなければならないといった実装を避ける毎回デプロイプロセスを設計するのではなく、毎回同じ方法でデプロイする毎回同じ方法が難しければ2パター
PreloadJSで「悩ませないローディング」の作り方―CreateJS勉強会 - ICS MEDIA
先日行われたCreateJS勉強会 (第5回)にてPreloadJSで「悩ませないローディング」の作り方というテーマでライトニングトークさせていただきました。時間の関係でお伝えできなかった部分も含め本記事でまとめました。みなさまのローディング作りのご参考になれば幸いです。 PreloadJSとは？ PreloadJSとは、CreateJSのライブラリモジュールの1つで外部ファイル（画像・音声・JSONなど）の読み込み処理を担当しています。読み込み状況をイベントで監視して読み込み率（0.0〜1.0）を取得できます。その読み込み率を演出用のJavaScriptに渡してあげることで、読み込み状況に合わせた演出を実現できます。 ソースコード PreloadJSで外部ファイルを読み込むソースコードです。今回はLoadQueueクラスを使って拡張子の違うファイルをまとめて読み込んでいますが、同じ勉強会
デザインワークをGitに含めるべき? 含めないべき? - Qiita
「プログラマ業界」であればコンパイラの多くがオープンソース化されていますが、デザインツールはAdobeを筆頭に今もほとんどがプロプライエタリなツールです。そのことが、原理原則に沿うのを難しくしています。 複製不可能な部分に価値を置くという文化的な面 ツール開発にコストがかかるという金銭的な面 もあって、ツールがオープンに向かうことは当面なさそうです。Blenderという例外はありますが、GimpやInkscapeは実質プログラマだけのためのツールになっています。そういえば、Fireworksのオープンソース化嘆願はどうなったんだろう...? ツールが有料 デザインツールはときに高額です。また、セットアップに割く時間も「見えない」コストです。残念なことにインストールも自動化されていません。caskも使えません。$ npm installでは片付かないのです。また、アップグレードの問題もありま
プログラミングが捗りすぎる！コーディングに最適なフォント12選 - paiza times
Photo by Linux Screenshots こんにちは。谷口です。 エンジニアの皆さんは、プログラミングをする際にどんなフォントを使用していますか？ 「特にこだわりないからデフォルトのまま」という方も多いとは思いますが、プログラミング中は大量の文字を読んだり書いたりし続けるわけですから、なるべく可読性が高くてストレスが少なく、また自分の気に入ったフォントを見つけた方がよいのではないでしょうか。 そこで今回は、エンジニアの皆さんにお勧めの、プログラミングに最適な無料フォントを11個ご紹介いたします。 ■どういうフォントが見やすいの？ フォントには、セリフ体というものとサンセリフ体というものがあります。 セリフとは、文字の線の端につけられる「ひげ」のような、線・飾りのことを言います。 例えば、上の図でいいますと、上のフォント（MS明朝）がセリフ体、下のフォント（MSゴシック）がサンセ
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
1月に見つけたWEBサービス/アプリ/ツール作ってみた系の記事まとめ - undefined
2015年1月に見つけたものをまとめておきます。 Webサービス作ったので作業の流れを紹介してみる Webサービス作ったので作業の流れを紹介してみる - 今日学んだこと つくったもの ScheduleTweet どんなもの? TL上に日付っぽいツイートが流れたらお知らせするサービス 使用技術 サーバ heroku 言語 Python フレームワーク Django その他 ほぼまっさらのmacからサービス公開までの足取りを丁寧に紹介されています。DjangoでのOAuth認証も実装しています。こういうのを読むとwordpress使ってる場合じゃねえって思うようになります。 DjangoでWebサービスつくってみた DjangoでWebサービスつくってみた - Programming Log つくったもの いつかリスト - 人生の目標を管理・共有サービス どんなもの? あなたの今後の人生の目標
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);
EclipseからAndroidStudioへの移行手順まとめ - Qiita
AndroidStudio正式版がリリースしました。Eclipse+ADTはオワコンという風潮がより一層強まってきたので、自分がEclipseで開発していたプロジェクトをAndroidStudioに移行した時の手順を残しておこうと思います。 移行するプロジェクトの状態 コードはgitで管理。 クラス数は300個くらい。 mavenもgradleも不使用。ライブラリはlibrary/にまるごと入れて、Eclipseでプロジェクトを作ったあとインポート。 lib、library合わせて依存ライブラリの数は10個以上。 git管理はしてるものの、クラスがそれなりに多いのに依存関係ぐちゃぐちゃで、EventBusとか便利ライブラリ入れていきたいのにちょっと戸惑うなぁという感じでした。「俺もgradleでライブラリ管理したりコンソールから環境ごとにビルドしたりしたいよ！」という思いを胸に秘めながら開
AWS 対応した GitHub Enterprise v2 へスムーズに移行した話 - クックパッド開発者ブログ
技術部 id:sora_h です。今回は v2 より AWS 上での運用に対応した GitHub Enterprise を、オフィスにある既存の環境から AWS へスムーズに移行した話について説明します。 GitHub Enterprise v2 GitHub Enterprise (以下 GHE) とは、github.com を自前の環境で運用できるアプライアンスです。クックパッドでは主に GHE 上で開発を行っています。 従来まで GHE の実行環境として VMware vSphere, VirtualBox 上の実行しかサポートされていませんでしたが、11 月にリリースされたアップデート v2 より、AWS での実行がサポートされました。 クックパッドでは全面的に AWS を利用していますが、いままで GHE を AWS 上で動作させる事はできませんでした。そのため、オフィス内に E
Ruby の 定番対話ツール pry 徹底攻略 | Documentation browsing #pry #ruby - Qiita
Ruby の 定番対話ツール pry 徹底攻略 | Documentation browsing 概要 Ruby の 定番対話ツール pry 徹底攻略 ドキュメントの表示について 新しいライブラリやコードベースにおいて、メソッドのドキュメントを参照することはとても重要です。 Pry は外部ライブラリに依存することなく、ドキュメントを参照可能です。 Pry は必要なドキュメントを実行時にファイルから取得します。 Pry は gem install 時に 事前生成されたドキュメントに依存しません。 View method and class documentation show-doc show-doc でクラスやメソッドのドキュメントを参照します。 show-doc は RDoc と YARD の双方を理解し、シンタックスハイライトして表示します。 クラスのドキュメントを表示 [1] pry
ソフトウェアエンジニアを目指す人へのコードに関するアドバイス | POSTD
この短い記事で私は、ある素晴らしいアイデアを提案します。それは、製品品質のコードは、下記リストに挙げた特性で説明することができるということです。それぞれ、重要性の高いものから順番に記述しています。もしあなたが、学校もしくは独学でプログラミングを学ぶ、真面目な学生なのであれば、製品品質のシステムを構成するコードの特性を学びたいと思うのではないでしょうか。 是非、 ご意見・ご感想 をお寄せください。 読みやすさ 言うまでもなく、読みやすいコードである。 読みやすいコードは、必要に応じて簡単に変更できる。 読みやすいコードは、他の人も理解することができ、共有することができる。
第4回 JavaScriptの基礎知識#1 | gihyo.jp
こんにちは、太田です。前回はクロスブラウザのパターンについてまとめました。今回はより具体的にJavaScriptの基礎的な部分からそこそこJavaScriptに慣れた方でも間違いやすいポイントを中心に解説します。 JavaScriptの背景知識 JavaScriptは（未だに）誤解されがちな言語です。まずはJavaScriptの背景から解説していきます。 （広義の）JavaScriptとはEcma Internationalによって策定されているECMA-262という規格（ECMAScript）を実装した処理系で実行される言語を指します。遠回りな表現になっていますが、これはJavaScriptのややこしさの一端を表しています。つまり、JavaScriptそれ自体に仕様があるわけではない、ということです。ECMAScriptと呼ばれる言語の仕様があって、その仕様に準拠した言語を（広義の）Ja
ソースコード以外もとにかくテストする。もしくはカバレッジだけではダメだという話 | おそらくはそれさえも平凡な日々
あなたはプロジェクトのソースコードに対して適切にCIを回しているかもしれません。定期的にコードカバレッジの測定も行い、90%以上もしくは100%の数字を出しているかもしれません。 しかし果たしてそれで十分でしょうか？もしくはコードカバレッジだけにとらわれすぎていないでしょうか？ 監視とは(システムに対する)継続的なテストである、というのは筆者の尊敬する奥一穂氏の言葉ですが、その逆もしかりで 「テストとはプロジェクトに対する継続的な監視である」 ということも言えます。 その観点に立ってみると、プロジェクトのソースコード以外にもテストが必要なものがたくさんあることに気づくでしょう。以下に実際に筆者が自分のプロジェクトの中でソースコード以外にテストを書き、CIを回していたものを挙げてみます。 アプリケーション設定ファイルのテスト 開発中に本番用の設定ファイルを使うことはないため、本番用の設定ファ
キタァアアアアア！ Stack Overflow日本語版ついに公開
技術系のQ＆Aサイトとして世界的に有名な「Stack Overflow（スタックオーバーフロー）」。その日本語ベータ版が12月16日、公開された。 Stack Overflow日本語版 Stack Overflowは2008年に公開以降、プログラマにとって画期的な問題解決ツールとして利用されてきた。現在、サイトには700万個以上のナレッジが共有され、毎月4400万人が閲覧している。日本からアクセスするユーザーも多く、60万人以上がサイトを訪れているという。 一方で、Stack Overflowはもともと英語だったため、言語の壁を感じる技術者も多くいた。英語が得意でない人のために、Stack Overflowを見本とした日本語版サービスもいくつか生まれている。 今回、Stack Overflow日本語版は2014年12月2日にプライベートベータを開始し、12月16日をもって日本の全ての技術者
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
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
【後編】デザインできるプログラマの育てかた〜「デザインメンター制度」のキモは理由で納得！
zshの外部プラグインまとめ - Qiita
