タグ

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

  • MovableType備忘録 - Qiita

    個人的な備忘録 その他の記事 タグの記法について 大文字小文字は区別しない。 <MTIgnore>も<mtignore>も同じ。 MT と mt: の違いはない。歴史的な経緯。 <MTIgnore>も<mt:ignore>も同じ。 $有りと無し $は変数のメタファー。 <MTVar name="custom_field">はタグ。 <$custom_field$>は変数のメタファー。 mt:BlogHost ブログのホスト名を表示します。例えば、ブログ URL が http://www.example.com/blog/ の場合、www.example.com を表示します。 mt:BlogURL 目的 ブログのFQDN(ドメイン名)を含むURLを出力する。 通常は mt:BlogURL を使う方が良いが、検索CGIなどを使った場合、異なるドメイン(ホスト・サーバー)でCGIが実行されてい

    MovableType備忘録 - Qiita
    demizu
    demizu 2023/06/13
  • gridでアコーディオンメニューの実装 - Qiita

    はじめに 今回は、アコーディオンの開閉部分をgridでおこなう方法があることを知ったので、備忘録として記事にしました。 (私が知ってた)今までの実装 See the Pen accordion height by chisato (@mgkita) on CodePen. 1.コンテンツの高さ(.accordion__body部分)に初期値としてheight: 0px;をcss設定し、コンテンツが表示されないようにする。 .accordion__body { height: 0px; overflow: hidden; transition: height 0.2s ease-out; } さらにoverflow: hidden;をつけることで、高さ(height: 0px;)を超えるコンテンツ(accordion__text部分)を表示しないようにしています。 2.JSでクリック時のコン

    gridでアコーディオンメニューの実装 - Qiita
    demizu
    demizu 2023/06/03
  • console.log(); しか使えなかった自分へ。。。 - Qiita

    この記事について Webエンジニアになって早1年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい!!!」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"

    console.log(); しか使えなかった自分へ。。。 - Qiita
  • デザインの役割や価値(社内研修資料) - Qiita

    この記事の概要 昨年、デザインに関する社内研修を実施し、その内容をQiitaでも共有してみたところ多くの反響をいただきました。 最近内容をアップデートして研修を実施する機会があったので、こちらも投稿してみます。 具体的な制作テクニックよりは抽象的な考え方がメインですが、デザイナーと一緒に働いている方や、デザインにも興味がある方のお役に立てるのではないか、と思っています。 自己紹介 私はQiitaでデザイナーをしている綿貫佳祐といいます。 2017年に新卒でエイチームに入社して、今年で6年目です。 普段の業務では、企画を考えたりUIを作ったりコードを書いたり。 割と幅広めにデザインに携わっています。 普段の業務以外だと、会社としての発信のデザイン監修する機会が多いです。 例えば、ロゴとかコーポレートカラーのような、会社として大事なグラフィック要素1。 これらが広報物内でどう使われているかのチ

    デザインの役割や価値(社内研修資料) - Qiita
  • GitHubでhttpsのパスワード認証が廃止された。Please use a personal access token instead. - Qiita

    GitHubでhttpsのパスワード認証が廃止された。Please use a personal access token instead.GitGitHub $ git push origin branch名 remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information. fatal: unable to access 'https://github.com/名前/リ

    GitHubでhttpsのパスワード認証が廃止された。Please use a personal access token instead. - Qiita
  • 「ASCIIをUTF-8にして」それが『できない』ことを理解してもらえなかった話 - Qiita

    物語の始まり 事の発端は納品後。 先方からメッセージが届きました。 クライアント様「このファイルの文字コードがShift_JISになっておりますので、UTF-8で再納品をお願いいたします。」 拙者(あれ…UTF-8にしてたと思うんだけどな) 拙者「確認いたします。」 文字コードを確認する 案件はいわゆる更新案件で、今回の納品時に言われていたのは、「文字コードがUTF-8ではないものは変換して納品してくれ」ということ。 そして、ご指摘いただいたのは、今回の更新案件で中身はいじらなかったJavaScriptファイル。 来ならば納品するファイルではないのですが、文字コード変換という要件があったため、納品ファイルとして加えられたものでした。 一括で文字コードを変えたので作業漏れかなぁと思っていました。 ファイルの中身は記事用にかなり適当につくったものですが、まあだいたいこんな感じです。

    「ASCIIをUTF-8にして」それが『できない』ことを理解してもらえなかった話 - Qiita
  • えっ、著作権の帰属を表すHTMLタグがあるんですか? - Qiita

    smallタグ smallタグです。 かつては文字を小さく表示するために使われるタグでしたが、今ではセマンティックな役割が与えられています。 そのうちの1つが著作権の帰属を表すです。 なんでこの記事を書いたのか smallの役割って意外と知られていない気がする 最近レビューで連続でこの話をした という2つの理由から記事を書きました。 内容の補足 コピーライト表記ってありますよね? © 2019-2021 Example Corporation All rights reserved. みたいなやつです。 色々なサイトのマークアップを見学していてspanタグで実装されていることが多いことに気がつきました。 しかしHTML Living Standardのsmallタグの章を見てみると Small print typically features disclaimers, caveats, l

    えっ、著作権の帰属を表すHTMLタグがあるんですか? - Qiita
  • フロントエンドコーディング時に便利なジェネレーターサイト(随時更新) - Qiita

    更新履歴 追加 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shadows Generator」を掲載しました 2023/06/29 「Regulex」を掲載しました 2023/04/05 「Colorable」を掲載しました 2023/03/09 「Scrollbar.app」を掲載しました 2022 2022/10/04 「CSS Shadow Palette Generator」を掲載しました 2022/09/07 「Wayback Machine」を掲載しました 2022/05/31 「Min-Max-Value Interpolation」を掲載しました

    フロントエンドコーディング時に便利なジェネレーターサイト(随時更新) - Qiita
  • iOS対応のWebサイトでは、「ページ下部の隅に追従するボタン」を置いてはいけない - Qiita

    PCのレスポンシブレイアウトで動作確認を行っていて、実機での動作確認を怠っているとハマる罠 「ページ下端固定のボタン」の罠についてご紹介します。 iPhoneのMobile Safariにはデッドゾーンとか言われるものが存在します。 画面を下スクロールしてアクションバーを消えている状態で、下端をタップすると 「Safariのアクションバーを表示する操作」として認識されていまうのです。 そして、意図していたタッチイベントは発火しません。 ちょっと参考画像が縦に長いですがデッドゾーンがこんな風にあるイメージです。 このアクションバーが現れるデッドゾーン、具体的には44pxらしいです。 さらに、iPhone X系などのホームボタンのない機種ではセーフゾーンなんかも現れて 当たり判定が奪われてしまうこともあるようです。 詳しいことはこの記事が詳しいです。 iOS Safariのアクションバー表示エ

    iOS対応のWebサイトでは、「ページ下部の隅に追従するボタン」を置いてはいけない - Qiita
  • スナック「jQuery」 - Qiita

    ……あら、いらっしゃい。 若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。 何飲む? ……水割り? わかったわ。 じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――『jQuery』がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる? ……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。 その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。 他のブラウザは、Safariがバージョン3がMacWindowsに公開されていた頃で、Firefoxはまだバージョン2.0

    スナック「jQuery」 - Qiita
  • 機械学習で画像の高画質化を試みる(備忘録)- Python3 - Qiita

    1.はじめに 最近、Twitterで「謎の技術で高画質化された画像」なるものがタイムラインにいくつか流れてきて興味が湧いたので、機械学習の勉強がてら画像の高画質化の方法を、僕のように「理屈無しで手っ取り早く機械学習に触れたい!」という人に向けて備忘録としてここに残しておくことにしました。 謎の技術でこれを高画質にするのは草 pic.twitter.com/HeBB7J8Q7D — koboのようなもの (@cinnamon_kobot) February 14, 2020 謎の解像度をあげる技術で僕らのぼっさんが高解像度に!!! pic.twitter.com/cjB0MM8Oqu — ろありす (@roaris) February 15, 2020 2.実行環境の構築 今回、この手の機械学習でよく用いられる「pix2pix」を使用しました。pix2pixはGANを用いた画像生成アルゴリズ

    機械学習で画像の高画質化を試みる(備忘録)- Python3 - Qiita
  • LPを作るときに役立ちそうなTips集 - Qiita

    この記事は、 ドワンゴ Advent Calendar 2019 の21日目の記事です。 はじめに 2017年はエンジニアさんで埋められるカレンダーの中、わりと緊張しながらデザイナーの僕も「コンポーネント指向フロントエンド開発におけるデザイナーの参画について」という記事を書くことができました。 記事としても反響を頂き、登壇までさせていただくなど、大変大きな一歩になる記事でした。 さて、あれから2年経ったわけですが、 今年の9月にニコニコ生放送の開発を離れ、特設ランディングページ(以下LPと表記)やポータルサイトなどを作る部署に異動しました。 異動による環境/技術スタックの変化 部署の異動により、環境が大きく変化しました ニコニコ生放送 規模の大きなプロダクト・チーム プラットフォームのUIデザイン React/TypeScript/scss/css-modules 堅牢な機能開発・ワークフ

    LPを作るときに役立ちそうなTips集 - Qiita
  • …Outlookの送信メールが……消えた…?(12/24改修されたよ) - Qiita

    はじめに Leverages Advent Calendar 10日目担当の ham です。 今が 12月12日だということは気にしてはいけません。代打です。 Leverages で、セキュリティの責任者としてセキュリティ意識の啓蒙や全社に関わるシステムの改善をしています。 また、前職では、SOC、NOC、BGPの運用などを行っていました。 最近メールについて不可解な問い合わせが増えてきたので、調べたことをまとめます。 追記(2019年12月24日 17:10) 日 16時頃に Outlookサポートから不具合を改修した旨の連絡が来ました。 私もテストを実施し、Outlook から送信した Re: 【hoge】【fuga】 のメールが Gmail に届くことを確認しました。 メリークリスマス! 追記(2019年12月15日 21:40) 反響の大きさにびっくりしています。茶渡の霊圧を消し

    …Outlookの送信メールが……消えた…?(12/24改修されたよ) - Qiita
  • RaspberrypiでLINE通知する簡易防犯カメラ - Qiita

    はじめに(2019.12.7構成図追加) 自宅のセキュリティを強化したいと思ってRaspberryPiで簡易防犯カメラを自作。セキュリティサービスや高価なカメラを買う前にちょっと試してみたいという方向け。 玄関前やリビング窓の不審者を検知しLINE通知させたり、LINEBot経由で好きなときに撮影させようと思う。 今回は左から右の赤線のように、カメラからストリーミングした動画をmotionというパッケージで動体検知させてLINENotifyで通知する。 将来的にはオレンジ点線のようにLINEBot経由で撮影させたい。 準備するもの ・RaspberryPi Zero WH ・カメラモジュール ・zero用カメラケーブル ※これらは事前に接続しておいてください ・RaspberryPiへRaspbianOSのインストール ・SSH接続ユーザの作成 ・LINE Notifyアクセストークン 今

    RaspberrypiでLINE通知する簡易防犯カメラ - Qiita
  • CSSを非同期ロードする最も簡単な方法 - Qiita

    CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しかなく、Firefoxは当面対応するつもりがないようです。 とはいえ残り2割のためにloadCSSを突っ込んだりとか始めると末転倒感に溢れます。 全ブラウザ対応のためには、なんにしろ結局JavaScriptをこりこり書くしかない状況でした。 が、なんかすっごい簡単な対処法があったので紹介してみます。 以下はScott Jehlによる記事、The Simplest Way to Load CSS Asynchronouslyの日語訳です。 ちなみにSco

    CSSを非同期ロードする最も簡単な方法 - Qiita
    demizu
    demizu 2019/08/01
  • フロントエンドに必要なとりあえずのjsプラグイン2020 - Qiita

    2020年3月時点でまだ現役なプラグイン。 非常にお世話になっております。 雑いのでもう少しちゃんと書きたい。 jQuery もそこそこ多めです。 ▼ ユーティリティー系 bowser.js http://lancedikson.github.io/bowser/docs/bowser.js.html ブラウザ判定 [日語解説] https://co.bsnws.net/article/231 Moment.js https://momentjs.com/ jsは Date がハマるし辛い。ので時間系を扱う時はかなり必須。 [日語解説] http://blog.asial.co.jp/1158 date-fns https://github.com/date-fns/date-fns dateライブラリ Momtent.js よりモダン。使いたい機能だけをモジュール単位でインポートでき

    フロントエンドに必要なとりあえずのjsプラグイン2020 - Qiita
    demizu
    demizu 2019/06/25
  • ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita

    はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん!』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ(S○f○ri、E○ge)でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。(最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。) その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な

    ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
  • スマホ向けサイトをアプリっぽく見せるために半年間頑張ったことをまとめる - Qiita

    この記事は リクルートライフスタイル Advent Calendar2018の20日目の投稿です。 はじめに この記事では スマホ向け web ページをアプリっぽく見せるための Tips を多く紹介します。 (CSS / JS / jQuery / React / WebGL の事例を紹介します) (注) React 環境でのサンプルコードが多めですが、実装方法はどの環境でも変わらないと思います。ライブラリも同種のものが存在しているはずです。 最近だと、僕の大好きなアプリで味わった体験を、どうすれば Web で再現できるかなーって考えていました。そうしたネイティブアプリをWebで模倣したときに、知ったTipsやテクニックをまとめていきます。 この記事に書いてあること アプリっぽい体験はどのようなものがあるか CSS / JS / jQuery / React / GLSL を利用したネイテ

    スマホ向けサイトをアプリっぽく見せるために半年間頑張ったことをまとめる - Qiita
  • モバイルファーストインデックス(MFI)を踏まえたデザイン - Qiita

    2018年3月27日。ついにGoogleからモバイルファーストインデックス (MFI : Mobile First Indexing)へ移行するとの正式にアナウンスがありました。 モバイル ファースト インデックスを開始します (Google公式ブログ) これまでのGoogle検索では、パソコン版のページの中身を見て順位づけが行われていました。しかしこれからはスマートフォンの向けのページを重視して順位付けが行われる形になります。 弊社サービス「あなたのマイスター」では現在大規模なリニューアルを行っており、このタイミングでモバイルファーストインデックス(MFI)の基準を、なるべくクリアしたものにしたいと考え、簡単な調査をしました。 参考元 - Best practices for mobile-first indexing - 【チェックリスト】MFIに向けてやるべきこと:SMX West

    モバイルファーストインデックス(MFI)を踏まえたデザイン - Qiita
  • Reactを使うとなぜjQueryが要らなくなるのか - Qiita

    はじめに React(通称 React.js1)を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法(アロー関数とか)を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは(2023 年現在から見た)『昔話』です。新しく自分のコードを書く際には来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事

    Reactを使うとなぜjQueryが要らなくなるのか - Qiita