タグ

Web制作に関するwitchstyleのブックマーク (29)

  • プログラム組んだら負け!実はHTML/CSSだけでできること2015夏

    スライドは、弊社の梅により弊社内の技術勉強会で使用されたものです。 近年注目を集めるアーキテクチャーである「Transformer」の解説スライドとなっております。 "Arithmer Seminar" is weekly held, where professionals from within and outside our company give lectures on their respective expertise. The slides are made by the lecturer from outside our company, and shared here with his/her permission. Arithmer株式会社は東京大学大学院数理科学研究科発の数学の会社です。私達は現代数学を応用して、様々な分野のソリューションに、新しい高度AIシステム

    プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
    witchstyle
    witchstyle 2015/07/26
    (2015/07/25公開のスライド)
  • 月間38億PVを6人でさばくpixivインフラチーム久保氏のパフォーマンス向上術 | Hitch Blog

    ■プログラミングを始めたきっかけ なぜプログラミングを始められたのでしょうか? 久保 達彦さん(、以下久): 小、中学校ぐらいのときにWindows95が大きなニュースになったんですが、これからコンピュータの時代が来るんだろうなと思ったことが最初のきっかけですね。その後入学した大学でコンピューター部に入部してそこでプログラミングがどういうものなのか知りました。大学ではあまり実践的なことはあまり学べなかったので、コンピューター部の仲間と勉強会を開催したり、自分で買った技術書を読んで勉強していましたね。 ■新卒ではウノウに入社、フロントエンドからバックエンドまで、あらゆる業務を担当 新卒ではウノウに入社されたとお伺いしたんですが、ウノウではどういう業務を担当されていたのでしょうか? 久:入社して始めの頃は「映画生活」というWebアプリケーションを僕を含めて3人のエンジニアで開発していました。

    witchstyle
    witchstyle 2013/11/11
    (2013/10/18の記事) Nginx + ngx_mruby 環境で、ngx_mrubyの実行時コンパイルを起動時コンパイルに変えてパフォーマンスを7,8倍にした
  • HTML5 を利用したWeb アプリケーションのセキュリティ問題に関する調査報告書

    HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている仕様であり、HTML5 およびその周辺技術の利用により、Web サイト閲覧者 (以下、ユーザ) のブラウザ内でのデータ格納、クライアントとサーバ間での双方向通信、位置情報の取得など、従来の HTML4 よりも柔軟かつ利便性の高い Web サイトの構築が可能となっています。利便性が向上する一方で、それらの新技術が攻撃者に悪用された際にユーザが受ける影響に関して、十分に検証や周知がされているとは言えず、セキュリティ対策がされないまま普及が進むことが危惧されています。 JPCERT/CCでは、HTML5 を利用した安全な Web アプリケーション開発のための技術書やガイドラインのベースとなる体系的な資料の提供を目的として、懸念されるセキュリティ問題を抽出した上で検討を加え、それらの問題

    HTML5 を利用したWeb アプリケーションのセキュリティ問題に関する調査報告書
  • 実例で納得!シニアが使えないサイトの例 | マミオン有限会社-パソコン・数学研修、法人研修

    パソコン教室でシニア層にインターネットの使い方を教えているときほど 「ああ、ここがもう少し改善されれば!」と吠えたくなる時がある。 「知りたい事」「申し込みたいもの」「買いたいもの」があって ワクワクしているのに、多くの人が、若い人に取っては「些細な」ミスで サイト上で目的を達成できずに諦めたり、 諦めきれないからとサポートセンターに電話して 「その情報はホームページに載ってます」と言われ落ち込んだりしている。 今日は大学の公開講座に申し込もうとしている70歳代後半女性の話。 ウキウキの申し込み「大学の公開講座申し込みたいの。英語をやり直したいのよ」といらしたMさん。 「新聞の折り込みで講座を見たのだけど、ホームページから申し込んでって書いてあって。 ホームページを見たのだけどどうすればいいのかわからないけど ホームページからしか申し込めないらしいから、やり方教えて」 とのこと。 チラシに

    witchstyle
    witchstyle 2013/10/11
    (2013/10/03のエントリ) シニア層がWebサイトにアクセスする場合の特性と操作に戸惑う例。
  • 「ズルいデザイン」関連の最新 ニュース・レビュー・解説 記事 まとめ - ITmedia Keywords

    ズルいデザイン(4): ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン 今回のテーマは「ズルいボタン」。これまでの連載で出てきた数々のズルいデザインテクニックを駆使して作成しよう。(2013/9/12) ズルいデザイン(3): box-shadowで表現する、「セミフラット」なズルいデザインテクニック box-shadowを活用した各種ボックス表現の作り方を紹介。フラットデザインの中でも違和感なく使える「やりすぎていない立体感」とは?(2013/8/21) ズルいデザイン(2): SassやCompassを使って、ズルいデザインテクニック SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは?(2013/2/27) ズルいデザイン(1): 少ない手間と知識でそれなりに見せる

    witchstyle
    witchstyle 2013/09/17
    (2012/12/05からの連載)
  • 非技術者のためのOAuth認証(?)とOpenIDの違い入門【2023年版】

    昔から、「OpenIDは認証でOAuthは認可だ」などということが言われます。しかし、その言語の意味を取り違えている方が結構多い気がしています。「もうOpenIDなんていらね。OAuthだけでいいじゃん」というような言説がよく流れてくるのがその証拠だと思います。OAuth認証というのもその類ですね。 そこで、今日はOAuthとOpenIDの違いを考えてみたいと思います。 OpenIDは紹介状、OAuthは合鍵 まずはOpenIDの概要の復習です。「OpenIDは認証」という言葉の内容をまずは復習してみましょう。 「認証」とは大変広い言葉でいろいろな場面で使われますが、「OpenIDは認証」という使い方の時は、「OpenIDは、いま来ている人の身元を認証」(ユーザ認証)という意味です。図にすると図1のような流れになります。 この例では、有栖さんがお客としてサービス提供をしているサイトである伊

    非技術者のためのOAuth認証(?)とOpenIDの違い入門【2023年版】
    witchstyle
    witchstyle 2013/09/10
    (2011/05/15のエントリ) OAuthで正しく認証するには / 次世代OpenID: OpenID Connect
  • 単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる

    In some of the feedback I have gotten on the openID Connect spec, the statement is made that Connect is too complicated. That OAuth 2.0 is all you need to do authentication. Many point to Identity Pro… 英語読みたくないという人のために簡単に解説すると… OAuth 2.0 の implicit flow を使って「認証」をしようとすると、とっても大きな穴が開きます。 カット&ペーストアタックが可能だからです。 OAuth 認証?は、図1のような流れになります。 図1 OAuth 認証?の流れ 一見、問題なさそうに見えます。しかし、それはすべてのサイトが「良いサイト」ならばです。 Site_A

    単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる
    witchstyle
    witchstyle 2013/09/10
    (2012/02/02のエントリ) 宛先の書いてない合鍵渡しちゃって、それを持っている人は誰でも私の分身ですと言っている。Facebook もこのことは気づいていて、signed_request というAPIを持っています。
  • ApacheのVirtualHostによる高集積Webホスティングでsymlink問題を根本解決する方法について考えた

    人間とウェブの未来(旧) 「ウェブの歴史は人類の歴史の繰り返し」という観点から色々勉強しています。2014年までの人間とウェブの未来の旧ブログです。 最近、各所でApacheのVirtualHostを利用した高集積ホスティングのセキュリティに関するインシデントが起きています。僕自身、自分の専門の一つがWebサーバのセキュリティなので、他人事には思えず、毎日各所の経過情報を眺めています。また、数社からApacheのセキュリティに関してもいくつか質問を受けたりしており、公に話せるような内容はこのブログでも公開していきたいと思います。 ということで、ApacheのVirtualHostによる高集積Webホスティングにおけるsymlink問題を根解決するにはどうしたら良いのかを考えました。まずは、静的コンテンツも動的コンテンツのようにファイルのユーザ権限で処理する方法から紹介します。その後、ホス

    ApacheのVirtualHostによる高集積Webホスティングでsymlink問題を根本解決する方法について考えた
    witchstyle
    witchstyle 2013/09/05
    (2013/09/05のエントリ) mod_process_security を使って、静的コンテンツの処理をApache権限から Apache以外のユーザ権限での処理に変更する
  • IPアドレス・クッキー・JavaScript・UAなどを使わずユーザーを個別に追跡する方法

    by Vernon Swanepoel ウェブサイトのユーザーがどれぐらいページを見てくれているのか、訪問頻度はどれぐらいなのかといった情報を追跡するのにはクッキー(Cookie)やJavaScriptなどが使用されますが、そうやって追跡されるのがイヤだということでCookieを受け入れないように設定したり、JavaScriptをオフにしているという人もいるはず。しかし、それでもユーザーを個別に追跡する方法があります。 Lucb1e.com :: Cookieless Cookies http://lucb1e.com/rp/cookielesscookies/ これはオランダ在住でコード・セキュリティ・ネットワークを愛しているというlucb1eさんが明らかにしたもの。手法としては新しいものではなく、多数のサイトで使われているにもかかわらず、そのことを認識している人はほとんどいないというも

    IPアドレス・クッキー・JavaScript・UAなどを使わずユーザーを個別に追跡する方法
    witchstyle
    witchstyle 2013/08/19
    (2013/08/19の記事) HTTPヘッダのETag(エンティティタグ)を利用して、ユーザのブラウザキャッシュを追跡する。(という理解でいいのかな)
  • 内部から見たVert.xとNode.jsとの比較 - uehaj's blog

    socket.ioがJavaやGrailsから扱えるかを調べている関係でvert.xを調べていて興味深かったので、こちらにあるVert.xの記事を翻訳してみました。JGGUG G*Workshopにおける杉浦さんのVert.x資料もお奨めです。 Vert.xは急速に発達つつあるサーバ・フレームワークです。 世にあまたあるサーバ・フレームワークのいずれもが、多様なプロトコルをサポートし、高速であることが特長であると主張していますが、Vert.xはそれらよりも一歩抜きん出ています。例えば、Vert.xは、サーバサイドのネットワーク環境の確立と操作も対象としています。言いかえれば、Vert.xは、単一サーバ上のデーモン実行だけでなく、クラスタリング環境での複数サーバデーモンの実行を考慮しているのです。 したがって、Vert.xを調査するにあたっては、どのように高性能を実現しているかだけではなく、

    内部から見たVert.xとNode.jsとの比較 - uehaj's blog
    witchstyle
    witchstyle 2013/08/03
    (2013/06/03のエントリ) Inside Vert.x. Comparison with Node.js. http://www.cubrid.org/blog/dev-platform/inside-vertx-comparison-with-nodejs/ の邦訳
  • 驚くほど速くする!高速化9つのポイント | Find Job ! Startup

    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

    驚くほど速くする!高速化9つのポイント | Find Job ! Startup
    witchstyle
    witchstyle 2013/07/17
    (2013/06/25の記事)
  • ウェブ制作の見積もりを金額付きで晒してやろうじゃないか!

    はい高いですか?こんなもんですか?以下見積もりの説明です。 リニューアルと言っても、既存サイトはCMS化されておらず、たいして情報もアップされていなかったため、ほぼほぼ新規案件に近い、というイメージです。そのため、旧システムからのデータ移行費用が入っていません。その代わり、商品データベースは既存のものがあり、定期的にそこからデータを吸い出してCMS側の商品ページに反映するというカスタマイズが入っています。色々調査した結果、1週間でできそうという見込みのもとに見積もりしていますが、この要望はなかなか軽く収まらないことが多いですね。 コンサルティング費用にどのくらいかけるかというのはサイトの規模感によってまちまちだと思いますが、誰に向けたサイトで、何の目的で、対象となる閲覧環境は、用意するサーバーは、考えられるリスクは、など細かく資料に起こしていき、事前に複数回クライアント往訪のうえ打ち合わせ

    ウェブ制作の見積もりを金額付きで晒してやろうじゃないか!
  • 表示が遅い人必見!WordPressを高速化させる7つの対策 | Inbound Press インバウンドプレス

    WordPressでブログやWebサイトを運用していると、表示が重くなってしまうのが悩ましいですよね。 WordPressは動的生成のため、どうしてもサーバーに負荷をかけやすくレスポンスの処理が遅くなりがちです。 その弱点をフォローし、できるだけ利用者にストレスを感じさせないサイトにするために、その改善に役立つ方法をご紹介します。 WordPressを最新バージョンに更新 最新バージョンにアップデートしていない場合はこれを機にアップデートしてください。 アップデートで少し改善する場合もあります。 現在のページ表示スピードを測定してみる ページの読み込み速度改善に役立つサービスでGTmetrixというサイトがあります。 「Analyze Performance of:」の箇所にアドレスを入力し「GO!」をクリックしてください。測定が開始します。 しばらくすると測定結果のレポート

    witchstyle
    witchstyle 2013/06/24
    (2012/07/12の記事) 最新版にする。測定する。キャッシュプラグイン三種。Head Celaner。DBキャッシュ。再測定
  • パスワード攻撃に対抗するWebサイト側セキュリティ強化策

    Webサイトのパスワード認証を狙った攻撃が大きな脅威になっています。 Tサイト(プレスリリース) goo(プレスリリース) フレッツ光メンバーズクラブ(プレスリリース) eBook Japan(プレスリリース) My JR-EAST(プレスリリース) これらの事例のうちいくつか(あるいは全て)は、別のサイトで漏洩したIDとパスワードの一覧表を用いた「パスワードリスト攻撃(後述)」であると考えられています。パスワードリスト攻撃を含めて、パスワードを狙った攻撃が成立してしまう原因は、利用者のパスワード管理に問題がある場合が多く、攻撃を受けたWebサイト側には、直接の責任はないケースが多いと考えられます。 しかしながら、 大半の利用者はパスワード管理に興味がない パスワード認証を採用している理由は、コスト上の理由、すなわちサイト側の経済的な事情 インターネットが「とても危険なもの」となるとネット

    witchstyle
    witchstyle 2013/05/07
    (2013/05/07のエントリ)
  • 第17回 Webアプリケーションのパフォーマンス改善(1) | gihyo.jp

    大きな効果を上げるために チューニンガソン#1~#3の改善率を見ると、アプリケーションや全体のアーキテクチャに手を入れないで改善できるのは最大でも10倍以下です。もちろん数倍速度が違えばサーバ台数を大きく減らせるので有意義なのは間違いないのですが、ISUCONやチューニンガソン#4のような飛躍的な高速化は望めないことがわかります。 つまりチューニングでは、単にパラメータ設定を変更するのみではなく、ボトルネックになっているコードやクエリ、アーキテクチャに的確に手を入れていくことで大きな効果を上げることができるのです。 ボトルネックの発見と解消が大事 システム全体の処理時間についてパレートの法則(経験則)を適用すると、「⁠全体の処理時間の80%は20%の部分で発生している」ということになります。実際にシステム全体で一番ボトルネックになっている部分を解消しないことには、ほかの部分に手を入れても大

    第17回 Webアプリケーションのパフォーマンス改善(1) | gihyo.jp
  • 「うわっ…私のバージョン管理、ダメ過ぎ…?」を解決するGitの使い方“超”入門

    「うわっ…私のバージョン管理、ダメ過ぎ…?」を解決するGitの使い方“超”入門:かんばん!~もし女子高生がRedmineスクラム開発をしたら(5)(1/3 ページ) 連載は、ちょっととぼけた女子高生の姉妹が今注目のアジャイル開発手法であるスクラムプロジェクト管理ソフトの「Redmine」を使って、システム開発をするというフィクションです。 これまでのお話 連載は、ちょっととぼけた女子高生の姉妹が今注目のアジャイル開発手法であるスクラムプロジェクト管理ソフトの「Redmine」を使って、システム開発をするというフィクションです。 ひょんなきっかけから電子目安箱(カウンセラー)を開発することになった「ぷりん」と「まいん」の姉妹。第1回の『高校生になって初めてスクラムを始めました~「ストーリー」で何を作るかまとめよう』、第2回の『スプリントと“かんばん”でチームのビートを刻め!! ~ス

    「うわっ…私のバージョン管理、ダメ過ぎ…?」を解決するGitの使い方“超”入門
  • AWS-CloudDesignPattern CDP2.0候補

    AWSクラウドデザインパターンとは? AWSクラウドデザインパターン (AWS Cloud Design Pattern, 略してCDPと呼ぶ)とは、AWSクラウドを使ったシステムアーキテクチャ設計を行う際に発生する、典型的な問題とそれに対する解決策・設計方法を、分かりやすく分類して、ノウハウとして利用できるように整理したものである。 これまで多くのクラウドアーキテクト達が発見してきた、もしくは編み出しきた設計・運用のノウハウのうち、クラウド上で利用が可能なものをクラウドデザインのパターンという形式で一覧化し、暗黙知から形式知に変換したものであるといえる。 パターンの中には、クラウドでなくても実現できるもの、今まででも実現されていたものも含まれているが、クラウド上でも今まで通りのアーキテクチャが実現でき、かつクラウドを利用する事で、より安価にそしてより容易に実現できるものは、CDPとして収

  • [気になる]JSONPの守り方

    XSSにCSRFにSQLインジェクションにディレクトリトラバーサル……Webアプリケーションのプログラマが知っておくべき脆弱性はいっぱいあります。そこで連載では、そのようなメジャーなもの“以外”も掘り下げていきます (編集部) JSONPだって、セキュリティを気にしてほしい 皆さんこんにちは、はせがわようすけです。今回は、JSONPを使用する場合のセキュリティについて解説しましょう。 JSONPとは、JSON with Paddingの名称が示しているとおり、JSON形式のデータにコールバック関数の呼び出しのためのコードを付加することで、クロスドメインでデータの受け渡しを実現するためのデータ形式です。JavaScriptからクロスドメインでのデータが簡単に扱えることなどを理由に、多数のWebアプリケーションでAPIの一部としてJSONP形式でデータの提供が行われています。 具体的な例を見

    [気になる]JSONPの守り方
    witchstyle
    witchstyle 2013/01/09
    (2009/08/10の記事) JSONP提供側サーバで行える対策の例
  • 第3回 JSONPでのクロスドメインアクセス | gihyo.jp

    JSONPの動作原理 前回はAjaxに存在するセキュリティモデルであるSame-Originポリシーを紹介し、そのSame-Originポリシーを迂回する方法とセキュリティについて見てきました。また、回避する方法の1つめとしてリバースProxyを用いた方法を紹介しました。リバースProxyを用いた方法ではセキュリティ的な問題点もありましたが、そもそもProxyサーバを用意しなければならないため、この方法は手軽に使うことはできませんでした。 そこで考え出されたのがJSONP(JavaScript Object Notation with Padding)という方法です。 それではまず簡単にJSONPについて説明します。 Ajaxで使われるXMLHttpRequestオブジェクトには前回説明したとおりSame-Originポリシーがありクロスドメインアクセスはできません。一方、SCRIPTタグ

    第3回 JSONPでのクロスドメインアクセス | gihyo.jp
    witchstyle
    witchstyle 2013/01/09
    (2007/07/25の記事) JSONPでのクロスドメインアクセスの動作説明と注意点
  • WordPressでブログじゃないWebサイトを作るときのいろいろ(サンプル付き)

    とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね!今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー(カスタム分類)を使って作っています。 ページを表示する為に使っているテンプレート

    witchstyle
    witchstyle 2012/12/26
    (2012/12/26 Twitter経由)