SNSシェアボタンをHTMLとJavaScriptでつくる【Twitter/Facebook/LINE/hatena/pocket】
ブログやメディアサイトではほとんどが実装しているSNSシェアボタン。 公式のプラグインを使うと、簡単にシェアボタンを作成することができます。 しかし、デザインがプラットフォームによってバラバラであることや文言の調整が難しい点からスクラッチでつくりたいなーと思い、CSSで自由にカスタマイズ可能なHTML側のコピペ用SNSシェアボタンのコードをまとめてみました。 スクラッチでつくれば、統一したデザインでつくれるので、ぜひ参考にしていただければと思います。 SNS ボタンをスクラッチでつくる際の注意点 ボタンをつくってデザインを編集する際、一旦SNSのプラットフォーム側のブランドガイドラインを確認しましょう。 公式のブランドガイドラインには、アイコンを斜めにしてはいけない・視認性の悪い組み合わせにしない等のルールが書いてあります。 あと、現在開いているページのURLをシェアするにはJavaScr
FacebookログインのJavascriptのSDKをサクッと試す方法 | Casual Developers Note
最近ではスタートアップ企業がログイン機能を付ける場合、名前とメールアドレスを利用した通常のログインを実装するのではなく、ソーシャルログインを実装するのが一般的になっています。これはログイン機能が本質的に価値を提供しないにもかかわらず、必ずサービスには必須なので低コストで実装したいという企業側と、新しいサービスを利用するたびに新しいアカウントを作りたくないというユーザ側の双方にメリットがあるからです。今回はソーシャルログインの中でも最も人気のあるFacebookログインを実装する前段階として、JavascriptのSDKを試す方法を紹介します。 ソーシャルログインとは？ ソーシャルログインとは、Facebook、Google、Twitter、LINEなどのSNSをすでに使用しているユーザが、新しいサービスを利用する時に新しくアカウントを作らずに、元々持っていたSNSアカウントを利用してログイ
input type="file"でファイルをアップロードする方法｜HTMLリファレンス
<input type="file" name="example" accept="image/jpeg, image/png">
【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
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
あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
HTML5のCanvasを簡単に高機能化してくれるJSライブラリ「Fabric.js」
こんにちは、渡辺です。 HTML5のCanvasを簡単に高機能化してくれるJSライブラリ「Fabric.js」を紹介します。 Canvas上に描いた絵をマウス操作で動かしたり、拡大縮小する機能が標準で付いていてスゴい便利なライブラリです！ まず、このライブラリの主な特徴についてです。 ■特徴 ・インタラクティブ性 Canvas上に描いたものをマウスやタッチで自由に操作できます（ドラッグ、拡大縮小、回転）。 ・Canvasに描いた内容をオブジェクトとして扱える Canvasに描いたものをgetメソッドやsetメソッド経由で設定変更できます。 ・Canvasのシリアライゼーション・デシリアライゼーションのサポート Canvas上の内容をJSONまたはSVGに変換でき、再度インタラクティブな描画内容を復元することができます。 ■準備 1. ライブラリのダウンロード https://github.
HTML5のcanvasを使ったお絵かきツール詳説
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
マルチタッチを実装してCanvasに3本指で線を引くサンプル | キリウ君が読まないノート
JavaScriptでマルチタッチ実装するサンプルです。複数本の指でCanvasに線を引けて、途中で指を増やしたり減らしたりしても大丈夫なはずです。 指が接地してるかぎり、Touch.identifier が変わらないのを利用してます。指が接地したときに identifier を覚えておき、指が離れたときに覚えておいた identifier を削除します。よって、実装上保持できるようにした identifier の数 ＝ マルチタッチ可能な上限数ということになります。 ちなみに identifier は、Chrome (ver65.0.3325.181) の開発者ツールだとゼロが設定されてました。手元のiPhone 6Sだと、結構大きい桁数の連番だったような気がします。なのでゼロが来ることは一応考慮しておき、かつ identifier の具体的な数字に依存した実装も避けます。 しかしこれ
手書きホワイトボードの説明
手書きホワイトボードの説明 2013.9.10 作成 2016.2.14 改訂 パソコンやタブレットの画面に、マウスや指で手書きできます。 但し、HTML5非対応のブラウザ(IE8など)はNGです。 書き込んだ内容を、ワンタッチで一括消去でき、跡が残らないのが特徴です。 ＰＣ(マウスドラッグ)でもタブレットでも手書きができます。 タッチパネルの場合、「クリック」を「タップ」と読み替えてください。 色ボタンをクリックすると色を変更できます。 線幅ボタンをクリックすると線幅を変更できます。 「全面」ボタンをクリックすると、設定色で画面を塗りつぶすことができます。 「消去」ボタンをクリックすると、画面を一括消去できます。
Awesome JavaScript : 素晴らしい JavaScript のライブラリ・リソースの数々 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 元記事: Awesome JavaScript Awesome List in Qiita Awesome Ruby Awesome Java Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium パッケージマネージャ JavaScript ライブラリをホストし, それらを取得してパッケージ化するためのツールを提供します npm - npm は JavaScript のためのパッケージマネージャです. Bower - Web のためのパッケージ
とほほのBootstrap 3入門 - とほほのWWW入門
とほほのBootstrap 3入門 トップ Bootstrap 3入門 はじめに このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap とは Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
<input> - フォーム部品：入力欄 - とほほのWWW入門
形式 <input type="..."> サポート LS / H2 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2 / i1 カテゴリ フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ(※1) パルパブルコンテンツ(※1) リステッド, ラベラブル(※1), サブミッタブル, リセッタブル, リアソシエイタブル, フォーム関連要素 ※1 type=hidden 以外の場合 親要素 フレージングコンテンツ を子要素に持てるもの 子要素 無し(Empty) タグの省略 開始タグ:必須 / 終了タグ:無し 属性 グローバル属性 accept alt autocomplete autofocus checked dirname disabled form formaction formenctype formmethod formnovalidate fo
とほほのAngularJS入門 - とほほのWWW入門
AngularJS と Angular は別物です。バージョン 1.x を AngularJS、2.0 以降を Angular と呼びますが、根本から作り直しているので互換性はありません。AngularJS は 1.8.x で開発を停止しており、2021年12月31日にサポートも停止されました。現在は拡張LTS (XLTS) のフェーズにはいっています。(2022/1/2追記) AngularJSとは？ サンプル フィルタ モジュールとコントローラ リスト リストフィルタ アクション フォームバリデーション もう少し複雑なサンプル {{...}} をそのまま表示するには リンク AngularJSとは？ AngularJS は、下記の様な特徴を持つ JavaScript フレームワークのひとつです。 Google社とコミュニティが開発するJavaScriptフレームワーク ライセンスはMI
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Latest Free WYSIWYG Editors In JavaScript - CSS Script
https://codeday.me/jp/qa/20190311/374216.html
https://codeday.me/jp/qa/20190103/102961.html