Responsively App - レスポンシブWebデザインを効率化
レスポンシブなWebサイトを開発する際には、様々なデバイスでの表示を一気に確認できると便利です。デバイス毎に画面幅が数多くあるので、それらをまとめて表示確認して調整していくという作業が不可欠です。 今回紹介するResponsively Appはそうした表示をまとめて行えるアプリになります。スクロールやイベントの追従もできます。 Responsively Appの使い方 立ち上げました。iOS系とノートPCでの表示をテストしています。 Webサイトを変えると、全体に反映されます。 表示を横に並べる形にしました。 表示するデバイスを選択します。カスタムサイズも可能です。 表示するデバイスを絞り込めます。 横向きに変更しました。 デバイスを指定して開発者ツールを開けます。 Responsively Appはクリックイベントをすべての表示に対して適用したり、ホットリロードにも対応しています。サイト
mobileSelect - モバイル特化型のドロップリスト
スマートフォンとデスクトップでは画面の大きさが異なるため、最適なUI/UXが異なります。しかしWebは基本的に共通のコンポーネントとなっており、JavaScriptやCSSで工夫しなければなりません。 よく使われる割にUXがいけてない、セレクトをスマートフォン向けにいい感じにしてくれるmobileSelectを紹介します。 mobileSelectの使い方 デモです。選択肢が一つの場合。 複数の選択肢がある場合。 こんな複雑なものも。ダイヤル式ロックのようです。 さらに複数の選択肢を連携させることもできます。 最初の選択肢によって次の選択肢が出る場合と出ない場合を作れます。 mobileSelectはスマートフォンに特化したUI/UXになっています。特に複数選択肢を一度のドロップダウンで行えるのは便利です。PC向けには別途作成する必要がありますが、スマートフォンアクセスが多い場合やハイブリ
レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize
Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。 完全無料で利用でき、登録など面倒なことは一切不要です。 everysize everysizeの特徴 everysizeの使い方 everysizeの特徴 everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツールです。さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています。 ブラウザベースのオンラインツールなので、OSを問わず利用できます。 Chrome, Safari, Edgeは問題なし、IE11はダメでした。
テレワークのミーティングに役立つツールが全部無料で使える！Adobe XDの協業用プラグインが登場 -Whiteboard
テレワークで困るのが、複数人でのミーティングやアイデア出しなどの意見を交わす場を持てないことです。Adobe XDの便利なプラグインが登場しました！ Whiteboardの名の通りホワイトボードをはじめ、ブレインストーミング、カードソーティング、ワイヤーフレーム、フローチャート、マインドマップなど、Webサイトやスマホアプリのミーティングで使用するさまざまなツールが簡単に利用できます。 複数人での使用はもちろん、個人で使用するのにも便利です。 Adobe XDのビジュアル協業プラグイン「Whiteboard」 Adobe XDのプラグイン「Whiteboard」とは Adobe XDのプラグイン「Whiteboard」のダウンロード Adobe XDのプラグイン「Whiteboard」の使い方 Adobe XDのプラグイン「Whiteboard」とは Adobe XDはAdobeユーザーは
FontGoggles - フォントを並べて比較する
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました どのフォントを使うかによって、受け手で感じる印象はまったく違います。とはいえ、フォントがまったく違うコンセプトでできているならばまだしも、ちょっとした違いしかない場合にどちらを採用するかは難しい問題です。 そこで使ってみたいのがFontGogglesです。フォントを比較表示できるソフトウェアです。 FontGogglesの使い方 フォントをドラッグ&ドロップで登録して、同じテキストで比較できます。 日本語も使えます。 マージンやフォントサイズを変更して比較もできます。 デザイナーであればフォントの比較はよく行うでしょう。開発者であっても、プログラミングフォントを比較して自分にあったものを選ぶことができます。各文字の細かな情報も得られるので、フォント選択時に役立ててください。 Fon
インストールやユーザー登録一切不要でスクリーンキャストをリアルタイム共有できる・「Screen Share Party」
Screen Share Partyはインストールやユーザー登録一切不要でスクリーンキャストをリアルタイム共有できるWebアプリです WebRTCが採用されており、ブラウザのみで完結可能で、エクステンションやソフトウェアのインストール等、ユーザー登録やログインなども一切不要となっています アクセスするとチャットツールのように部屋が自動作成されるのでこのURLを共有相手に伝えればいいだけです あとはClick to Share Your Screenを押せばデスクトップ上で起動中のアプリや画面全体などの選択肢が出るので選べばいいだけ 最大10人までですが、動画配信などよりもハードルは低いのは気軽でいいですね。チーム間のナレッジ共有なんかに一役買ってくれそうです Screen Share Party
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
完全無料＆インストール不要でビデオチャットが可能なオープンソースのオンライン会議ツール「Jitsi Meet」レビュー
オープンソースで開発されている「Jitsi Meet」は、多人数同時ビデオ通話を可能にするWebRTC JavaScriptアプリケーションです。アカウントを作成したり、コンピューターにクライアントソフトをインストールしたりする必要はなく、ウェブブラウザやスマートフォンから完全無料で、セキュアなビデオチャットが利用可能。さらに、Googleカレンダーと連携させることでイベントに応じたチャットルームを作成することができます。 Jitsi Meet https://meet.jit.si/ jitsi/jitsi-meet: Jitsi Meet - Secure, Simple and Scalable Video Conferences that you use as a standalone app or embed in your web application. https://gi
Barrier - 一組のキーボードとマウスで複数台のPCを操作
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 机の上に複数台のPCを置いている人は珍しくありません。しかし、複数台あるとキーボードとマウスもその台数分必要になります。取り違えれば、別なマシンを動かしてしまったりします。これはとても面倒です。 そこで使ってみたいのがBarrierです。複数台のPCを一つのキーボードとマウスで操作できるようになります。 Barrierの使い方 一台がサーバ、他はクライアントとして接続します。 クライアントが立ち上がると自動的に接続が開始されます。 macOSの場合、セキュリティ設定も必要です。 Barrierはこの手のソフトウェアとして有名なSynergyのコア部分を使って作られています。Synergyは有償ソフトウェアになったので、オープンソースで使い続けたい方はBarrierがいい選択肢になる
無料で同時1000人・最長6時間のオンライン会議ができる「FreeConferenceCall.com」は専用アプリなしでも音声・ビデオ通話に参加できるリモートワークの強力な味方
新型コロナウイルスの感染拡大に伴い、多くの企業が可能な範囲内で従業員にリモートワークを推奨しています。そんなリモートワーク時に必要となるのがオンライン会議ツールで、中でも群を抜いて多い同時接続可能者数を誇り、かつ無料で利用できるというサービスが「FreeConferenceCall.com」です。オンライン会議に参加するだけなら、専用アプリをインストールすることなくウェブブラウザや通話から気軽に参加可能という優れものとなっています。 Free Audio Conferencing | FreeConferenceCall.com https://www.freeconferencecall.com/ ◆アカウントの作成 FreeConferenceCall.comは無料でアカウントを作成するか、Facebookアカウントでログインすることで無料の会議ツールが使えるようになります。今回は無料
やめよう、CSSのシステムデフォルトフォント指定 - Chienomi
序 ウェブをブラウジングしていると、嫌というほど見る 無意味にひたすらシステムフォントを列挙している 同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定する という苦痛極まりないフォント指定をしているCSSをよく見かける。 ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。 それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。 ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。 起 話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。 それ以
V６プラスルーターと PPPoE ルーターを併用する
２０１９年９月現在、ルーターは YAMAHA RTX830 に替えて、１台で V６プラス + PPPoE 設定になっています。 RTX830 は実勢価格で ５万円弱しますので高いと感じられるかも知れませんが、私はなぜもっと早くから買わなかったんだろう、というくらい気に入っています。 信頼性・安定性が一番、機能が大変豊富で一般利用にはもったいないくらいですが、某B社や、某N社、某IO社、某ELE社などのルーターがいかに劣っていたのかを実感しました。 最近の記事にはこの RTX830 に関する記載をしています。 V６プラスの場合、使えるポートの制限から使えないサービスが出てきます。 このブログでも触れた PPTP、L2TP/IPsec や、一部ゲーム、一部の IP 電話（nifty フォンなど）などが使えません。 これらを使うために PPPoE と V６プラスの併用が必要になることがあります。
無料でIFTTTやZapierっぽく全自動連携できる「n8n」を自サーバー上に構築してみた
複数のウェブサービスを連携し、定型作業を自動化してくれるサービスはIFTTTやZapierが有名ですが、特定のサービス以外は使えなかったり、有料プランでしか使用できない機能があったりします。オープンソースで使える自動化サービス「n8n」は無料で利用でき、自社製ソフトのような他の自動化サービスでは未対応のサービスも自動化できるとのことなので、実際に使ってみました。 n8n.io - Workflow Automation https://n8n.io/ まずはn8nのホームページにアクセスします。 ホームページ下部へと進むとインストール方法が記載されていました。今回はWindows 10の機能の一つであるWSL上のUbuntuにn8nをインストールします。 n8nを動作させるにはNode.jsが必要なので、記事作成時点で最新の推奨バージョンのNode.jsをインストールしておきます。 Nod
Browser Chooser - Webブラウザを手軽に切り替える
Webブラウザを必要に応じて切り替えている人は多いのではないでしょうか。開発用途、普段のブラウジングはもちろん、特定のサイトの場合だけIEを使わないといけない人もいそうです。 そんな方たちにお勧めしたいのがBrowser Chooserです。Webブラウザを自由に切り替えできます。 Browser Chooserの使い方 設定を促されます。 デフォルトブラウザをBrowser Chooserにします。 利用するブラウザを設定します。 そしてURLを開く際にWebブラウザを選択します。 Browser ChooserはURLごとに表示するWebブラウザを記憶できます。普段はGoogle Chromeにしつつ、特定の開発時にはFirefoxに切り替えるといった操作が手間なくできるでしょう。 Browser ChooserはVB.NET製のオープンソース・ソフトウェア（Microsoft Pub
Responsive Viewer - レスポンシブWebデザインをまとめて確認
レスポンシブなWebデザインが当たり前になっており、その表示確認が大変になっています。Webブラウザの幅を変えたり、スマートフォンやタブレットでの表示を確認したりしている方は多いでしょう。 そうした手間を減らせそうなのがResponsive Viewerです。一気に複数デバイスでの表示を確認できます。 Responsive Viewerの使い方 こんな感じでまとめて表示を確認できます。 幅が広いタブレットでの表示も確認できます。 クリック連動で、一つの画面でリンクをクリックすればすべての表示が変更されます。 インスペクタで全デバイスでの要素の場所を確認できます。 横方向での表示確認も。 Responsive Viewerを使えば指定したデバイスでの表示をまとめて確認できます。スクロール追従もできるのですが、筆者環境ではうまく動きませんでした。デバイスの種類は追加できますので、Android
PWA asset generator - PWA用のアイコン/スプラッシュスクリーン用画像を一気に生成 MOONGIFT
PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。 そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなければならない作業です。そこで使ってみたいのがPWA asset generatorです。 PWA asset generatorの使い方 PWA asset generatorを実行します。画像やSVGファイルを指定するだけです。 $ pwa-asset-generator new-org-logo.png 16:24:49 getSplashScreenMetaData Initialising puppeteer to load latest splash screen
イラストレーター 線の束をランダムに回転させる方法 - by Takumi Hirashima
Adobe Illustrator で線の束をランダムに回転させる方法を紹介します。 例えば、ちょっと変わった格子模様などを作りたい時に便利な方法です。 線の束をランダムに回転させる方法 線の束をランダムに回転させる方法 線の束をランダムに回転させるには、対象のオブジェクト（今回は複数の線のオブジェクト）を選択後、 メニューバーの「オブジェクト」＞「変形」＞「個別に変形」を選択します。 「個別に変形」は、選択した複数のオブジェクトを個別に変形することができます。 今回はランダムに回転させたいので、回転させたい上限の角度を入力。 次に「ランダム」のチェックをオンにします。そのほかのチェックは適宜変更を加えてください。 例えば、90度+ランダムと入力すると、現在のオブジェクトの位置を0度として、0〜90度までをランダムに回転させることになります。 まとめ Adobe Illustrator で
レスポンシブの確認が簡単になる！複数のスクリーンサイズで同時にできるChromeの機能拡張 -ResponsiveViewer
レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。 先日リリースされたばかりのResponsiveViewerを紹介します。 ResponsiveViewerはChromeの機能拡張で、無料で利用できます。 ResponsiveViewer -GitHub ResponsiveViewerのインストール ResponsiveViewerの使い方 ResponsiveViewerのインストール ResponsiveViewerのインストールは簡単です。 他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。 ResponsiveViewer -Chromeウェブストア ユーザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ファビコンを簡単に作成できる無料ツール！テキスト・画像・絵文字から生成でき、各デバイスのサイズにも対応 -favicon.io
IPv4 PPPoEとIPv6（v6プラス）を併用する | 小山電子
