タグ

ブックマーク / qiita.com (143)

  • IE11のサポートを切ると使えるようになるCSSとか一覧 - Qiita

    Windows7のサポートが終了し、今後は動作対象にIE11を含めないことも増えるでしょう。 IEをサポートしないことにより、使えるようになるHTMLCSSをまとめました。 JavaScriptはきりがないので調べてません。 Can I Useをもとにまとめています。 分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。 『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。 この記事は2020年3月に作成したのものです。 HTML rel=“noopener" リンク元の文書へアクセスできないようにすることをブラウザーに指示します。 これを指定しないと、target=”_blank”利用時にJavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。

    IE11のサポートを切ると使えるようになるCSSとか一覧 - Qiita
  • ドキュメント作成時のあるあるアンチパターン20 - Qiita

    業務でドキュメントを作成するケースは多々ある 例:仕様書・設計書・提案書・メール・障害票... ここでは各ドキュメント共通してありがちなアンチパターンをまとめてみました。 1. 表記がバイト表示・マイクロ秒表示 プログラムが出した数値をありのままに表示するパターン ファイルサイズが100MB, 1GBあろうと、バイト表示にする 桁数が多い数値に、桁区切り(,)を入れない 時間を何でもマイクロ秒・ミリ秒にする(1/100万秒までの精度が必要?体感で分かる?) 桁数が多い=精度が高い=良い文書、ではなく、見る人が必要とする精度に切り上げることが重要(売上で1円単位まで出すことが無いのと同様) 悪い例 No ファイル名 ファイルサイズ(byte) 処理時間(秒)

    ドキュメント作成時のあるあるアンチパターン20 - Qiita
  • Webフロントエンドエンジニアにやさしいデザインファイルの作り方 - Qiita

    Sketch - The digital design toolkit 画像はSketch最高っていう顔です。 HTMLCSSを書くWebフロントエンドエンジニアにとって、Webデザイナーが用意した理想像を現実に落とし込むことは1つの使命であり、費用対効果への葛藤に揺れる中で「技術的に難しいから」という理由でデザインを却下したくないのは誰しも同じだと思います。一方で、技術的に難しくなくとも、デザインファイルの作り方次第ではエンジニアの実装効率も多少なりとも変わってきます。そこで、僕のデザイナー及びエンジニアとしての経験則から、HTML/CSSで実装しやすい(≒Webフロントエンドエンジニアにやさしい)デザインファイルの作り方を、Sketchでの用例も挙げつつまとめてみます。近年はFigmaが注目されつつありますが、基的な話は共通すると思います。 来ならばデザイナーにこそ読んでいただき

    Webフロントエンドエンジニアにやさしいデザインファイルの作り方 - Qiita
  • チャットやメールの文章をないがしろにする人はチーム全体の開発効率に悪影響を与える - Qiita

    この記事のターゲット読者 この記事はなんらかのチームに所属しているまだ経験の浅いエンジニアの方や、組織の業務効率に課題を感じていらっしゃる方に向けた内容です。 設計や実装スキル以前に求められるスキル、コミュニケーション能力 エンジニアとして活躍する上で技術的な知識・スキルだけでなくコミュニケーション能力もとても大事です。コミュニケーションをないがしろにすると、いくら技術力があったところでコミュニケーション能力が足枷となってしまい、パフォーマンスを最大化することができません。コミュニケーション能力と一口に言っても様々ありますが、この記事ではチャット(Slack等)やメールなどの文字を利用したコミュニケーションにおいて意識すべき点を私なりに纏めます。 コミュニケーションをないがしろにするとどんな問題が起こるのか? 開発を進める上で工程や立場にかかわらず、基的に誰しもが誰かしらとコミュニケーシ

    チャットやメールの文章をないがしろにする人はチーム全体の開発効率に悪影響を与える - Qiita
  • 10分でわかる構造化マークアップ - Qiita

    <h1 itemscope itemtype="http://schema.org/Corporation"> <span itemprop="name">株式会社アンティー・ファクトリー</span> </h1> ブラウザのきもち:h1タグ使われてるから見出しで、内容の「株式会社アンティー・ファクトリー」は会社名なんですね、とてもよくわかります😊。 構造化してあると何がうれしいのか Googleなどの検索エンジンでは、通常はmetaデータのtitleやdescriptionのみが検索結果として反映されます。 データが構造化されていると、構造化の内容に応じて検索結果をよりいい感じに表示(リッチリザルト)してくれます。 ただし、検索結果に必ずしもリッチリザルトが保証されるわけでは無いです。 構造化マークアップはあくまでブラウザにWebページの内容がどういうものかを伝えているだけで、それらを

    10分でわかる構造化マークアップ - Qiita
  • UIコンポーネントにはマージンをつけるな!絶対にだ!! - Qiita

    .button { display: block; margin: 50px auto 0; padding: 8px 20px; border: solid 2px #ddd; border-radius: 10px; font-size: 16px; } See the Pen button_01 by Otsuka Yuhi (@boltkeep) on CodePen. パット見、いい感じのボタンです。 しかし、このボタンには一点重大な欠点があります。 それは、このボタンは必ず上に50pxの余白が付き、かつ中央寄せされるということです。 デザイナー登場 デザイナーがこう言いました。 「ボタンを横に2つ並べたい」 「ボタンとボタンの間隔は20px」 「その上で中央寄せで!」 「あと、上のマージンは外しといて!」 さて、どうしましょう??display: flex;でしょうか?

    UIコンポーネントにはマージンをつけるな!絶対にだ!! - Qiita
  • スマホアプリのUIデザインについて知っておきたいこと - Qiita

    はじめに スマホアプリのエンジニアとして、UIデザインについて知っておきたいことをまとめておきます。 自分用のリンク集のような意味合いが強いですがお役に立てば幸いです。 公式資料 一度は目を通しておきたい基的で重要なドキュメントです。 Apple Human Interface Guidelines 現在は英語版しかないようです Apple Design Resources デザインツール用のテンプレートファイルなどがあります Google Material Design こちらも現在は英語版しかなさそう Android のマテリアル デザイン デベロッパー向けのガイド 知っておきたい概念 エンジニアとしてここまで把握しておく必要はないかもしれませんが、デザイナーさんはこの辺りを踏まえてデザインを行っているはずです。 UXの5段階モデル UXデザインにおける5段階モデルとは? UXの5段

    スマホアプリのUIデザインについて知っておきたいこと - Qiita
  • Chrome 80が密かに呼び寄せる地獄 ~ SameSite属性のデフォルト変更を調べてみた - Qiita

    Chrome 79以下や他ブラウザのデフォルト値。 Chrome 80からこの値を設定する場合、Secure属性も必須となる。 Aサイトに対し、Bサイトからどのようなリクエストがあっても、発行したサイトでCookieヘッダーに含める (Cookieを使用する) 図にすると以下のようになります。 Strict 外部サイトからのアクセスではCookieを送らない。 Lax 外部サイトからのアクセスはGETリクエストのときだけCookieを送る。 None 従来通りの動き。 【追記】なおChrome 80以降でSecure属性を付けずSameSite=Noneを指定した場合、set-cookie自体が無効になります。 セキュリティ上の効果 CSRF対策になります。 CSRF (クロスサイト・リクエスト・フォージェリ) とは、 WEBサイトがユーザー人の意図した動作であることを検証していないため

    Chrome 80が密かに呼び寄せる地獄 ~ SameSite属性のデフォルト変更を調べてみた - Qiita
  • 2020年流行するであろうwebデザインのトレンド - Qiita

    ここ最近はざっくり言ってしまえばフラットデザイン2.0、マテリアルデザインが主流になっていると思います。 視認性もよく操作もしやすいのが好まれる傾向になっています。 そんな中でこれからあるいは、今も流行っているものもありますが2020年で流行するwebデザインを紹介したいと思います。 正直webデザインの流行ってすぐに広まるものでもないと思うのですでに流行っているものも紹介しています。 なるべくサイトも載せていこうと思いますが、ページが更新されて違うデザインになっていたり、サイトがなくなってしまっていたらごめんなさい。 ・ダークモードに対応したデザイン ios13からiphoneでもダークモードが搭載されました。 すでに対応しているサイトもありますがまだまだダークモードに対応していないサイトが多く見られます。 目に優しいから、かっこいいからなどの理由で利用している人は多いと思いますのでこれ

    2020年流行するであろうwebデザインのトレンド - Qiita
  • 平成のうちにやめたかった『ITの7つの無意味な習慣』 - Qiita

    2019年の今年は「令和元年」であるわけだが、年初はまだ「平成31年」だったので、ギリギリまだ平成ともいえる。ところで、ITの世界にもいろいろな都市伝説や根拠は薄いけれどもかっちり守られているしきたり/習慣があり、少なくとも今の世界では通用しないため当は改善したほうがいいのだが業界的にずるずるといってしまっていることが色々と存在する。年末の今、平成を思い返したときに元IT企業に勤めていた人間として「この習慣は平成のうちに終わらせておかねばならなかっただろうに!」と悔やまれることを7つ挙げてみた。 ※ちなみに、諸君のまわりでこれらをすべてやめられている人がいたならば当に神である、というのが残念ながら今の現状だ。 【7位】 2要素認証でない「2段階認証」 これは令和元年にセブンペイサービスの停止でだいぶ話題になったので、認識されている諸君も多いかもしれない。話題になったのは大手企業のサービ

    平成のうちにやめたかった『ITの7つの無意味な習慣』 - Qiita
  • ユーザーエージェント(UserAgent)は権力によって悪用されている - Qiita

    ユーザーエージェント(UserAgent)とは UserAgentとは主にWebサイトにアクセスするためのプログラムのことをいう。 Webサイトにアクセスする際、HTTPヘッダーに送信するソフトウェアやOS等の情報をUserAgentとして送信する。 Webサーバー側はUserAgentを見て適切なコンテンツ(モバイル向けなど)を返すことが出来るようになる。 UserAgentからOS/ブラウザなどの調べかたのまとめ より引用 下. ユーザーエージェントを取得している様子 (Windows10, Google Chrome) Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36 適切な使い方として、サーバーがユーザー

    ユーザーエージェント(UserAgent)は権力によって悪用されている - Qiita
    popup-desktop
    popup-desktop 2019/12/27
    “つまり、この問題は、ユーザーエージェントを用いて、競合するブラウザに対してのみ、意図的にバグを引き起こし、ユーザー離れを引き起こして自分たちの利益につなげようとするのが目的だったわけです。”
  • ほんとうに怖い。さくらのレンタルサーバー - Qiita

    Help us understand the problem. What is going on with this article? さくらで専用サーバーを10年ほど利用しています。 単体のハードを利用するもので、外部からの操作はsshでログインすることしかできないものです。 作業時間を必死に捻出して、こつこつと長期間システムを開発して何とか動作するものを作り上げていました。 さくらのレンタルサーバーを利用することは、ほんとうに危険で怖いことだとおもいます。 自分が体験したトラブルをレンタルサーバーの利用を検討している方々に共有させていただきたく初めて記事を書いてみました。 二年ほど前、さくらさんが専有サーバーの場所を移動したいという申し出があり快く許可しました。その時のご説明では、場所を移動するだけでハードの変更は一切行いませんというもので、今まで通りの動作が保証される作業内容というこ

    ほんとうに怖い。さくらのレンタルサーバー - Qiita
  • "なにも無いところをタップしてキャンセル"はUI・UX的にアリなのか - Qiita

    僕の数少ない友人の、たまたま携帯(iPhone)を見させてもらう機会があったんですが(そのときはLINEの会話を見てました)、間違えてキーボードを開いてしまったんですよね。邪魔なのでキーボードを閉じようと思ったんですけど、瞬間的に手が止まるんですよ。そう、iOSにはキーボードを閉じるボタンがないんです!! これはAndroid端末のキーボード。キーボードを閉じるときは、戻るボタンをタップする(キーボードを開いているときは矢印の向きが下になります)。ちなみに、アプリによってはなにも無いところをタップしても閉じるようになっていたりします。ATOKなどのキーボードアプリではメニューからも閉じれます。 僕はiOSでキーボードを閉じる方法を知りませんでした……。一生の恥です……。友人からも嘲笑されました……。 たしかに、よくよく考えれば、なにも無いところをタップして閉じる(キャンセルする)というのは

    "なにも無いところをタップしてキャンセル"はUI・UX的にアリなのか - Qiita
  • 日立社員「社内からQiitaに投稿?できるのそれ」 - Qiita

    (2019-12-18 表現を一部訂正しました。) メタ記事。投稿するのにかかる手間に関する投稿です。 1 どうしてこんな記事を書こうと思ったか 日立製作所もガンガンOSS活動をしていることを知ってほしい。日立に興味があるが、OSSコントリビューションは社外発信にどれくらい熱心なのか気になる人向けに、とある一部署の情報をシェアしたい。 タイトルのような感想を持つ弊社内の人に情報発信してもらいたい。 (残念なことに、) 社内の情報共有サイトに書くよりQiitaに書いたほうが読まれそう。 後輩がAdvent Calendarの記事集めに苦労していたので気の毒になったため 注: 全社的な審査プロセスではなく、(株)日立製作所 ITプロダクツ統括部のやりかたです。 では全社的なプロセスは?他の部署は? → 詳しい方、(申請の上)コメントください。 ITプロダクツ統括部って何? Google i

    日立社員「社内からQiitaに投稿?できるのそれ」 - Qiita
  • 3年かけてたどり着いた英語記事を読むための方法 - Qiita

    2023/07/03 要約ツールに「ChatGPTを利用する場合」を追加し、サンプルの生成結果を記載しました。 以前は英語の記事の読み書きが苦手だったのを、このようにして克服した、という話を書きます。 成果を数値で測ってないですが、RSSフィードに登録している英語メディアの数が大幅に増えました。以前は全体の5%程度に対し、今は50%以上が英語メディアになっています。英語に対する心理的ハードルは大きく下がりました。 また、読む力を付けたことで自作のOSSのREADMEもほぼ自力で書けるようになりました。 https://github.com/goodwithtech/dockle/blob/master/README.md では始めます。 全体像 僕の場合、1000文字以上の英文記事を読む場合、STEP1に含まれる内容は必ず行います。 STEP2に含まれるものは、辞書なしで読めないときだけ行

    3年かけてたどり着いた英語記事を読むための方法 - Qiita
  • エンジニアのためのsalesforce超入門 - Qiita

    こんにちは。はじめまして。tarokamikazeです。 最近ずっとsalesforceを触っているので、ここはひとつエンジニア向けの入門記事でも書いてみようかと思います。 ここでは、商品的には Sales Cloud / Service Cloud についてお話します。 マーケティング関係など、他の製品については取り扱いませんのでご注意ください。 はじめに: もし経営者やえらいひとが、この記事を読んでいただいていたら 上流工程ができるエンジニアが社内にいて、CRM/ERP等の導入を検討しているならば、この記事を見せて「ちょっと作ってみて」と言ってみてください。 来週には、あなたの欲しいシステムをsalesforce上で構築し終えているかも。 ......無論、おぬしが作ってもええんじゃぞ? 想定読者 ある程度コードがかけて上流工程もできるWebエンジニアを対象としています。 スタートアッ

    エンジニアのためのsalesforce超入門 - Qiita
  • WebページのタイトルとURLをワンクリックでコピーするBookmarklet - Qiita

    やりたいこと タイトル+URLをリンクの形式でコピーしたい。 各サービスでフォーマットがバラバラなのでいちいち覚えたくない。 あと、Ctrl+Cもめんどくさいので、bookmarkletを押すだけでClipboardにコピーしたい。 ※2017-09-01: 実装、タイトル、説明内容を見直して修正しました。 ※2021-03-27: 実装修正しました ※2022-02-21: Twitterのページで動作しない問題に対応しました ※2023-06-12: execCommandが非推奨なため、Clipboard APIで実装しなおしました 参考にさせてもらったページ JavaScript で指定したテキストをクリップボードへコピーする方法 javascript - Replace multiple characters in one replace call - Stack Overflo

    WebページのタイトルとURLをワンクリックでコピーするBookmarklet - Qiita
  • WebエンジニアのためのSalesforce開発入門 - Qiita

    普段はWebサービス開発を行っているエンジニアが、Salesforce上で開発をすることになった際のチュートリアルを残しておきます。 現状のSalesforceは開発者フレンドリーとは言いづらい状態です。開発に関する資料は量はあるものの独自のキーワードが多く分かりづらく、ベストプラクティスが見えません。 またサービス自体も全体的に新しい機能がつぎはぎで追加されており、とっちらかっている感じが否めません。(アップデートを繰り返して頑張ってるのは伝わってくるのですが…) しかし最近はSalesforceも開発者へのサポートを手厚くしようとしているようで、ちゃんと一般的な開発手法も可能になってきていいます。 ここでは、Salesforceに初めて触るWebエンジニアが、一通り開発ができるようになるまでの道のりを示します。 ※Salesforce開発が業のわけではないので、間違っている点などあれ

    WebエンジニアのためのSalesforce開発入門 - Qiita
  • 技術メモツールをMarxico+EvernoteからDropboxPaperにかえた話 - Qiita

    経緯 毎年お金を払ってMarxico使うのやめたい。(素晴らしいツールなので、金額については高いという感覚はなかったです、でも払い続けるのはなーという感じ) Evernoteのロックインから開放されたい。どんどんメモが増えるたびに、デフォルトでMarkdownフォーマット出力できないんよなー、可能ならこのままズブズブ依存したくない、、、 以前サーバ証明書が未更新のまま放置されてて、その期間中は作った資料がEvernoteにアップロードできない事件が発生した。Marxicoの運用が心配になった。 →これが一番大きいです。 DropboxPaper以外の候補 VisualStudioCode or gistbox + gist 試してみましたが、gistはやっぱりコードのメモを管理をするためのツールであって、テキストや画像を楽にきれいに残したいと思ったとき、使いづらいなと思ってやめました。コマ

    技術メモツールをMarxico+EvernoteからDropboxPaperにかえた話 - Qiita
  • HackMDってMarkdownEditorが革新的で使いやすい - Qiita

    HackMDは、Markdownで書いたドキュメントを複数人で編集でき、リアルタイムプレビューが可能なツール。オープンソースとしても公開されている。 結論から言うとEditorは個人の好みで選べばいい。 いろんなEditorがでている中で、HackMDの最大の強みは、共同編集できて、気軽に始められることだ。 そして動作がめちゃめっちゃ軽い。早いは正義。 MTGの予定をセットしたカレンダーとかに、URL貼っておけば、メンバーがすぐにアクセスして編集できる。これがわりと楽しい。 MTG後にわざわざ認識合わせとかせずに、リアルタイムで相互レビューができるので、司会進行者のスキル差に関係なく、一定品質のドキュメントが完成できるのだ。 最終的なアウトプットは当然内容によって、それぞれあるべき場所が異なるので、MTG終盤にまとめまでやってしまえるので生産性の高いMTGができると思われる。 デザイナーが

    HackMDってMarkdownEditorが革新的で使いやすい - Qiita