2019年10月30日ウェブ開発に役立つウェブサービス全7件を紹介します!さてさて、このブログが移転する前の話になるのですが、ウェブ開発をするための時短テクニックをまとめて公開したことがありました。そのまとめの中には「英語」を入れたのを覚えています。言うと、特にコンピュータ業界の最新情報を集めるには英語の方が有利ですし、何より世界中の便利サイトが使えるようになるからなんです。(かっこよく言ってますが、正直読み書きぐらいしか英語はまともにできません。聞く・話すは片言ですかね・・・もっと訓練しなきゃです😅)そして、今回はそんなサイトの中から私が実際によく使うウェブ開発向けのサービスをご紹介してみたいと思います。英語のサイトですが、比較的直感的に使えるのでぜひ試してみてくださいね。platformsを紹介します。href="*****">と思われた方もいらっしゃるかもしれません。10のタイルの色などに対応させることができますし、さらに必要な全サイズのファビコンを作成してくれます。picture(ファビコンにする画像を選んでください)」というボタンがあるので、これをクリックして画像を選択します。picture(この画像で試してみる)」というボタンでもOKです。するとページが移動することになるのですが、ここでは以下4つのプラットフォームでのファビコンの見え方を表示してくれることになります。10MacOS(Safari)例えば、iOSの設定を見てみましょう。次のように設定を変更するとサンプル表示してるファビコンがリアルタイムで変化してくれます。Code(ファビコンとHTMLタグを作る)」というボタンをクリックしてください。.....」のラジオボタンを選択し、その階層を入力してからボタンをクリックしてください。ボタンをクリックすると、以下のような表示になります。package」と書かれたボタンをクリックするとファビコン一式が入ったzipファイルがダウンロードされますので、開発中のサイトに全てのファイルを展開してください。(サイト直下に設置しない場合は適宜場所を変えてください)そして次に、その下にあるHTMLタグをコピーしてウェブサイトの<head>〜</head>内に追加しましょう。--></body></html>これで、ブラウザでアクセスしてファビコンが表示されれば成功です。キャッシュが原因でファビコンに変化がでない可能性もありますが、その際は直接https://******/favicon.icoにブラウザで直接アクセスしてキャッシュを更新するといいでしょう。platforms各ブラウザ・アプリでの表示サンプルがある絵文字サーチエンジン続いては、emojipediaという絵文字の検索エンジンなのですが、私がこのサイトを気に入っているのは、各ブラウザの表示サンプルがついているという部分です。笑顔の絵文字のページを見てみましょう。このように各プラットフォームでの表示の違いが一目瞭然です。(この記事を書いている2019.10.30現在では14パターンあります)そのため「あ、この絵文字はブラウザ間での差が大きいから使うのはやめとこうかな」という風にして絵文字を探したりします。HTML上で絵文字を使いたい場合は以下のような形式でもOKです。&#x1F600;もし上の形式を使いたい場合は、Codepointsという部分から+より後の部分を切り出すといいでしょう。Awesomeなどのアイコン・フォントを画像化してダウンロードすることができるサイト、fa2pngです。クライアントさんから「何でもいいので、ファビコンは適当なものをつけといてください😊」という風にご依頼があった場合は、このサイトでアイコンを画像化してファビコンとして使っています。(1番目で紹介したサイトでファビコン化します)使い方は簡単で、まず画面左の一番上のボックスでアイコンを検索します。入力ボックスにキーワードを入力すると以下のようにリストが表示されるので気に入ったものを選択します。後は色やサイズを選択して「Generate」ボタンをクリックします。すると、プレビュー画像がページ右側に表示されます。これで良ければ、「Download」ボタンをクリックしてダウンロードしましょう。fa2pngある色の明暗を変えたリストを表示してくれるサービス例えば、あるページを作っていて「うーん、ここの色ちょっと濃すぎるから薄くしよう」ってなることって結構多いと思うんです。これって結構めんどうだったりします。色が16進数で書いていた場合、1つずつ数字をずらさないといけないからです。(→2段階薄くする→)#BA6262しかも、一発で良い色が見つかるわけでもないですよね。そこで、この作業を簡単にしてくれるのが、0to255というサービスです。このサービスはある特定の色を指定すると、その色の明暗を変えた色リストをずらっと表示してくれます。使い方は、サイトにアクセスして右上にあるボックスに色を入力して送信するだけです。すると以下のように色を表示してくれます。各色をクリックするとクリップボードにコピーされます。AwesomeやGlyphiconsなどのフォント・アイコンを検索することができます。Awesomeだけだったり、対応しているパッケージが少なかったりするのでここはとても重宝しています。対応パッケージは次のとおりです。AwesomeFoundationGlyphiconsIcoMoonIoniconsMaterialOcticons使い方は、ページ左にあるボックスにキーワードを入力するだけです。(しかも、関連するアイコンもピックアップしてくれるので少しぐらいキーワードが間違っていてもうまく検索できる場合も多いです)キーワードを入力するとページ右側にアイコンのリストが表示されますので、クリックすれば内容がコピーされます。コピーされる内容のサンプルは以下のとおりです。fa-exclamationNameexclamationUnicode(Unicodeなので上手く表示できません。JS)を検索することができます。そのため、Bootstrapでちょっとしたデザインをする必要がある場合は、ここで探したものを参考にすることができると思います。使い方はページ上部にあるボックスにキーワードを入力して送信するだけです。Bootsnipp膨大な画像、イラストがダウンロードできるサイト有名なサイトなので知っている方も多いかもしれませんが、pixabayは大量のフリーの画像やイラストをダウンロードすることができるサイトです。pixabayのライセンスは商用・非商用を問わずに利用OKで、さらにクレジット表示する必要もありません。フリーですが、ダウンロードした時に寄付や作成者へのリンクを貼ることでお返しすることもできます。pixabayおわりにということで、今回はいつものプログラムの記事とは違ってサイト開発に便利な海外サービスのまとめをお届けしました。いったサービスを使っていけば、作業効率も上がりますので開発業務が少し楽になるんじゃないでしょうか。皆さんも活用してみてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。