タグ

webに関するstaccatoのブックマーク (23)

  • ゼロから始めるJavaScript生活 - Qiita

    (訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。) モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。

    ゼロから始めるJavaScript生活 - Qiita
  • 5分でわかる正しい Web サイト常時 SSL 化のための基礎知識

    Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめてみました。メリットやデメリット、証明書の種別からリダイレクト設定などについても解説しています。 HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの SSL 対応、特に Google が推奨している Web サイトをすべて HTTPS で配信する、所謂 「常時 SSL 化」 についての話を聞いたり、実際にお客様から相談されたりするケースが増えてきました。 そこで、いい機会だしその辺に関する情報をまとめておこうかな~ と思って書いてみた、恒例の (?) 5分でわかるシリーズ。書き終わって見たところ絶対に 5分じゃ無理っていう文章量になっててどうしようかなぁとも思ったんですが、気にせず公開してみます。 常時 SSL

    5分でわかる正しい Web サイト常時 SSL 化のための基礎知識
  • 2015年Webサーバアーキテクチャ序論 - ゆううきブログ

    2023年03月31日追記:この記事を基に、@sadnessOjisanさんより、コードレベルにより踏み込んだ、かつ、グリーンスレッドベースの新しいWebサーバアーキテクチャも含めて整理された記事 Webサーバーアーキテクチャ進化論2023 | blog.ojisan.io が公開されました。 主に新卒のWebエンジニア向けに、古典的なWebサーバアーキテクチャを学ぶ道のりと代表的な実装モデルの概要を紹介します。 この辺りの話題がWeb界隈で流行っていたのは数年以上前というイメージですが、Webサービスは相変わらずWebサーバの上で動いているので、流行り廃り関係なく学ぶべき内容だと思っています。 また、HTTP/2がいよいよRFC化し、既にh2oやtrusterdなどのHTTP/2のサーバ実装があり、今後Webサーバアーキテクチャを再訪することが増えるような気がしています。 ところが、We

    2015年Webサーバアーキテクチャ序論 - ゆううきブログ
  • 色んなXSS – nootropic.me

    2015/4/16(木):ページの一番下に追記を記述しました。 その昔、なんとかキャンプというセキュリティのイベントに参加した時「アウトプットが大事」と言われたのを思い出しました。 でも、普通自分の見つけた知識は後生大事に抱えておきたいもんだと思います。 そこで今回はそういった何かしょーもないものを捨てるべく、溜め込んだ色んなXSSのPoCを少し書き出してまとめました。 今まで自分で見つけたものや海外Security Researcher達から収集したものもあります。 さて、今回リストアップしたPoCの見方ですがいくつかの項目があります。 一番上の「手法」はタイトルみたいなものだと思って下さい。 二番目の「PoC」はスクリプトを実行する為のコードです。殆どがアラートが出るだけのスクリプトの為危険なコードは無いつもりですがご自分のブラウザで実行する際は自己責任でお願いします。リンクをクリッ

    色んなXSS – nootropic.me
  • RESTのベストプラクティス | POSTD

    現在ではREST APIはとても一般的な話題です。ほとんどすべてのWebアプリケーションの一部分となっています。シンプルで一貫性があり実際的なインターフェースは必須です。これは皆さんのAPIを他の人が使うことをとても容易にします。皆さんにとってはRESTの実践が日常的に感じられるかもしれませんが、RESTをあまり尊重しない人々もよく見かけます。これがRESTについて投稿するきっかけでした。 この記事にはRESTfulなAPIを設計する時に考慮すべきベストプラクティスがあります。 注意 : ここでのベストプラクティスは、私が過去の経験に基づいて良いと考える事例です。もし違う考えをお持ちであれば、お気軽にメールをくだされば意見交換できると思います。 APIのバージョンを示す APIのバージョンは必須であるべきです。これがあると時間が経ってAPIが変わっても影響を受けません。その方法の1つはUR

    RESTのベストプラクティス | POSTD
  • Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT

    レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア(MIT Lic

    Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
  • Web API: The Good Parts

    Web APIの設計、開発、運用についての解説書。APIは設計次第で使いづらいものになってしまうだけでなく公開後の保守運用も難しくなってしまいます。そのためAPIを美しく設計することがとても重要です。書では「設計の美しいAPIは、使いやすい、変更しやすい、頑強である、恥ずかしくない」という考えのもと、APIをどのように設計し運用すればより効果的なのか、ありがちな罠や落とし穴を避けるにはどういう点に気をつけなければいけないのかを明らかにします。ターゲットは、URIにアクセスするとXMLやJSONなどのデータが返ってくるシンプルなタイプ――XML over HTTP方式やJSON over HTTP方式――のAPIです。読者は、Web API設計の考え方と手法を知ることができます。 はじめに 1章 Web APIとは何か 1.1 Web APIの重要性 1.1.1 APIでの利用を前提とした

    Web API: The Good Parts
  • 動くCSSのためのメモ。

    CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ

    動くCSSのためのメモ。
  • Web API 設計のベストプラクティス集 "Web API Design - Crafting Interfaces that Developers Love" - フリーフォーム フリークアウト

    移転しました http://please-sleep.cou929.nu/20130121.html

    Web API 設計のベストプラクティス集 "Web API Design - Crafting Interfaces that Developers Love" - フリーフォーム フリークアウト
  • robots.txtとは?設置する理由・SEO効果・書き方を解説

    ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. robots.txtとは、Googleなどの検索エンジンのクローラーに対して、「どのURLにアクセスしていいか」を伝えるものである。 これを使えば、特定のページやフォルダのクロールを拒否できる(クロールさせない)ことができる。クローラーの動きを最適化することで、SEOの観点からも良い影響を得られる可能性がある。

    robots.txtとは?設置する理由・SEO効果・書き方を解説
  • 今夜つける HTTPレスポンスヘッダー (セキュリティ編) - うさぎ文学日記

    Webサーバーがレスポンスを発行する際に、HTTPレスポンスヘッダーに付けるとセキュリティレベルの向上につながるヘッダーフィールドを紹介します。 囲み内は推奨する設定の一例です。ブラウザによっては対応していないヘッダーフィールドやオプションなどもありますので、クライアントの環境によっては機能しないこともあります。 X-Frame-Options ブラウザが frame または iframe で指定したフレーム内にページを表示することを制御するためのヘッダーフィールドです。主にクリックジャッキングという攻撃を防ぐために用いられます。 X-Frame-Options: SAMEORIGIN DENY フレーム内にページを表示することを禁止(同じサイト内であっても禁止です) SAMEORIGIN 自分自身と生成元が同じフレームの場合にページを表示することを許可(他のサイトに禁止したい場合は主にこ

    今夜つける HTTPレスポンスヘッダー (セキュリティ編) - うさぎ文学日記
  • JavaScript Garden

    JavaScript Garden はJavaScriptというプログラム言語の一番奇妙な部分についてのドキュメント集です。 このドキュメントはJavaScriptという言語に慣れていないプログラマーがこの言語について深く知ろうとする際に遭遇する、良くある間違い・小さなバグ・パフォーマンスの問題・悪い習慣などを避ける為のアドバイスを与えます。 JavaScript GardenはJavaScriptを教える事を目的にしていません。このガイドの項目を理解する為には、この言語に対する前提知識がある事を推奨します。この言語の基礎部分についてはMozilla Developer Networkのガイド がオススメです。 著者 このガイドは愛すべきStack Overflowの2人のユーザーIvo Wetzel (執筆)とZhang Yi Jiang (デザイン)によって作られました。 貢献者 貢献

  • HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL

    このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ&ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ(t32k.me)が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ

  • Web API Design(その1) - winplusの日記

    これApigee | Google Cloud Blogを勝手訳してみる。InfoQの紹介記事Web API Design - 開発者が愛するインターフェイスを作るで十分かも知れませんが、まあ。 導入 これを読んでいるということは、開発者に愛されるようなWeb API をデザインすることを気にかけているのでしょう。そして、実証済のデザインの原則とベストプラクティスとをWeb APIに適用することに関心があるのでしょう。 私たちがデザインを考えるのためのソースのひとつに、RESTがあります。なぜなら、RESTは厳格な標準ではなくアキーテクチュア・スタイルであり、かなりの柔軟さを認めているからです。構造が柔軟かつ自由であるからこそ、デザインのベスト・プラクティスを貪欲に追い求めるのです。 このe-bookはデザインのプラクティスを集めたものです。収録したプラクティスは、私たちがいくつかの世界中

    Web API Design(その1) - winplusの日記
  • Web系フリーランスをモンスタークライアントから守る契約書【テンプレートあり】

    契約書なしの口約束でお仕事を受けてませんか? 自分はまだ駆け出しのフリーランスだから…… クライアントへ契約の手間を与えてしまうから遠慮しちゃう…… 契約とか法律とかよくわからないから…… などなど、理由は様々あるのかもしれません。 でも、契約書なしで案件を受けていると必ずいつかトラブルが起きますよ。 例えば、代金以上の労働を求められたり、お金を払わず逃げられたり。 ボクも12年間、ウェブ制作業に関わってきてますが、残念なことにこうした契約に関わるトラブルをいろいろと経験しました。 確かに、契約書を自分で作るのは難しいです。行政書士へ契約書の作成を依頼するとかなりお金がかかります。 でも、契約書がたった1枚あるだけで、クライアントと友好的な関係を長く築けるのも事実です。 この記事のタイトルには「モンスタークライアントから守る」と書きました。 実際は、契約書は制作を受ける側のあなただけを守る

    Web系フリーランスをモンスタークライアントから守る契約書【テンプレートあり】
  • ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks

    How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot

    ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
  • スマホアプリの作り方【超まとめ】Web編:HTML5やjQuery MobileなどスマホWebアプリ開発に役立つ記事52選 - @IT

    Web編:HTML5やjQuery Mobileなど スマホWebアプリ開発に役立つ記事52選 @IT編集部 2012/1/31(2013/2/28 改訂) iOS(iPhoneiPad/iPod touch)、AndroidWindows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための@IT記事のまとめです。今後、順次更新・追加していきます。 開発者が登録したApp StoreやMarketplaceなどからダウンロードしてインストールするアプリ、もしくは、あらかじめインストールされているアプリは、「ネイティブアプリ」と呼ばれています。iOSやAndroidWindows PhoneといったOS上で動き、マイクやカメラなどデバイスの機能を十分に使えるのが特徴です。作り方は、基編やデザイン/グラフィック編で紹介した記事が参考になると思います。 一方で

  • 2013年も注目したい日本発の教育系サービス7選:GREAT GEEKS:オルタナティブ・ブログ

    今年も残す所数時間となりましたが、今年最後に今最も注目されている教育分野でこれから楽しみなサービスをまとめました。学びたいことがいつでも誰でも学べるようになる日も、そんなに遠い未来ではないかもしれませんね。今年の振り返りもかねて、ぜひチェックしてみてください! ◆今後が楽しみな教育系サービスまとめ 1.WEBに誕生した、学校の新しいカタチschoo 「WEBに誕生した、学校の新しいカタチ」をコンセプトに様々な講師による授業を放送しているサービス。今年にはソーシャルラーニング機能や有料コースによるアーカイブ授業の閲覧など大幅リニューアルを行い、多くの機能が追加されました。これからの進化が楽しみなサービスです。 私も月500円で有料コースに入っていますが、授業のコンテンツが充実していているのが特徴。普段であれば足を運ばなくては話を聞けないところをいつでも動画で閲覧できるのが、特に社会人にはあり

    2013年も注目したい日本発の教育系サービス7選:GREAT GEEKS:オルタナティブ・ブログ
  • 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック

    少ない手間と知識でそれなりに見せる、ズルいデザインテクニック:ズルいデザイン(1)(1/2 ページ) デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 (注)このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し

    少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
  • 改行削除するくらいなら gzip したらいいじゃない

    CSSJavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSSJavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ

    改行削除するくらいなら gzip したらいいじゃない