ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん！』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ（S○f○ri、E○ge）でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。（最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。） その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な
REST APIとは？ - API設計のポイント
最近は様々なサービスでWebAPIが提供されています。普段の開発をする中でもシステム連携などでAPIを作る機会が出てくるのではないでしょうか。 WebAPIの中でもREST APIなんてものもよく聞くのかなぁと思います。REST APIの設計は色々と奥が深く、なかなかおもしろい技術です。 今回はそんなREST APIを設計する上でのポイントをご紹介していきます。この記事では実装よりも設計思想的な部分を書いています。次回以降にもう少し実装に近いレベル記事を書いきます！ REST APIとはRESTの原則に沿った形で設計されたAPIを指します。 じゃあ、RESTってなんぞや？となると思いますが、参考サイトにはこんなことが書かれています。 「セッションなどの状態管理を行わない（やり取りされる情報はそれ自体で完結して解釈することができる）」（Webシステムでは、HTTP自体にはセッション管理の機構
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近
サーバからクライアントに送信する技術 - WebSocketを中心に - Qiita
Webでのプッシュ技術 HTTPはクライアント（ブラウザ）からリクエストしてサーバからレスポンスが返る一問一答型のプロトコルなので、基本的にはサーバ側からブラウザに新着情報をリアルタイムで通知（プッシュ）できるようにはできていません。 しかしそれでもプッシュをしたいという場合にどうするかという話が出てきます。やり方には以下のようなものがあります。 ポーリング クライアントからサーバに定期的に新着を問い合わせるようにします。 最も原始的かつ確実なやり方。欠点は、最大でポーリング間隔の分だけ通知が遅延しうることです。 ロングポーリング（“COMET”） ポーリングなのですが、問い合わせを受けたサーバは新着情報がなければレスポンスを返すのをしばらく保留します。 そのあいだに新着情報が発生すれば即座にレスポンスを返しますし、一定時間経過したら何もなかったとレスポンスを返しましょう。 飛び交う通信内
step by stepで始めるwebpack - Qiita
※webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。 公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも？と思い書きました。 これから始める人の手助けになれば幸いです。 また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依
一からマイクロサービスの開発フローを作った話 - Qiita
※ 2016年の記事なので、すでに古い情報が多いです。 今の会社で、全社の外部サービスで利用できるAPIを作ってね、という話があったので、環境構築からコーディング、運用まで一人で行っている。 基本はAWSのサービスを利用し、ログの保存だけGCPのBig Queryを利用した。 ※ 2017/10/13 追記 このときの経験を踏まえて、コンテナでの環境構築を行ったので記録した。 → 一からAPIサーバの開発フローを作った話〜コンテナ編 関連記事 マイクロサービスで調査しやすいログをつくる マイクロサービスのテスト作成方針 マイクロサービス作成時におこなった負荷対策 deployフローに関しての振り返り ウェブサービス構築時に導入する、開発が3倍速くなる仕組み 簡単な要件 ゲームなど自社で利用するユーザアカウント情報を1つにする 現在のアカウントで引き続きサービスは利用できる アカウント以外に
綺麗なAPI速習会 - Qiita
Wantedly Engineer blogに本速習会資料を閲覧向けに再編しました！ ぜひご覧いただけると幸いです！ 本記事は、綺麗なAPI速習会@Wantedlyの資料として作成されたものです。 同時にこちらのコードも参照してください。 マイクロサービス 流行りのマイクロサービス、何がいいのか 各々自由な言語やArchitectureでサービスを立てられる 障害の影響が部分的 変化に強い 個別デプロイ etc... マイクロサービス化をすすめるにあたり、やりとりは全てAPIで行う 内部のAPIであっても外部に公開できるようなクオリティのAPIを作成し、それを元にサービスを作っていくことが重要 APIGatewayとBFF API Gateway Pattern 公式サイトより 「見た目はモノリシック、実装はマイクロサービス」 一箇所見に行けば全てのAPIを見つけられる 細かい権限管理も可
Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み
Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み 清水智公（Mozilla） Webブラウザの上で動作するアプリを書くための言語、といえば何が想起されるでしょうか。Flash、Sliverlight、Java、さまざまな言語が利用されてきましたが、やはり今のメインストリームはJavaScriptでしょう。 JavaScriptはさまざまな言語の特徴を併せ持つ動的言語で、Web技術の発展とAPIの整備の結果、Virtual Reality(VR)や画像認識、DAW(Desktop Audio Workstation)といった、少し前まではネイティブでの実装しかありえなかった種類のアプリケーションもWebブラウザをランタイムとするJavaScripで実装されるようになってきました。 そのようなアプリの代表例がゲームで
人工知能は WEBサーバの暗闇を救う 松本亮介 #ipsjone / JPSJ-ONE 2016 matsumotory
Webサービスのシステム管理で疲弊している人々を救いたい話
完全に単一のHTMLファイルで動作するMarkdownエディタ作った - Qiita
概要 完全に単一のHTMLファイルで動作するMarkdownエディタ「かんたんMarkdown」を作ったというお話。 お断り 一応簡単に動作検証はしていますが、とんでもないバグが潜んでいるかもしれません。 かんたんMarkdownを利用して大切な文章がなくなってしまったり、その他損害が生じても責任は取れませんm_ _m 経緯 前回の記事(そろそろExcelで資料作るのやめたい)で、 単一ファイルで動くMarkdown 画像をbase64で埋め込んでしまう というアイデアに可能性を感じて下さった方が多いようです1。 しかしながら、 エディタとプレビューアが別なのが面倒 base64に変換するのが面倒 といった意見も多く聞かれました。 そこで思ったのです。ならばエディタを作ってしまえと。 かんたんMarkdown かんたんMarkdownは完全に単一のhtmlファイルで動作するMarkdown
HTTPステータスコード451(政治的な検閲)が正式に承認される
mnot’s blog: Why 451? draft-ietf-httpbis-legally-restricted-status-04 HTTPステータスコード451がIETFで正式に承認された。近いうちにRFCとしても発行される。 元ネタは、Ray BradburyのFahrenheit 451(華氏451)というタイトルの小説で、これはディストピアな検閲社会を描いている。 451の意味は、403(禁止/権限がない)と似ているが、正確な意味は、ドラフトを引用すると、以下の通り。 このドキュメントはサーバーオペレーターが、あるリソース、あるいはあるリソースを含むリソース群に対し、閲覧を検閲するよう法的な命令を受け取った時に使うHypertext Transfer Protocol(HTTP)ステータスコードを規定するものである。 このステータスコードは、法律や一般大衆の雰囲気がサーバー
さいきょうの二重サブミット対策 - Qiita
この記事はシステムエンジニア Advent Calendar 2015 - Qiitaの記事です。 弊社アーキ部で@kawasimaさんに教えてもらったさいきょうの二重サブミット対策について書いていきます！ 二重サブミットが発生するケース 不正な更新リクエストが発生するケースとして、以下のものが考えられます。 サブミットボタンをダブルクリックする 戻るボタンで戻って、再度保存ボタンを押す 完了ページでブラウザリロードする CSRF攻撃による不正な更新リクエスト 1. サブミットボタンをダブルクリックする 確定ボタンをダブルクリックすることによって、ユーザが意図していないリクエストが発生してしまうケース。 2. 戻るボタンで戻って、再度保存ボタンを押す 処理完了画面から戻るボタンで前の画面に遷移し、再び確定ボタンを押すケース。 本来は入力➡︎確認➡︎完了の画面遷移が適切だが、その画面遷移にな
フラットデザインへの長期接触： このトレンドが、どうユーザーの効率を下げているか
クリックできるUI要素のシグニファイアがなかったり弱かったりすると、ユーザーは次第にページ中をあやふやなままクリックしたり、マウスオーバーするようになる。そうすると、効率が落ちる一方、コンテキストからの手がかりやクリックへの即時フィードバックがより期待されるようになる。 Long-Term Exposure to Flat Design: How the Trend Slowly Decreases User Efficiency by Kate Meyer on November 8, 2015 日本語版2015年12月21日公開 完全にフラットなビジュアルデザインのインタフェースではリアリズムや立体効果をまったく利用しない。それは結果的に、クリックできることをユーザーに伝えるために従来から利用されてきた強制的な視覚的手がかりに引導を渡すものであった。 極端にフラットなインタフェースの人
プログラマ向けニュースキュレーションサービスを作ってみた話 - Qiita
はじめに 2015年度新卒でドワンゴに入社しました@ytanakaといいます。普段はAndroidアプリ開発を主に担当していますが、大学院時代は増井俊之先生のもとでユーザインタフェースと情報推薦システムの研究をしていました。 ドワンゴに入社後、それまでの研究を活かしプログラマ向けのニュースキュレーションサービスMenthas(メンタス)を個人開発しました。今回はせっかくの機会なので、開発の経緯と概要そして仕組みについて述べたいと思います。 追記： 続編を書きました こちらの記事は以前のバージョンの内容になります。現行のMenthasの仕組み・構成は以下にまとめています。 約3年かけてプログラマ向けニュース推薦アプリを作り直した話 背景 さて、この記事をご覧になっているのはプログラマの方が多いと思いますが皆さん普段どうやって情報収集をしていますか？ 自分の見聞きする限りではTwitterやは
バグハンターの哀しみ
12. 調査方法 ❶ URLの#以降にU+2028とDOM based XSSが起き得る文字列をつけて まわる ❷ 変なエラーがでないかみる http://host/#[U+2028]'"><svg/onload=alert(1)> 13. すると Benesseのサイトにメチャ普通のDOM based XSSがあった https://web.archive.org/web/20130723155109/http://manabi.benes se.ne.jp/#"><svg/onload=alert(1)> function writeAccesskeyForm(){ var htm = ''; var ownURI = location.href; //略 htm+= '<input type="hidden" name="backurl" value="' + ownURI + '"
新しくなった「マンガ図書館Ｚ」の５つの秘密 〜悪魔を滅ぼす禁断の力〜 - (株)Ｊコミックテラスの中の人
こんにちは、（株）Ｊコミックテラス取締役でマンガ家の赤松健です。 私が２０１１年から運営してきた「絶版マンガ図書館（Ｊコミ）」ですが・・・・おかげさまで近年、マンガ家さんからの掲載依頼が殺到し、マガジンで連載しながらの運営ではさすがに厳しい状況になってまいりました。(^^;) そこで先月から、大手企業の資本を入れて新会社を作り、スタッフを増やして、「掲載スピード」と「作家サービス」の大幅向上を図っております！ 新会社の名前は「（株）Ｊコミックテラス」と言います。略して「Ｊコミ」です。（笑） そして、８月３日からスタートした新サイト名は「マンガ図書館Ｚ」です！*1 ・・・いわゆる「会社売却」ではないので、赤松は別に儲かっておりません。（笑） もちろん赤松が続けて前面に立って運営を指導し、作家さんとの対応も担当いたします。つまり、 「掲載スピードが上がって、作家さんが儲かるサービスが大幅に増え
【榊正宗の異説まとめ】無料のサービスに慣れすぎた日本人という話が話題ですが、フリーには異なる２種類がある事を知っていますか？
榊正宗@BlenderQuiz @megamarsun モノを生産するというのはすばらしい事ですが、実はモノを生産すると、マイナス状態が発生します。制作費が絶対にかかるからです。作ったものが、人に届いてはじめて、価値が生まれます。それは広い視野でみれば、人類の発展につながるのです。世界中の人が人に届けない生産をしたら人類は滅亡します。 榊正宗@BlenderQuiz @megamarsun なんのためにモノを作るのかと迷ったら、それはたとえ趣味であっても、誰かに届けるためだと考えましょう。自分だけで消費するとやや赤字になります。制作したものは、一人より二人、もっと沢山の人に届ける事で制作費以上の価値を生みます。逆に届けなければ、そこにはマイナスの思念が渦巻くのです。
Touch Pianist - Magical Piano App
Loading Touch Pianist... Chrome highly recommended.
IDやクラス名でつかう英語の小話 - Qiita
Sidebar 先日、イベントの懇親会での質問で、 レスポンシブ対応で、サイドバーのカラムと落とすのがモヤっとするんですよね、サイドバーなのに。 というのがあった。 これ、確かにCSSのカラムレイアウトとか勉強しはじめると、右側・左側に#sidebarと名付けられたものがあり、なんとなく「メインに対し、位置的に横にあるやつ」っていうイメージあるんですが、別にSidebarはレイアウト上の名前ってわけではありません。 【名】〔新聞の主記事に対する〕補足［側面］記事◆【同】follow ; follow-up sidebarの意味・用例｜英辞郎 on the WEB：アルク 〔新聞の主記事に対する〕補足［側面］記事ってことで、別にレイアウト的に下にあったって、Sidebarです。 ※これはこれで、メインでないものをなんでもかんでも #sidebar の中にいれるのは正しくない気もしますね。 H
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Clack - Web application environment for Common Lisp
