SNSシェアボタンをHTMLとJavaScriptでつくる【Twitter/Facebook/LINE/hatena/pocket】
ブログやメディアサイトではほとんどが実装しているSNSシェアボタン。 公式のプラグインを使うと、簡単にシェアボタンを作成することができます。 しかし、デザインがプラットフォームによってバラバラであることや文言の調整が難しい点からスクラッチでつくりたいなーと思い、CSSで自由にカスタマイズ可能なHTML側のコピペ用SNSシェアボタンのコードをまとめてみました。 スクラッチでつくれば、統一したデザインでつくれるので、ぜひ参考にしていただければと思います。 SNS ボタンをスクラッチでつくる際の注意点 ボタンをつくってデザインを編集する際、一旦SNSのプラットフォーム側のブランドガイドラインを確認しましょう。 公式のブランドガイドラインには、アイコンを斜めにしてはいけない・視認性の悪い組み合わせにしない等のルールが書いてあります。 あと、現在開いているページのURLをシェアするにはJavaScr
【Windows11】CMDの文字コードをUTF-8に設定する方法 - Qiita
前書き 本手順は主に開発する際、Shift-jisだと都合が悪い時に行う手順です。 設定する際は自己責任でお願いします。 下記に記述される手順のいずれかを行えばCMDをUTF-8で起動できるようになります。 検証Windows環境：Windows 11 UTF-8設定方法 設定方法について 主に２パターンあります。下記のいずれを実行することでCMDをUTF-8に設定できると思われます。 個人的には画面設定からUTF-8に変更することを推奨しております。 Windowsに備わっている機能ということから、最低限の依存関係の変更も同時に行われると思うためCMDからの変更よりかは、安全だと思われます。 設定画面からUTF-8に設定する方法 Windowsボタンを押して設定画面を起動します 設定画面のサイドメニューの「時刻と言語」をクリックします 3. 「言語と地域」を選択します 4. 関連項目にあ
アイコンファイル（*.ico）作成 - Qiita
概要 アイコン（*.ico）ファイルの作成方法。 オンラインツールでアイコン作成 PNG画像をICO形式に変換する。 半透過マルチアイコンやファビコン(favicon.ico)作成 左側の青いボタンをクリックしてPNG画像を選択するか、ボタン上に直接PNG画像をドラッグ＆ドロップ。 （16×16と32×32ぐらいは用意しておきたいところ） そして「アイコン作成」ボタンを押す。 フリーソフトでアイコン作成 ＠icon変換 画像をICO形式に変換できるツール。 @icon変換（画像とアイコンの相互変換ツール） - towofu's SOFT ウィンドウの左側に画像をドラッグ＆ドロップして「単独アイコンに保存」ボタンを押す。 複数の色数・サイズに対応したマルチアイコンの場合は、必要な画像をドラッグ＆ドロップして、、、 アイコンにするファイルを選択状態にしたら「マルチアイコンに保存」ボタンを押す。
VB6開発環境をWindows 10にインストールする手順 – RIALAB.
福島県郡山市で生産管理や販売管理、EAP(従業員支援プログラム)業務支援など、オーダーメイドな業務システムの開発をしているエンジニアのサイト Windows 10上にVB6の開発環境を構築する必要があり作業を行ったのですが、そのときいろいろな問題が発生しました。 インターネット上には、Windows 10へVB6をインストールための様々な情報が公開されていますが、実際に試してみると公開されている情報と違う箇所や端折れる手順などがありました。 今回、実際に行った一連の作業を記事にまとめました。 確認を行った環境 Windows 10 Pro Version 1803 (64ビット版) Visual Basic 6.0 Enterprise Edition Visual Studioサブスクリプション(https://docs.microsoft.com/ja-jp/visualstudio/
[小ネタ] RDSのMulti-AZ構成を切り替える手順 | DevelopersIO
しばたです。 例えばですが、システム開発においてRDSを利用するにあたり開発期間中はSingle-AZ構成にしてランニングコストを節約、受入テストや本番稼働の際にMulti-AZにして可用性を確保するといった運用は良くあるかと思います。 本記事ではこういった場合のためにRDSのMulti-AZ構成を切り替える手順について解説します。 検証環境 本記事では私が慣れているRDS for Oracle(Oracle 19c SE2, db.m5.large)で説明します。 他のRDBMSでも基本同様の手順となります。 また、RDSを構成するネットワーク設定およびRDSインスタンス自体は構築済みの前提です。 1. Multi-AZ構成からSingle-AZ構成に変更する まずはMulit-AZ構成の環境をSingle-AZ構成にする方法を紹介します。 最初にマネジメントコンソールからRDSサービス
![[小ネタ] RDSのMulti-AZ構成を切り替える手順 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b6eedbd02faf420a06aa05ca78d478cfa7b4cca/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F05%2Famazon-rds.png)
サイトやアプリのUIデザインをする時に知っておくと良いアクセシビリティのこと - Qiita
アイコンを使う時のポイント できるだけアイコンだけでなくラベルをつける テキストではなくアイコンを使うと、スペースを削減できます。 また、アイコンのような視覚要素は直感的に機能を理解できます。 一方で、テキストラベルなしのアイコンにはいくつか課題があります。 例えばマイクのアイコンとマイクに取り消し線があるアイコンがある時、「今の状態を表している」のか「起こるアクションの内容を表している」のか判断がつきません。 しかし、「ミュートを解除する」「ミュートにする」というラベルをそれぞれ付け加えれば何が起こるかすぐに理解できます。 また、アイコンの意味を理解できたとしても「これはどういう意味だろう」「きっとこうだろう」と考える負荷がかかります。 他にも、形状が似ているアイコンを見間違えやすかったりアイコンの意味を推測するのが苦手な人もいます。 ラベルを付加することでこうした課題を解決できます。
スマートフォンアプリ・ブラウザ拡張機能
拡張ボタンからページ遷移なしでブックマーク！ ブラウザメニューのB!ボタンをクリックするだけで完了。 コメントやタグを付けて素早く保存できる公式ツールです。 使い方をみる
リモートデスクトップ接続で「お使いの資格情報は機能しませんでした」エラー (Windows 10) - Windows - Project Group
Windows 7 と同様、Windows 10 でもリモート接続時に以下のエラーが発生します。 対応方法は同じですが、Windows 10 の画面で記載します。 ================================================= お使いの資格情報は機能しませんでした リモート コンピューターの ID を完全に確認できないので、リモートコンピューター 192.168.0.1 へのログオンの保存された資格情報の使用はシステム管理者により許可されていません。資格情報を入力してください。 ================================================= 【設定方法】 キーボードの Windwos ロゴキーを押しながら「R」キーを押します。 クリックで拡大 「ファイル名を指定して実行」ダイアログが起動します。 「gpedit.msc
20年前の「障害の再発防止策の考え方」は今でも通用する説 - Qiita
障害の再発防止策は、 1. メカニズム 2. ツール 3. ルール 4. チェックリスト の順番に検討せよ。 上記は、私が20年前に所属していたパッケージソフト開発会社の標語です。 ※転職したので現在の所属会社ではありません。 当時はまだインターネットが今ほど普及しておらず、修正パッチはCD-Rで配布していました。 特に、データ破損系の障害の場合は、 お客様にファックスで障害内容を報告し、 緊急ホットラインを開設し、 データ異常が見られる場合はバックアップを預かって修正後に返却し、 上記と同時並行でバグの原因調査と修正を行い、 パッチをCD-Rに焼いて配布する。 という障害対応を行っていました。 各パッケージの利用社数は数万〜10数万社に上りますので、大変な騒ぎでした。 そして事後に、障害の再発防止策を検討し報告する義務が課されるわけです。 メカニズム 仕組みとして、障害原因を封じ込める対
自動テストツールKatalon Studioでテスト自動化 vol.01 - Qiita
ここではKatalon Studio Verion 7.1.1を使ってる前提で話しを進めます。 Katalon Studioとは何か？ ひとことで言うと、自動テストをサクッと作れるソフトウェア。 Seleniumを使って自動テストを行う場合、まず環境構築から始めなければならず、 それが色々と面倒ですが・・・ 自動テストしたい。という時に環境構築のこととか考えず、サクッとKatalon Studioインストールしたら環境作れるので楽。 他、検索すると、日本語で解説してくれてる方がいるので、そちらをご参照ください。 だいたいのことは無料版で可能、一部、有料版にしないとできない機能もある。 オフィシャルサイト https://www.katalon.com/ ざっくり言うと、テストで実行したい操作をRecordして、 自動でテストスクリプトを作成させ、テストを実行する。というやり方や、 テストコ
Webアプリケーションのテスト自動化 - Qiita
社内向け説明資料。SeleniumWebdriverを用いた自動テストの概要について。 基本情報 執筆：2018/07/23 更新：2020/01/16 OS:Windows10 Seleniumとは Webアプリケーションをテストするためのフレームワーク（ライブラリ）、といった書き方がしてあるサイトが多いが、「Webブラウザに特化したRPAツール」といった表現の方が理解され易いかもしれない。 できること ブラウザ上で人間が行う操作をプログラミングし「ブラウザ操作ロボット」を作ることで、Webアプリケーション開発時のテスト工数を節減できる。以下がメリットと考えています。 ボタン一つでテストが完了できる。（人間の作業が不要） 異なるブラウザでのテストが可能。(つくりによるが大抵は再コーディング不要) レガシーとなる。（費用の有効活用） Webアプリケーション開発を行う際のテスト工数は開発費用
一定期間より昔のGmailを自動的に削除する方法 (Google Apps Script を使う)
Google Apps Script を使って、一定時間より古い Gmail を自動的に削除するスクリプトを定期動作させる方法を書きます。 ちなみに、Google Drive の容量が不足している場合、Drive にメール以外の容量の大きなファイルがあるかもしれません。Google Drive にある容量の大きなファイルは、 https://drive.google.com/drive/quota こちらから一覧で見れます。 1. Google Apps Script のページを開く。 https://script.google.com/ もしログインしてなければ、「Start Scripting」のボタンを押してログインします。 2. 左上の「新しいプロジェクト」のボタンを押します。 3. 上の「無題のプロジェクト」をクリックし、「古いGmailを削除」にプロジェクト名を変更します。 下
iPhoneで画面録画（スクショ動画を撮影）する方法──音声あり・なし収録や、PCによるやり方、アプリ（iOS 10）を使った方法など | アプリオ
iOSの標準機能である「画面収録」を使うと、iPhoneの画面を動画で簡単に撮影（動画キャプチャ）できます。ゲームの実況や操作手順の説明などに動画がよく使われていますが、画面収録なら特別な機材なしでiPhoneの画面を動画スクショできるので便利です。 本記事では、iPhone単体で画面録画をする方法はもちろん、Macの「QuickTime Player」を使ってiPhoneの画面を高品質で録画する方法も解説します。 録画したい画面で、画面の右上隅から下にスワイプしてコントロールセンターを表示させる 録画ボタンをタップする（録画ボタンを長押しすると外部音声も取り込める） 3秒のカウントダウン後、画面録画が始まる コントロールセンターを再表示し、画面収録ボタンをタップして録画終了する（ダイナミックアイランドやステータスバーの赤ランプをタップ→[停止]ボタン、または画面オフでも可）
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
GitHubでスターが多いWYSIWYGエディタ（2019年11月） - Qiita
はじめに 2019/11時点でGitHubにあるWYSIWYGタグでスターが多いライブラリを調べてみます。 Quill 概要 GitHub https://github.com/quilljs/quill Demo https://quilljs.com/ ・テーブルの作成はできないようです(ver2.x用にテーブル追加のプラグインはある） ・クリップボードを経由して画像のアップロードが可能です。 ・highlight.jsを使用してコードブロックのハイライトが可能のようです 対象ブラウザ IEは非推奨のようです。 ライセンス BSD 3-clause サンプル 1.3.7のサンプル <!doctype html> <html> <head> <meta charset="utf-8"> <title>Test Quill</title> <!-- highlight.js を使う場合はq
アイコンマンメーカー
■アイコンマンメーカーとは 全国のサラリーマンの資料作成を支援するための、使い勝手の良い人物アイコンを手軽に用意できるツールです。 希望の画像と少し違う、デザインはいいけどパターンが足りないなどと延々素材画像を探してしまう そんな手間から開放されればいいなと思って開発しました。 ■使い方 上部の「髪型ボタン」や「服ボタン」をクリックすると選択したアイテムが表示されますので 希望のアイテム画像をクリックしてアイコンマンを着せ替えてください。 好みのアイコンマンができたら、左下の「画像保存ボタン」をクリックすると作った画像がダウンロードできます。 画像保存ボタンがうまく動かない場合は、表示されているアイコンマンを右クリックして画像を保存してください。 そのあとは作ったアイコンマンを資料に好きなだけ貼り付けてください。 ■利用規定 本ツールで作成した素材は規約の範囲内であれば、個人、法人、商用、
「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた｜Tsutomu Sogitani
大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2～3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使
失敗しづらいUIへのアプローチ - Qiita
「やっぱり自分にはUIは無理だ」 そう思う人もいるかもしれません。 でもちょっと待ってください。 実際に私が経験した失敗事例を聞いてください。 それで学びがあれば儲けもの、なければ「自分よりショボい奴がいるw」と思って自信を取り戻してください。 ＃私自身はデザイナーではないので、あくまでエンジニアがこれを知ってると便利なんじゃないというレベルのお話です とあるサイト作成の駄目UI サイトを作っていきながらダメな点を指摘していきます。 指摘は、センスによる美しさ的な指摘ではなく、ルールベースで誰にでも出来る内容の指摘です。 ということで、画面上部にメインのナビゲーションがあるサイトを作ってみます。 いきなり駄目ですねw メニューの文字と背景のコントラス比が薄くて読みづらいです。 暗めの背景の場合は明るめの文字にしましょう。 詳しくはエンジニアが知っておきたい色についてのお話を見てください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
組織図テンプレート無料配布｜エクセルで使える社内・プロジェクト用フォーマット
