どうも、まさとらん（@0310lan）です！ 今回は、Web開発を効率化したり便利にしたりしてくれるWebサービスを厳選してご紹介しようと思います。 プログラミング系、グラフ・チャート系、画像系、サイト構築系、分析・ログ系…など、幅広いジャンルから今すぐ活用できるサービスをまとめているので、ご興味ある方はぜひ参考にしてみてください！ ■GitHubのサイトから高機能なオンラインIDEを起動できるサービス！ 【 Gitpod 】 GitHubのリポジトリページから本格的な統合開発エディタを起動させて、ブラウザ上からプログラミングできるサービスが「Gitpod」です。 IDEにはターミナルも搭載されているので、コマンドの実行やGitの制御なども行えるうえGitHubのコードレビューにも対応しています。 使い方は簡単で、GitHubのリポジトリURLの前に「gitpod.io#」を付与するだけで

システムのステータスを視覚化することは、UIデザインの指針の中でも最も重要なものの１つです。 良いインタラクションデザインはフィードバックを与える アプリやWebサイトから即座に反応があれば１番良いですが、読み込みが遅いときもあります。反応が遅いのは、インターネットの接続が悪いせいかもしれませんし、オペレーションそのものに時間がかかっている可能性もあります。そのような場合、デザイナーは、アプリが実際に作動しておりリクエストに取り組んでいるということが分かるよう、ユーザーを安心させなくてはなりません。 アニメーションによる待機表示は、何か起こっている、もしくは読み込んでいる際に、ユーザーにシステムの状態を知らせる最も一般的な形です。しかしこれらの表示のほとんどは、クリエイターがただデフォルトで提供されているものを採用しているだけなので、見ていて面白くありません。

2022年4月27日 Webデザイン, XD Webサイトのデザインカンプを画像として作成…というのはもう昔の話。最近ではアニメーションの伴ったWebサイトやアプリばかりで、それを画像で説明するのはなかなか困難です。Adobe XDを使えばアニメーションを含めたプロトタイプが作成できますよ！ ↑私が10年以上利用している会計ソフト！ 作成するもの 今回はAdobe XDを使って、ローディングバーが動き、画面が推移し、スワイプで画像が切り替わる、というアプリのプロトタイプを作ってみようと思います。 Adobe XDの基本的な使い方は過去記事を参考にしてみてください： Adobe XDでWebデザインをしよう！画面作成からページ推移までの手順を紹介 Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた ローディングバーの作成 まずはベースとなる画面とロ

position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティです。 position: sticky;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。 CSS Position Sticky - How It Really Works! by Elad Shechter 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに position: sticky;はじめの一歩 position: sticky;の仕様 position: sticky;の便利な使い方 ブラウザのサポート 終わりに -参考記事 はじめに CSSのposition: sticky

難しいことをしなくてもイラストは描けます そもそもデザイナーじゃないんで、絵を描くのは難しいんじゃないかなと思っていたり、デザインはするけど、イラストを描くのはきびしい。illustratorでイラストを描いてみたいけど、なんだか難しそう。adobeCCを契約していてPhotoshopは使ってるけど、illustratorはちょっと、ハードルが高そう。と思っていませんか？ そういう人はコンピュータの力を使いましょう。illustratorなら、手書きのように何度も描いたりする必要はありません。どんどん直して調整すればいいんです。昔、習字であとから筆入れして、形を整える裏技使いましたよね？やり直しがきくんです。 illustratorには、ペンで描くような「ペンツール」がありますが、絵心がない人には、一番のハードルになるポイントでしょう。慣れるととても便利なツールなんですが、かなり癖がありま

何を解決したいか？ Mac, Windows, Linux, iPhoneやAndroidのスマホ・タブレットとかのデバイス間でデータの転送したいことがあります。 SlackとかLineとかSkypeとかAirDropとかあっても 送りたい相手と共通して使っているサービスを探す必要とか、 GUIのソフトウェアのインストールが必要とか、 AirDropだとApple系OSである必要 があるなどの転送の障壁があって、GUIが使えないデバイスに送りたいときなどは困ってしまいます。 すでにたくさんのファイル共有系のサービスがありますが、コマンドを使ったCUIベースにあまり親切な設計なものはあまりないと思います。 そこで、上記の問題を解決するために、以下のようなファイル転送の仕組みを作りました。 他デバイス間でデータ転送ができ、 別途ソフトウェアのインストール不要で、 パイプにとても親和性が高くエン

本題に入る前に、随分日にちがたった記事ですが、目に留まったので、大事なことだと思い言及させていただこうと思いました。 ameblo.jp ただ言及するにしても、別に反対の意見があるとか、批判の気持ちがあるのではなく、ただただ同意で注意喚起としてageさせてもらいたく、私自身もオンラインサロンというものに少し興味を持った身であるので、自戒を込めてこの記事をフィーチャーさせていただきたいという思いでこの記事を書いております。 さて、私のブログのスタイルですが、2005年くらいにはてなダイアリーで改変ブログというジャンルで躍起になって書いていた時期がございまして、引用元のブログの文体やメッセージをそのままにしつつも、自分の書きたいテーマに書き換えて記事を書いていたものでした。 もうそういった記事を量産することにも少々飽きがきたようで、最近では書きたいことがあっても書ける時間があるとは限らずに、投