JavaScriptで独自機能も追加できる無料のWebデザインエディタ「Vev」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、直感的な操作で高度なWebデザインを誰でも実現できるサービスをご紹介します。 Webサイトを構成するインタラクティブなコンテンツが豊富に用意されており、それらを組み合わせるだけで最適なWebサイトを誰でも簡単に構築できます。 また、提供されていないコンテンツや機能などは、JavaScriptで好きなように拡張できる設計になっているので無限の可能性も秘めています。Webサイトの作成にご興味ある方はぜひ参考にしてください。 【 Vev 】 ■「Vev」の使い方 それでは、「Vev」をどのように使えばいいのか詳しく見ていきましょう！ まずはトップページの黄色いボタンから無料のユーザー登録を済ませておきます。 利用可能なメールアドレスを入力してエンターキーを押してください。 すると登録したメールアドレス宛に、ログイン用のリンクが送付されるのでク
数か月前、ゲームのコミュニティなどで人気のチャットアプリ「Discord」のデスクトップ用アプリケーションに任意のコードを実行可能な問題を発見し、Bug Bounty Programを通じて報告しました。発見したRCEは、複数のバグを組み合わせることによって達成される面白いものだったので、この記事では、その詳細を共有したいと思います。なお、現在脆弱性は修正されています。 調査のきっかけElectronアプリの脆弱性を探したい気分だったので、Electronアプリで報奨金が出るアプリを探していたところ、Discordが候補にあがりました。Discordは自分自身が利用者で、自分が使うアプリが安全かどうかをチェックしたいという思いもあったので、調査をすることにしました。 発見した脆弱性私は主に次の3つのバグを組み合わせることでRCEを達成しました。 contextIsolationオプションの
クッキーに代わる技術まとめシリーズ第1回「3rd-party cookieのない2年後のアドテックに向けた動きまとめ」からすでに３年経っていますが、3rd-party cookie廃止まではあと１年です。 廃止に向けてPrivacy Sandboxの名前で知られている代替技術は一般公開が進められています。Chromeを利用されている皆様はすでにユーザへの広告機能有効化の告知をご覧になり、「理解した」ボタンを押されたかと思いますが、ここで有効化したものを含めて、主要ブラウザの各種代替APIについて説明したいと思います。 Chromeのターゲティングや計測API有効化承諾画面ちなみにEUでは「理解した」と「設定」ではなく、「Turn it on」と「No Thanks」の選択になっています（しかもボタンの色が同じ）。 それでは2021年のシリーズ第2回の投稿から約2年ぶりとなる今回は、前回ご紹
【SEO効果も】 画像を貼るならalt属性（代替テキスト）を使わないともったいない！ 使い方からメリットまで詳しく解説 - 週刊はてなブログ
ブログにおいて、画像の存在は非常に重要なものです。撮影した写真や描いた漫画を掲載している記事はもちろん、文章をメインにした記事においても、画像をアクセントに貼る、という人も少なくないのではないでしょうか。 記事内に画像を貼る際、ぜひ設定しておきたいのがalt属性（代替テキスト）です。alt属性は、画像などの要素（img要素）が表示できないときに、代わりに表示される文字列のことをいいます。 一見すると難しそうですが、はてなブログでは記事編集画面（PC版）から手軽にブログの画像にalt属性（代替テキスト）を付与することができます。 alt属性（代替テキスト）って何？ そのメリットとは？ alt属性は、ネットワークの問題で画像が読み込まれなかった場合に画像の説明を補うために使われるほか、音声ブラウザで読み上げられる際にも使われています。 つまり、alt属性で画像の説明を付与しておけば、さまざまな
知っておくと便利なCSSの単位: 相対単位が主流の現在、絶対単位（px, in, mmなど）は特定のケースで非常に役立ちます
「知っておくと便利なCSSの単位」シリーズの最後となる今回は、絶対単位（px, in, mmなど）の使いどころを紹介します。 Webサイトやスマホアプリを実装する際に使用する単位は、相対単位が主流ですが、現在でも絶対単位は特定のケースで非常に役立ちます。 Absolute length units -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで絶対単位を使用する理由1: 特定のピクセルパーフェクトなレイアウト CSSで絶対単位を使用する理由2: 外部メディアとの連携 CSSで絶対単位を使用する理由3: 印刷または固定サイズのレイアウト CSSで使用できる絶対単位 このシリーズの終わりに はじめに
Mastodon v4.2およびFedibirdの、検索欄に入力する検索文字列の書式と効果の一覧です。 アカウントと投稿の照会 特定の書式を検索の入力欄に指定すると、アカウントや投稿を照会する動作となる。 相手から個別およびサーバ単位でブロックされていたり、相手側サーバとの通信に問題がある場合、正しい指定をしても照会に失敗することがある。 分類 書式 効果 アカウント照会 @noellabo@fedibird.com ローカルアカウントを照会したり、未知のリモートアカウントをネットワークから照会する（その1）。情報が古くなっている既知のアカウント情報を更新する効果もある。 アカウント照会 https://fedibird.com/@noellabo ローカルアカウントを照会したり、未知のリモートアカウントをネットワークから照会する（その2）。情報が古くなっている既知のアカウント情報を更新す
メジャーマイルストーン ⌃トップに戻る。 WordPress 誕生 マイク・リトルと話し合った後、マット・マレンウェッグは SourceForge 上で b2 の新しいブランチを作成し、友人のクリスティーン・トラマウレットが考えた名前である WordPress と名付けました。5月27日に、WordPress.org が開設されました。当初は、開発ブログ、いくつかの概略文書、サポートフォーラムなどが置かれていました。WordPress のオリジナルホームページでは「WordPress は、美学、ウェブ標準、ユーザビリティに重点を置いたセマンティック・パーソナル・パブリッシング・プラットフォームである」と世界に向けて発信しました。このサイトは WordPress コミュニティに存在感を与え、フォーラムはホームベースとなる場を提供しました。 ⌃マイルストーンマーカーへ戻る。 初の WordPr
before, after といった疑似要素は単一の HTML タグに装飾を加える場合非常に便利。 ところが全てのタグに対して疑似要素が使えるわけではないので、例えば img タグに疑似要素を使おうとすると途端に思った描画がされず、驚いた人も少なくないかと。 本記事ではこれについてまとめておきます。 疑似要素が効かない HTML タグ まず HMTL5 のタグで疑似要素が効かないものは以下の通り brwbrcanvasembedobjectaudioiframeimgvideoinputtextareaselectlegendbuttondetailsfieldset 2021年8月17日加筆：button タグのコードに閉じタグが無かったため CodePen で正しい表記が出来ていませんでした。legend, button, details, fieldset には疑似要素が有効です。
Emotetは、非常に感染力・拡散力が強いマルウェアの一種です。Emotetは単体で動作するのではなく、あらゆるマルウェアを感染させる”プラットフォーム”としての役割を持ちます。Emotetに感染することで、約1億円もの被害にあった事例もあるほど危険なマルウェアですが、具体的な特徴から危険性、対策方法に関して解説していきます。 Emotet（エモテット）とは？ Emotet（エモテット）とは、2014年に発見された非常に強い感染力を持つマルウェアです。不正メールの添付ファイルが主要な感染経路で、情報窃盗に加えて他のウイルスの媒介もおこないます。一度侵入されれば他のウイルスにも次々と感染してしまうため、甚大な被害に発展する危険性が高いマルウェアとして有名です。 Emotet（エモテット）の特徴・攻撃手法 Emotetの特徴として挙げられるのが、「正規メールの返信」を偽装する巧妙な攻撃手口です
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証 | フロントエンドBlog | ミツエーリンクス
containプロパティにstyleやsizeを指定した場合に、どうレンダリングされるかをご紹介します。 CSS Containmentの概要については「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要」をご確認ください。 タイトルを「レンダリングパフォーマンスをアップする」としていますが、今回ご紹介するstyleとsizeはパフォーマンスを向上するものというよりは、包含ブロックの内外でスタイルの計算やサイズの計算を分けることを目的としています。 styleの検証 contain: style;の設定の有無によるcounter()のカウントの違いからstyleの封じ込めを検証します。 containプロパティの設定がない場合 containプロパティの設定がないブロックを2つ用意します。 ブロックをまたいでそれぞれのブロック内の要素をカウントす
HTMLファイル1つで完結！JavaScriptで高度なスライド資料を作成できる「PRESENTA Lib」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は純粋なJavaScriptだけであらゆるタイプのスライド資料を手軽に作成できるライブラリをご紹介します！ わずかなコードを記述するだけのシンプルな使い方と、プラグインによる強力な拡張性も備わっているのが大きな特徴です。記事の後半では、プログラミングに慣れていない人のための専用エディタについてもご紹介しています。 これからスライドを作る予定のある方も含めて、ぜひ参考にしてみてください！ なおJavaScriptの基本は、paizaラーニングの「JavaScript入門編」で学ぶことができます。 【 PRESENTA Lib 】 ■「PRESENTA Lib」の導入 それでは、「PRESENTA Lib」をどのように使えばいいのか詳しく見ていきましょう！ まずはライブラリの導入方法ですが、主に2種類あります。1つ目はnpmを利用してインストー
JSer.info #570 - Tailwind CSS v3.0がリリースされました。 Tailwind CSS v3.0 – Tailwind CSS 指定したクラス名から対応するクラスを生成するJust-in-Time Modeのエンジンが刷新されています。 またBox Shadow Colorの追加、CSS Scroll Snapのサポート、Multi-column layoutのサポートなどが行われています。 その他には実験的にRTLとLTR modifiersのサポート、開発用のビルドが不要なCDNがサポートされています。 Installation: Play CDN - Tailwind CSS Create React App 5.0 がリリースされました。 Release v5.0.0 · facebook/create-react-app webpack 5、Jest
今年サボった勉強を冬休みで全部取り戻す計画
どうも、仕事を納めてしまうと、何も予定がない人になってしまった人です... てなわけで、公式ドキュメント、リリースノート、信頼できる情報源全部読んじゃうぞという計画を立てました。計画倒れしないようにちゃんと読むことをブログで宣言します！ 何をするのか マジでやること何もないので、日頃サボったプログラミングの勉強を一気にしようと思っている。「勉強していない」なんていうと「嘘つけ」と言われそうだが、いつも必要になったことをその都度調べて誤魔化しているだけであり、読むのは本や記事といった誰かの二次三次情報なので、実は一次情報には触れていない。なので以下に挙げるドキュメントは実はちゃんと読んだことがない。全て雰囲気で使っている。 そのため自分は歳の割には未知になっている範囲がとても多く（この構文ってフリーレンぽくてなんかかっこいいよね）、未知の未知にとても弱いため、わかっている人から見るとおかしな
[レベル: 上級] indexifembedded という robots タグを新たに Google は導入しました。 indexifembedded タグは、iframe（やその他の方法）で埋め込まれたページに noindex が設定されていても、埋め込まれたページのコンテンツとしてインデックスするように Google に指示する仕組みです。 noindex 設定していても埋め込み先ではインデックスさせる indexifembedded タグの働きは少々ややこしいです（理解するまで何回も読み直した）。 基本的に、ほかのサイトに埋め込まれることが想定されるページで利用します。 ここで言う “埋め込む (embed)” とは、iframe 要素（タグ）や object 要素などを使って別ページのコンテンツを掲載することを意味します。 コピーして埋め込むことではありません。 たとえばこちらは、
Electron - WebView から BrowserView に移行する | 豆蔵デベロッパーサイト
BrowserView は Chrome のタブのような動作モデル(独立したプロセスとして実行される)のようです。 BrowserView を採用するにあたってのメリデメをあげてみます。 メリット 高速に動作する セキュア webPreferences の nodeIntegration をデフォルトのまま false にできる webPreferences の contextIsoration をデフォルトのまま true にできる WebPreferences の webviewTag をデフォルトのまま false にできる 継続的なメンテナンスが期待できる(メジャーな商用サービスで利用されている) BrowserWindow / WebView 同様に埋め込みコンテンツを利用できる デメリット WebView と違ってレイアウトに HTML/CSS が利用できない 実験的(Expr
アプリ操作のキャプチャ付き手順の作成や共有を簡単に行える「Scribe」がとても良さそう | DevelopersIO
こんにちは、CX事業本部 Delivery部の若槻です。 今回は、スクリーンキャプチャツールの Scribe を試してみたところ、とても良さそうだったので共有します。 Scribe とは Scribe は、アプリ操作のキャプチャ付き手順の作成や共有を簡単に行えるWebサービスです。 Scribe トップページ サービスと同名の Scribe 社により運営されています。 Scribe 社の概要 設立：2019年 本社：サンフランシスコ 従業員数：11-50 会社形態：非上場企業 LinkedIn より Scribe の機能 Scribe では次のような機能を利用できます。プランによって利用できる機能が異なります。 Free Web画面の操作手順作成 手順の共有範囲の設定 共有なし 指定したユーザー チーム内 パブリック Pro 以上 デスクトップアプリの操作手順作成 スクリーンショット編集機
スラッシュコマンドで手軽にWebサイトを作成できるノーコードサービス「Typedream」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、簡単な操作で高機能なWebサイトを素早く構築できるサービスをご紹介します。 Webサイトを構成する各パーツをスラッシュコマンドから素早く呼び出して、イメージするコンテンツをどんどん作っていける操作感が特徴的なサービスです。 また、便利な機能を提供する他のWebサービスとの連携もしやすいので、オリジナルサイトの作成にご興味ある方はぜひ参考にしてみてください！ 【 Typedream 】 ■「Typedream」の使い方 それでは、「Typedream」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトに配置されている【Start now】ボタンをクリックして、無料のユーザー登録を済ませておきます。 メールアドレスと簡単なアンケートに回答すればOKです。 登録したメールアドレス宛に認証コードが届くので、それをコピペすれば完了で
[レポート] ハンズオン/Looker埋め込み分析を行う5つのステップ – Looker：JOIN 2019 at San Francisco #looker #JOINdata | DevelopersIO
現地時間2019年11月05日〜07日の期間、米国サンフランシスコで開催されているLookerの年次カンファレンスイベント『JOIN 2019』。今年2019年のイベントは、弊社から3名のメンバーが現地参戦しました。 参加レポート各種については下記シリーズをご参照ください。 当エントリでは、その中からブレイクアウトセッション『Hands-on Lab: 5 Steps to Embedding Looker(ハンズオン/Looker埋め込み分析を行う5つのステップ)』の内容について参加レポートをお届けします。 目次 セッション概要 セッションレポート プライベートな埋め込み(Private embedding)とは なぜデータを埋め込むのか 埋め込み機能の挙動 ユースケース SSO埋め込み セッションまとめ まとめ セッション概要 セッションの概要は以下の通りです。 [登壇者情報]： ・S
![[レポート] ハンズオン/Looker埋め込み分析を行う5つのステップ – Looker：JOIN 2019 at San Francisco #looker #JOINdata | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/d6d0607ed83e12853cbbc19b6054dadc4f5ad3db/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F09%2Flooker-join-2019-logo-1200x630.jpg){kind=logo}
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Masato Kinugawa Security Blog: DiscordデスクトップアプリのRCE
3rd-party cookieの引退とブラウザのアドテック進出｜AD EBiS マーテック研究会
Mastodon v4.2とFedibirdの検索文字列（早見表） - noellabo's tech blog
WordPress が Web の40%を支えるようになるまで
疑似要素が適用できない HTML タグについて ｜https://wp.yat-net.com/name
危険なマルウェア「Emotet（エモテット）」とは？脅威や手口・対策まで解説
2021-12-15のJS: Tailwind CSS v3.0、create-react-app v5.0.0、CLSの改善
新しいrobotsタグとしてindexifembeddedをGoogleが導入