タグ

ブックマーク / qiita.com/laineus (9)

  • あなたの作った画像アップローダー、投稿者の個人情報ダダ洩れだよ! - Qiita

    自前のアップローダーで起きる問題 開発者 ―― インフルエンサーとファンをつなぐコミュニティサイト「Qitter」を作ったぞ! テキストと画像をPOSTするだけのシステムだから、全部自前の実装で作っちゃったぞ。 投稿者 ―― 今日もQitterに投稿しなくちゃ! 「晩ご飯なう!」 閲覧者 ―― 「推しちゃんの投稿キター!」 「推しちゃんの投稿した画像は全部保存しちゃうぞ!」 「ん…?」 「撮影場所…、つまりこれは推しちゃんの住所では!?」 「………」 そして炎上へ ―― 何故このようなことが起きるのか 画像には、画像自体のデータ以外にも、テキスト情報を保持できる仕組みがあります。 有名なものだと、jpg形式におけるEXIF情報です。 スマートフォンで撮影すると、位置情報(緯度経度)がEXIF情報に付与されたり、 一眼レフで撮影すると、カメラのメーカーや撮影時の設定がEXIF情報に付与された

    あなたの作った画像アップローダー、投稿者の個人情報ダダ洩れだよ! - Qiita
  • Web開発チームなのに何故かゲーム作ることになった話 - Qiita

    TL; DR 恋活マッチングアプリの1コンテンツとしてソリティアを作ることに JSのゲームライブラリ「Phaser3」(+Vue構文でゲームを作れる「Phavuer」)で実装 作ったもの 弊社が運営している恋活・婚活マッチングアプリ「CoupLink」の中の機能の1つとして、「ソリティア」を実装しました! ゲーム自体は、一般的なソリティアのルールに沿ったものです。 付随して、他のユーザーのハイスコアがタイムラインで表示されるような、ちょっとしたコミュニティ要素を設けています。 ゲーム部分は、未登録ユーザーも遊べる形で公開されていますので、お試しいただけます! なぜマッチングアプリゲーム? 以下のようなねらいで、アプリ内にゲームを設置することになりました。 「お相手にチャット送って、相手からの返事を待つ時間」など、マッチングアプリには待ち時間が存在する。その時間にアプリを閉じて離脱してしま

    Web開発チームなのに何故かゲーム作ることになった話 - Qiita
  • セキュリティの問題を見つけ警告する慈善団体から連絡が来た - Qiita

    ある日、、 「Repo Lookout」という団体から、僕個人のemailに「君のサイト脆弱性あるよ」といった旨の連絡が来ました。 開くと文には、確かに僕が書いたであろうprivateなgitリポジトリへのコミットメッセージが記載されていたので、事実であることはすぐに分かりました。 問題 どうやら、僕がずっと昔に作った個人のWebサイトに、.gitディレクトリ配下へWeb上からアクセスできてしまう問題があるようです。 当時、プロジェクト直下をそのままドキュメントルートに設定してしまっていたため起きていました。 見られて問題になるようなプロジェクトではなかったのは幸いです。 Repo Lookout この連絡を送ってきた団体は、脆弱性を突いて脅しをかけよう、といったような悪意のある団体ではなく、むしろその逆のようです。 このケースの脆弱性に特化して、世の中のWebサイトから同様の問題を持つ

    セキュリティの問題を見つけ警告する慈善団体から連絡が来た - Qiita
  • 戻るボタンで「ページ遷移」させてはいけない - Qiita

    UI/UXと画面遷移について、 そのボタンに割り当てるべきアクションは、「ページ遷移」なのか、「ヒストリーバック」なのか、という話です。 ヒストリーバックを用いた理想的な遷移 あなたは一覧画面と詳細画面を持つサイト/Webアプリを開発しています。 詳細画面では、ヘッダーの左に戻るボタンが表示され、ヒストリーバックが割り当てられています。 ① ユーザーは、Googleの検索結果から一覧画面にランディングし、さらに詳細画面に遷移しました。 ② ユーザーは詳細を見終わったので、左上に表示された戻るボタンを押下し、一覧画面に戻りました。 ③ ユーザーは他に見たいものがなかったので、次はブラウザのヒストリーバックを使ってGoogleの検索結果に戻りました。 ユーザーはヒストリーバックを用いて期待通りのブラウジングができました。 ヒストリーバックとページ遷移の混在した悪い例 このサイトを改修し、ヘッダ

    戻るボタンで「ページ遷移」させてはいけない - Qiita
  • 一定間隔で実行する処理はsetIntervalではなくsetTimeoutで書こう - Qiita

    一定間隔で実行する処理は 場合によっては setIntervalではなくsetTimeoutで書こう! 例: 約5秒毎にHTTPリクエストを投げてください こんな処理を実装するときの例です。 各メソッドのおさらい: 主な役割

    一定間隔で実行する処理はsetIntervalではなくsetTimeoutで書こう - Qiita
  • エンジニアでも知っておきたいデザインの基礎知識 - Qiita

    → English 対象読者 ワイヤーフレームだけが渡されて、それを元にコーディングしなければいけないようなケースで役立つ知識を紹介します。 また、デザイン経験は無いけど、個人開発で何かプロダクトを作ってみたい方にも参考にしていただけるかと思います。 デザインといっても、無からクリエイティブを生み出すような部分ではなく、あくまでワイヤーフレームレベルのものをプロダクトとして最低限機能するレベルに引き上げるまでの範囲について言及します。 概要 最近のWebデザインはシンプルなので、既存のWebサイトに新しいパーツを実装するような場合に、ワイヤーフレームだけが与えられ、デザインデータが用意されないことがあるかもしれません。 そのような場合、エンジニアにデザイン領域への多少の裁量が生じ、実装者によって仕上がりに差が出ます。 この記事では、ワイヤーフレームを元にエンジニアが実装した「ちょっと悪いデ

    エンジニアでも知っておきたいデザインの基礎知識 - Qiita
  • 非同期通信をするなら絶対にやったほうがいいこと - Qiita

    TL; DR ユーザーを待たせるとき、「どのように待たせるか」によって印象は結構変わります。 非同期処理などでユーザーを待たせるときは、適切なローディングを表示してUXを改善しましょう。 違いを体感していただけるよう、いくつかの例を元に書いてみました。 ボタン押下の例 送信ボタンを押してから、通信に1秒かかるお問い合わせフォームを作ってみました。 2つの例を比べてみて下さい。 実際には何も通信しないダミーのFORMなので、気軽に試して下さい。 Bad See the Pen ダミーFORM by laineus (@laineus) on CodePen. Good See the Pen ダミーFORM by laineus (@laineus) on CodePen. 改善されたこと1 ユーザーの操作に対し、画面が即時応答するようになりました。 結果: 体感速度が向上しました。 どちら

    非同期通信をするなら絶対にやったほうがいいこと - Qiita
  • エンジニアでも知っておきたいデザインの基礎知識 - Qiita

    → English 対象読者 ワイヤーフレームだけが渡されて、それを元にコーディングしなければいけないようなケースで役立つ知識を紹介します。 また、デザイン経験は無いけど、個人開発で何かプロダクトを作ってみたい方にも参考にしていただけるかと思います。 デザインといっても、無からクリエイティブを生み出すような部分ではなく、あくまでワイヤーフレームレベルのものをプロダクトとして最低限機能するレベルに引き上げるまでの範囲について言及します。 概要 最近のWebデザインはシンプルなので、既存のWebサイトに新しいパーツを実装するような場合に、ワイヤーフレームだけが与えられ、デザインデータが用意されないことがあるかもしれません。 そのような場合、エンジニアにデザイン領域への多少の裁量が生じ、実装者によって仕上がりに差が出ます。 この記事では、ワイヤーフレームを元にエンジニアが実装した「ちょっと悪いデ

    エンジニアでも知っておきたいデザインの基礎知識 - Qiita
  • エンジニアでも知っておきたいデザインの基礎知識 - Qiita

    → English 対象読者 ワイヤーフレームだけが渡されて、それを元にコーディングしなければいけないようなケースで役立つ知識を紹介します。 また、デザイン経験は無いけど、個人開発で何かプロダクトを作ってみたい方にも参考にしていただけるかと思います。 デザインといっても、無からクリエイティブを生み出すような部分ではなく、あくまでワイヤーフレームレベルのものをプロダクトとして最低限機能するレベルに引き上げるまでの範囲について言及します。 概要 最近のWebデザインはシンプルなので、既存のWebサイトに新しいパーツを実装するような場合に、ワイヤーフレームだけが与えられ、デザインデータが用意されないことがあるかもしれません。 そのような場合、エンジニアにデザイン領域への多少の裁量が生じ、実装者によって仕上がりに差が出ます。 この記事では、ワイヤーフレームを元にエンジニアが実装した「ちょっと悪いデ

    エンジニアでも知っておきたいデザインの基礎知識 - Qiita
  • 1