優先順位が口癖になる危機感 - ジンジャー研究室
開発サイクルの終盤に近づくと「今回は優先順位の高いここまでを実装して、残りは優先順位が低いのでまたの機会にしましょう」という話になりがちだ。自分もこれまで何度もそうしてきたし、その場の判断としては正しい。が、このやり方に味をしめて常にこの調子で進めて、なんとなく上手く仕事をこなしている気になってしまうことには危機感がある。 以下、普段考えていることを自戒を込めてメモしておく。（なお、筆者の経験は toB ・Web 系・自社開発が中心なので読者の置かれている状況とは一致しないかもしれない） 優先度が低いタスクに着手する機会が一生訪れない 仮にあるタスクの優先度を下げたとする。バックログを眺めるとそのタスクに着手できそうなのは３ヶ月後だ。そして３ヶ月後、やっとそのタスクに着手できるかというと、そんなことは決してない。３ヶ月の間にそれよりも優先度の高いタスクが積まれているからだ。タスクを消化する
クロスサイトスクリプティング(XSS)
クロスサイトスクリプティング (cross site scripting) とは Web アプリケーションの脆弱性のひとつで、HTML を動的に生成する際に、リクエストデータやヘッダに埋め込まれた悪意のあるデータをそのまま HTML として表示してしまい、悪意のあるスクリプトが実行されてしまうものです。悪意をもったスクリプトがサイトを横断して実行されることからクロスサイトスクリプティングと命名されています。略称は、CSS(Cascading Style Sheet) と混同されるため、CSS ではなく XSS と略されます。 例えば、掲示板などで、利用者が入力した文字列をそのまま HTML として表示した場合、利用者は文字だけではなく、HTML のタグも埋め込むことが可能となります。<b> などの無害なものであれば構いませんが、<script>～</script> で悪意のあるスクリプトを
3分でわかるXSSとCSRFの違い - Qiita
みなさんこんにちは。 FUJITSU その2 Advent Calendar 2018 17日目の記事担当は私 ゆきはらです。 前回14日目はkeiya-nobutaさんのSphinxの導入とLinux Kernelドキュメントのビルドで、 18日目はhasunumaさんの富士通サイバーセキュリティーワークショップ(FCSW)2018参戦記となっています。 はじめに なぜこのテーマにしたか Webアプリケーションに対する代表的な攻撃手法としてXSS（クロスサイトスクリプティング）とCSRF（クロスサイトリクエストフォージェリ）というものがあります。 しかしこの二つ、名前だけでなく攻撃手法も似ていて違いがとてもわかりづらいです。かつて私がセキュリティを勉強していたときもよく混同していました。 そこで、この記事ではXSSとCSRFの仕組みとそれらの違いについてまとめることにしました。 対象とす
これで完璧！今さら振り返る CSRF 対策と同一オリジンポリシーの基礎 - Qiita
✎ 基礎知識編 CSRF とは何か？ CSRF (Cross-Site Request Forgeries) を意訳すると 「サイトを跨ぐ偽造リクエスト送信」 です。 簡単に言うと，罠サイトを踏んだ結果，自分が無関係な別のサイト上で勝手にアクションをさせられる攻撃です。具体的には，ネットサーフィンをしているうちに知らない間に自分のIPアドレスから掲示板に犯罪予告が書かれていた，といった被害を受けます。 この攻撃を防ぐ責任は「無関係な別のサイト（具体例では掲示板）」側にあります。Web サイト作成者には，利用者が意図しない操作を勝手に実行されないように，利用者を守る責任があります。 また上図からも分かる通り，この攻撃の最大の特徴はアカウントがハッキングされたというわけではないということです。ログイン状態の利用者のWebブラウザを利用して攻撃が行われている，というのが重要です。 オリジンとは何
ウェブ上でのレンダリング | Articles | web.dev
ウェブ上でのレンダリング コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ウェブ デベロッパーが決定すべき重要な決定の一つは、アプリのロジックとレンダリングを実装する場所です。ウェブサイトの構築方法はたくさんあるため 簡単ではありません この領域に関する Google の理解は、過去数年間に大規模なサイトを対象に Chrome で行った実績に基づいています。大まかに言うと、完全なリハイドレーション アプローチよりも、サーバーサイド レンダリングまたは静的レンダリングを検討することをおすすめします。 この決定を行う際に使用するアーキテクチャをより深く理解するには、各アプローチをしっかりと理解し、それらについて説明する際に使用する一貫した用語を使用する必要があります。レンダリング アプローチの違いは、ページ パフォーマンスの観点からウェブでのレンダリングのトレ
2018年 導入してよかったデザインツール｜灰色ハイジ｜note
Twitterのタイムラインで「2018年なんとかまとめ」というリンクをよく見かけることで年末を感じている灰色ハイジです。こんにちは。 日々いろんなツールが増えていますが、個人的に今年導入してみて良かったデザインツールをまとめてみました。 - Contrast - Principle - Figma - RealtimeBoard - IconJar - UXKit - Notion - ConceptsContrast WCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）が定めた数値で色のコントラストチェックができます。これまでにも同様のツールはありましたが、Sketchのプラグインだったり特定のソフトウェアでしか使えなかったものが、これだとMac Appでメニュー バーから起動できるのでどのソフトウェアでも使えます。 Principle アニメーションやインタラクションがつくれ
クラシル、不屈のキャッシュ戦略 - dely Tech Blog
こんにちは！ プロダクトマネージャーをしている奥原 (@okutaku0507) です。前までサーバーサイドのリードエンジニアをしていました。 delyの開発ブログが長らく更新されておらず、不甲斐ないです。これからは活発にdelyが取り入れている最新技術や実際にあった事例、取り入れているアーキテクチャなどを中心に発信していきたいと思っています。 久しぶりの今回は、delyが運営/開発しているレシピ動画サービスであるkurashiruの涙あり、笑いありのキャッシュ戦略について歴史と実際の事例を元に書いていきたいと考えています。最後には、僕が作成したクラシルに用いられているキャッシュ戦略をgemにしたライブラリを紹介いたします。 はじめに サーバーサイドチームはクラシルの開発から1年半程度まで、主に僕一人しかいませんでした。TVCMによる急激なユーザー数増加や新機能開発、社員100人を支える管
The Twelve-Factor App （日本語訳）
はじめに 現代では、ソフトウェアは一般にサービスとして提供され、Webアプリケーション や Software as a Service と呼ばれる。Twelve-Factor Appは、次のようなSoftware as a Serviceを作り上げるための方法論である。 セットアップ自動化のために 宣言的な フォーマットを使い、プロジェクトに新しく加わった開発者が要する時間とコストを最小化する。 下層のOSへの 依存関係を明確化 し、実行環境間での 移植性を最大化 する。 モダンな クラウドプラットフォーム 上への デプロイ に適しており、サーバー管理やシステム管理を不要なものにする。 開発環境と本番環境の 差異を最小限 にし、アジリティを最大化する 継続的デプロイ を可能にする。 ツール、アーキテクチャ、開発プラクティスを大幅に変更することなく スケールアップ できる。 Twelve-F
更新されたJS、CSS、画像のみブラウザキャッシュを破棄して読み込ませる - Qiita
WEBサービスの保守や開発をやっていると、JavaScriptやスタイルシート、画像などの静的リソースを更新した際、しばしば「確認したけど、更新されてないよ」とか云われて、「ブラウザのキャッシュを消してからもう一度見てみてください」みたいなやり取りが発生することがある。これが、サービス内部のメンバー間のやり取りであれば（非効率ではあるものの）まだ許せるが、サービスを提供している顧客側に更新内容が反映されない事態が発生してしまうと、それは障害と同義だ。 そんなわけで、WEBページにおける静的リソースの読み込みには開発時に注意を払う必要がある。確実な対処方法としては、静的リソースの読み込み時にリソースパスに動的パラメータを付与して、ブラウザにキャッシュされないようにすることだ。 下記のように、フロントエンドだけで対応することもできる。 <link href="/css/style.css?20
キャッシュについて整理 - Qiita
キャッシュとは 使用頻度の高いデータを高速な記憶装置に蓄えておくことにより、いちいち低速な装置から読み出す無駄を省いて高速化すること。また、その際に使われる高速な記憶装置や、複製されたデータそのもののこと。 - IT用語辞典 Webサイトの表示においては、一度アクセスしたページのデータを特定の場所に保存することで、次回アクセス時の表示を速くし、サーバへの無駄なリクエストを減らせるというメリットがあります。また一口にキャッシュといっても下記の2種類があるので、どちらを指しているのか（あるいは両方か）意識しておきましょう。 ブラウザのキャッシュ：そのパソコンのユーザーが見たページのデータがローカルに溜まっていく。 キャッシュサーバのキャッシュ：不特定多数のユーザーが見たページのデータがネットワーク上に溜まっていく。 キャッシュの制御方法 ✏️ HTTPレスポンスヘッダ で制御 ➡️ Cache
不安とストレスから解放される見積りとスケジュール方法 - Qiita
エンジニア組織を強くするための本を出版しました Qiitaでエンジニアリングをめぐる様々なコミュニケーションの問題とその解決策や考え方を書いてきた。それらの背後にあるエッセンスをこの度書籍として出版するに至りました。 エンジニアリング組織論への招待 ～不確実性に向き合う思考と組織のリファクタリング この書籍は、エンジニアリングを「不確実性を削減する」という第一原理で捉え直し、様々なエンジニアリングとその間のコミュニケーションをめぐる現象を説明していくものです。 はじめに 何かはじめてのことをする場合、人はとても「不安」を感じます。人は未来を考えることができる生き物です。その特異な能力ゆえに、未来に起こるかもしれないよくないことを考えると「不安」を感じてしまうのです。 仕事のプロジェクトなどは、「間に合わなかったらどうしよう」とか「この仕事はちゃんと終えられるのだろうか。」など、未来のことを
Go 言語と React で考える「いい感じなURL設計」入門
Description 白ヤギコーポレーションさま主催の「最先端情報吸収研究所（AIAL）」のプレゼンテーションで使用したドキュメントです。 「URL」を軸にして、サーバーサイドを Go 言語、クライアントサイドを React (+ TypeScript) で実装する場合の要点を紹介しました。 - いい感じな URL と わるい感じな URL - RESTful API のおさらい - Echo と REST API と URL - React と SPA と URL - いい感じの URL設計を目指す旅 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. interface FooterProps { company:string } export class FooterComponent extends React.Compo
フォームに自動入力できるツールをつくるツールつくりました | maki-o memo
2014年03月20日 フォームに自動入力できるツールをつくるツールつくりました 以前に、a-blog cmsのカスタムフィールドメーカーというものを作ったことがあります。 それが意外に好評でして、いろんな方から「使ってるよ」とか「便利だよ」とかいうありがたいお言葉をいただきました。それがお仕事につながったりもして。 で、カスタムフィールドメーカーに関しては、a-blog cmsの2.0から同梱していただいたりしています。（実質的に譲渡しています ありがたいことに。 なので使ってもらえるツールっていいなというのがあって、なんか作りたいなーとは常々思っていました。 そんなときにある案件で思いました。 フォームのデバッグがめんどい そう。めんどいのです。 送受信を何回もテストするようなことってあると思うのですが、毎回毎回hogehogeだのfugafugaだの打ってるうちはまだしも、fbdso
Webアプリケーションの構成に関する予備知識 - Qiita
自分の担当したWebアプリケーションを引き継ぐ際に、予備知識として説明したことのまとめ 注意事項 もともと明確に定義されていない概念や、簡単に説明するため正確さを犠牲にした部分が多い 間違っていることを前提に、疑いながら読むのがベター アプリケーションの層構造 アプリケーションを構成するオブジェクトには非常の多くの種類がある アプリケーションの（より良い）構成をオブジェクト単位で考えるのは難しいので、もっと粒度の大きい単位で考えたい アプリケーションをいくつかの層（オブジェクトの所属するグループ）に分割し、層単位でアプリケーションの構成を考える View層（ビュー層） レスポンスをクライアントにとって都合のいい形（i.e. 画面）に変換する層 View層のオブジェクトは Controller層のオブジェクトから利用される DomainModel層のオブジェクトを利用して、ユーザーに表示した
Alpacaの働き方を支える7つのツール - Alpaca技術ブログ
Alpaca CTOの原田(@umitanuki, github)です。 世界を破壊しうる小さなアイデアで働くのは、スタートアップをやる中で一番楽しい部分でもあります。世界中の他のスタートアップが創りだす小さなアイデアが世界を変えていくのを見るのもまた楽しいものです。アルパカのメンバーは皆大企業で働いた経験が何年もありますが、一般的常識の働き方を踏まえて、どうやってもっと良い方法があるかを常に探しています。もちろんそれはウチに限ったことではなく、多くの小さなスタートアップではその通りなのでしょうが、詳細についてはどこも同じではないと思います。ので、今日はAlpacaではどういうツールを使ってどうやって働いているかを少しご紹介しようと思いました。 Slack slack.com Slackが急速に普及しているのはもはや疑いの余地がありません。Slackのいいところはたくさんあるのですが、特に
営業・運用を支える "気付ける" 管理画面
広告が邪魔なのでspeakderdeckにも上げました https://speakerdeck.com/brtriver/ying-ye-yun-yong-wozhi-eru-qi-fu-keru-guan-li-hua-mian 動画: https://youtu.be/CqMILKp3Ens?t=3h53m39s PHPカンファレンス2015での講演資料。 データを管理するだけが管理画面じゃない。サービスの質を向上させていくことができる最強の管理画面を開発運用していて意識していることを4つの工夫を軸にまとめています joind.in: https://joind.in/15322Read less
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「難民向けの空き部屋マッチングサーヴィス」欧州各地に拡大
MIT V.S. IDEO──「問い」を立てよう「なぜ」「誰のために」を理解しよう | INNOVATION INSIGHTS