SNSシェアボタンをHTMLとJavaScriptでつくる【Twitter/Facebook/LINE/hatena/pocket】
ブログやメディアサイトではほとんどが実装しているSNSシェアボタン。 公式のプラグインを使うと、簡単にシェアボタンを作成することができます。 しかし、デザインがプラットフォームによってバラバラであることや文言の調整が難しい点からスクラッチでつくりたいなーと思い、CSSで自由にカスタマイズ可能なHTML側のコピペ用SNSシェアボタンのコードをまとめてみました。 スクラッチでつくれば、統一したデザインでつくれるので、ぜひ参考にしていただければと思います。 SNS ボタンをスクラッチでつくる際の注意点 ボタンをつくってデザインを編集する際、一旦SNSのプラットフォーム側のブランドガイドラインを確認しましょう。 公式のブランドガイドラインには、アイコンを斜めにしてはいけない・視認性の悪い組み合わせにしない等のルールが書いてあります。 あと、現在開いているページのURLをシェアするにはJavaScr
Quagga.js でバーコード読取してみた - Qiita
はじめに 自分は以前に Cordova を使って「蔵書台帳」アプリを作りました。このとき 書籍の ISBN のバーコードを読取するのに、Cordova のプラグインを使っていました。 改めて調べてみると、ブラウザ上の JavaScript コードで直接、カメラ画像からバーコードの読取できるんですね。 JavaScript でバーコード読取できるライブラリは幾つもありましたが、これがよさそうでした。 GitHub - serratus/quaggaJS: An advanced barcode-scanner written in JavaScript GitHub - ericblade/quagga2: An advanced barcode-scanner written in Javascript and TypeScript 紹介している記事も多く、幾つか試してみました。 Quag
ブレークポイントを使ったJavaScriptデバッグを整理してみた【再入門】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに プログラミングの上達において、デバッグスキルを上げることはとても重要で近道の1つだと考えています。 私自身、勉強し始めた頃に知っていれば（理解できていれば）とよく思います。 今回、JavaScriptデバッグについてChromeDevtoolsとブレークポイントを使った基本パターンを整理しました。 自身の復習かつ、あまり馴染みの無い方でも、以下おおよそ理解できるようになれば良いなぁ、というのが本稿の目的です。 どのようなものにブレークポイントが貼れるのか どういった時にブレークポイントが発動されるのか ブレークポイントが発動さ
CloudWatch RUMでWordPressをモニタリングしてみた - DENET 技術ブログ
こんにちは。 夏といえばのウクレレで達郎山下のクリスマス・イブを練習するSRE課栩野です。 AWS re:Invent 2021で発表されたCloudWatchの新機能 CloudWatch RUMを使って、早速WordPressのサイトをモニタリングしてみたので RUMについて紹介してみたいと思います。 CloudWatch RUM について RUMはReal-User Monitoringの略で、その名の通り 実際のユーザーからみたWEBアプリケーションのパフォーマンスをモニタリングすることができます。 モニタリングできる情報は以下のようなものがあります。 ページの読み込み時間に関する詳細な情報 クライアント側で発生しているエラー情報 ブラウザやデバイス毎でのパフォーマンスの違い ユーザーの行動データ New RelicやDataDogなどのツールでは、以前からこのような情報を収集する
FacebookログインのJavascriptのSDKをサクッと試す方法 | Casual Developers Note
最近ではスタートアップ企業がログイン機能を付ける場合、名前とメールアドレスを利用した通常のログインを実装するのではなく、ソーシャルログインを実装するのが一般的になっています。これはログイン機能が本質的に価値を提供しないにもかかわらず、必ずサービスには必須なので低コストで実装したいという企業側と、新しいサービスを利用するたびに新しいアカウントを作りたくないというユーザ側の双方にメリットがあるからです。今回はソーシャルログインの中でも最も人気のあるFacebookログインを実装する前段階として、JavascriptのSDKを試す方法を紹介します。 ソーシャルログインとは？ ソーシャルログインとは、Facebook、Google、Twitter、LINEなどのSNSをすでに使用しているユーザが、新しいサービスを利用する時に新しくアカウントを作らずに、元々持っていたSNSアカウントを利用してログイ
JavaScript で Facebook ログインを使用して認証する | Firebase Authentication
フィードバックを送信 JavaScript で Facebook ログインを使用して認証する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Facebook ログインをアプリに統合して、ユーザーが Firebase での認証に Facebook アカウントを使用できるようにすることができます。Facebook ログインを統合するには、Firebase SDK を使用してログインフローを行うか、または Facebook ログインフローを手動で行って、取得したアクセス トークンを Firebase に渡します。 始める前に Firebase を JavaScript プロジェクトに追加します。 Facebook for Developers サイトで、アプリのアプリ ID とアプリ シークレットを取得します。 Facebook ログインを有効にします。 Fi
ゲーム感覚でプログラミング学べるサービス集 - Qiita
はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログラミング」です。 ぷよぷよプログラミングでは、人気ゲームぷよぷよを開発しながらHTMLやCSSやJavaScriptといったプログラミングをしていく中で基礎となる技術を学ぶことができます。 実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時
JavaScriptコードを整形 - 使いやすいドットコム
Formatter JavaScriptコードを整形 JavaScript Formatter JavaScriptコードを整形できる、使いやすいツールです。
input type="file"でファイルをアップロードする方法｜HTMLリファレンス
<input type="file" name="example" accept="image/jpeg, image/png">
2021年に知っておきたいJavaScript最適化技術34選 - Qiita
最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。 開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。 JavaScript開発に長く携わっている人でも、コードを追加しなくても問題解決できるような最新機能を知らないこともあるかもしれません。ここで紹介するものは、クリーンで最適化されたJavaScriptのコード記述にも、2021年のJavaScriptの面接準備にも役立ちます。 これは新しいシリーズで、2021年版のJavaScriptコーディングチートシートです。 1. 複数の条件を持つif 配列に複数の値を格納し、includ
JavaScriptだけでExcel風のスプレッドシートを開発できる「jExcel」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptで簡単にExcelのようなスプレッドシートを作成できるライブラリをご紹介します！ 基本的な操作はすべてJavaScriptから制御可能であり、自分の好きなようにカスタマイズできる強力な機能が多数提供されています。また、簡単なプログラムだけでファイルの書き出し機能が利用できるなど便利なメソッドも多く含まれています。 自作のWebアプリなどにも手軽に組み込めるので、ご興味ある方はぜひ参考にしてみてください。 なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください。 【 jExcel 】 ■「jExcel」の使い方 それでは、まず最初に「jExcel」の導入方法から見ていきましょう！ 全部で3通りの方法が以下のように提供されています。
【JQuery】 オンラインWYSIWYGエディターを実装するなら「summernote（サマーノート）」がベストかも！ | ドラブロ – let bygones be bygones –
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>WYSIWYGエディターサンプル</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link href="http://netdna.bo
ブラウザ上で使えるJavaScript製テキストエディタAce入門 - Qiita
Aceとは ブラウザ上で使えるJavaScript製のテキストエディタです。貧弱なテキストエリアの代替として使うと便利です。特徴として、 100言語以上のシンタックスハイライト Sublime風、Chrome DevTools風など、自由に選べる多数のテーマ マルチカーソル リアルタイム構文チェック などなど、スタンドアロンのエディタと比べても決して引けをとらない高機能なエディタです。 公式サイト 詳しい使い方を知りたいならばAPI Referenceから。 サンプルサイト 各種パラメータの効果を見た目で確認することが出来ます。 インストール 今回のサンプルでは全てCDNを使用しますので何もインストールする必要はありません。 ダウンロードして使いたい場合は https://github.com/ajaxorg/ace-builds/ ←こちらから。 最小のサンプル <!DOCTYPE ht
苦しんで覚えるDraft.js -リッチテキストエディタをシュッと作る- - Qiita
株式会社LITALICOでWebエンジニア（Rails）を担当しています、@YudaiTsukamotoです。 この記事は『LITALICO Advent Calendar 2017』1日目の記事です。 記念すべき1記事目は、Facebook謹製のリッチテキストエディタフレームワークのDraft.jsについて書こうと思います。 はじめに 弊社では、conobie, LITALICO(りたりこ)発達ナビ, U2Plusを始めとするメディアを中心としたWebサービスを複数運営しております。様々な歴史的な経緯で、記事編集画面をスクラッチで実装しているのですが、以下のような辛さを抱えています。 記事UIパーツの修正・追加をする事が結構しんどい 書いた見た目と表示される見た目が異なるので、いちいちプレビューを見ないといけない Undo/Redoなどの履歴管理が辛い コンテンツの順序を変更することが辛
完全カスタマイズOK！ブロックスタイルのテキストエディタを開発可能な「Editor.js」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Mediumなどにも採用されているブロックスタイルのテキストエディタを開発できるJavaScriptライブラリをご紹介します！ ヘッダー要素・リスト・画像など、それぞれのコンテンツを独立したブロックで管理することができ、保存時の出力はクリーンなJSONデータとして取得することができます。 また、簡単に開発できるプラグインにより、欲しい機能を好きなだけ拡張していくことも可能なので、オリジナルのテキストエディタにご興味ある方はぜひ参考にしてみてください！ なおpaizaラーニングでは、JavaScriptの基本が学べる講座「JavaScript入門編」を公開しています。そちらも合わせてチェックしてみてください。 【 Editor.js 】 ■「Editor.js」の導入方法 それでは、最初にEditor.jsをどのように使えばよいのかを見て
JavaScriptで自分だけのWeb製作エディタを構築できる「GrapesJS」を使ってみた！ - paiza開発日誌
どうも、まさとらん（@0310lan）です！ 今回は、ドラッグ＆ドロップで誰でも簡単にWebサイトを製作できるサービスのご紹介です！ そのままでもWebオーサリングツールとして大変便利なのですが、JavaScriptで好きなようにカスタマイズしてオリジナルのエディタを開発＆公開できるという面白い特徴があります。 現在、オープンソースとして活発に開発が進められているので、ぜひこの機会にみなさんも試してみてください！ 【 GrapesJS 】 ■「GrapesJS」の使い方！ それでは「GrapesJS」を使ったWeb製作エディタがどのようなツールなのかを見ていきましょう！ トップページにある「Webpage Demo」というボタンからアクセスすることができます。 登録なども不要で、すぐにブラウザ上で「エディタ」が表示されます。 この画面上で、自分の好きなようにWebサイトを製作することができ
【Javascript】リアルタイムプレビュー付き簡易htmlエディタ - Qiita
今回はJavascriptを使ってhtml作成をある程度楽にする簡易エディタをつくりたいと思います。 似たようなhtmlファイルを大量につくりたいならいいかも 内容をゴリゴリ書くなら然程労力は変わらないと思う… プレビュー 必要最低限の機能しか実装してないけどちょっと工夫すれば そこそこ実用的なものが作れるかと思います。そして楽！ クリックでデモページのzipファイルダウンロード Win,MacのChromeでのみ動作確認済みです 10/17 リンク間違ってました…ごめんなさい ソースコード <html> <head> <title>qiita_js003</title> <meta charset="utf-8"> <meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=2.0"> <style
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【完全ガイド】LINEミニアプリ開発からデプロイまでを丁寧に解説 | ギークの逆襲 🐟
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」 - Qiita
Latest Free WYSIWYG Editors In JavaScript - CSS Script
