タグ

ブックマーク / paiza.hatenablog.com (14)

  • インタラクティブなWebページを作り放題なNoCodeサービス「involve.me」を使ってみた! - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、インタラクティブなユーザー体験を作り出せるWebページを手軽に作れるサービスをご紹介します。 一般的なランディングページやアンケートフォームだけでなく、クイズで遊んだり任意のファイルをダウンロードできたりするページや、クーポン配布ページ、IQテスト、決済ページ…など、さまざまな機能を搭載したWebページをノーコード(NoCode)で開発できるのが特徴です。 既存のWebページやブログなどにも簡単な手順で埋め込むことが可能なので、ご興味ある方はぜひ参考にしてみてください。 【 involve.me 】 ■「involve.me」の使い方 それでは、「involve.me」をどのように使えばいいのか詳しく見ていきましょう。 まずはサイトのトップページからメールアドレスを入力してユーザー登録をしておきます。 次の画面でユーザー名やパスワードな

    インタラクティブなWebページを作り放題なNoCodeサービス「involve.me」を使ってみた! - paiza times
    hayasi-n
    hayasi-n 2020/07/30
  • 【2020年版】無料&商用利用可能なイラスト画像を提供するWebサービス8選を大公開! - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、Webサイトやブログなどで有効活用できる無料のイラスト画像を提供するサービスを厳選してご紹介します。 いずれも個人利用はもちろん、商用利用もOKなイラスト画像ばかりなうえ、ユーザー登録も不要なので手軽にダウンロードして使うことができます。 Webサイトに効果的なアクセントを追加したい人も含めて、ぜひ参考にしてみてください! 【 Open Doodles 】 印象的なデザインのイラスト画像を無料で提供しているのが「Open Doodles」です。 PNG / SVG形式の画像ファイルをダウンロード可能で、さまざまな用途のWebサイトやブログなどで有効活用できるものばかりです。 たとえば、Webサイトの単純なテキストであっても、以下のように画像を配置するだけで効果的なアクセントになるわけです。 また、ジェネレーター機能も提供されており、自分

    【2020年版】無料&商用利用可能なイラスト画像を提供するWebサービス8選を大公開! - paiza times
  • 思わずWeb開発で使いたくなる便利機能をAPIで提供するサービスを厳選してみた! - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、Webサービスやアプリ開発などで便利に使える機能をAPIで提供しているサービスを厳選してみたのでご紹介いたします。 画像系、ストレージ、CMS、認証系、APIモック…など、さまざまな用途に使えるサービスの特徴や基的な使い方も合わせて解説しています。いずれも無料で使えるものばかりなので、ご興味ある方はぜひ参考にしてみてください! ■イラスト風のアバター画像を取得できるAPI 【 Joe Schmoe 】 Webサイト、ブログ、SNSなどに利用可能なアバター画像を取得できるAPIです。 イラスト風の人物画像を取得できるのが特徴で、Webサイトのチームページにアバターとして利用できるほか、自分のプロフィール画像やブログに挿入する画像など無料で利用できます。 使い方は簡単で、以下のような構成のエンドポイントを実行するだけです。 https:/

    思わずWeb開発で使いたくなる便利機能をAPIで提供するサービスを厳選してみた! - paiza times
  • 簡単過ぎる!GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた! - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、Googleのスプレッドシートを利用して誰でも手軽にPWAアプリを開発して公開することができるサービスをご紹介します! スプレッドシートにデータを準備するだけなので、エンジニア以外の方でも簡単にアプリ開発を楽しむことができます。多彩な機能をグラフィカルなGUIで追加していくことも可能なので、ご興味のある方はぜひ参考にしてみてください! 【 Glide 】 ■「Glide」の使い方 それでは、まず最初にGlideをどのように使っていけばよいのかを見ていきましょう! サイトにアクセスしたら【Sign Up】ボタンをクリックして無償のユーザー登録を済ませておきます。 GlideはGoogleのスプレッドシートを利用するので、自分のGoogleアカウントから簡単にログインできるようになっています。 ログインが完了すると自分専用のダッシュボードが

    簡単過ぎる!GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた! - paiza times
  • 知らないと確実に損する!Web開発を効率化する最強のサービス8選をまとめてみた! - paiza times

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

    知らないと確実に損する!Web開発を効率化する最強のサービス8選をまとめてみた! - paiza times
  • Googleマップより簡単!JavaScriptで独自マップやナビ機能を作成できる「mapfit」を使ってみた! - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、簡単なJavaScriptコードを記述するだけでインタラクティブなマップを自分のWebサイトに設置できるサービスをご紹介します! Googleマップよりも手軽に扱えるのが特徴で、スクリプトを読み込んで少ないコードを記述するだけなので誰でも簡単に利用できると思います。 マップのカスタマイズやマーカーの設置、イベント処理、ナビ機能など…、それぞれの基的な使い方を詳しく解説していきます! 【 Mapfit 】 ■「Mapfit」の使い方 それでは、実際に「Mapfit」を使うために必要な準備から進めていきましょう! 「Mapfit」を使うには、専用のCSSファイルとJavaScriptファイルが必要になるのですが、これらはCDN経由で簡単に導入できるようになっています。 以下の「linkタグ」と「scriptタグ」をHTMLファイルに挿入す

    Googleマップより簡単!JavaScriptで独自マップやナビ機能を作成できる「mapfit」を使ってみた! - paiza times
  • 1タップで顔写真が生きているように動き出す画像認識アプリ「Mug Life」を使ってみた! - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、1枚の「顔写真」がまるで動画のように生き生きと動きだすユニークなスマホアプリをご紹介します。 高度な機械学習によって顔写真を高速に解析・分解することで、ハリウッド映画にも劣らない滑らかな3DCGを実現しているのが大きな特徴です。 【 Mug Life 】 (※2017年12月現在、Android版は開発中とのことです…) ■「Mug Life」の使い方 早速ですが、実際に「Mug Life」アプリを使いながらどのように顔写真が動き出すのかを見ていきましょう! とりあえず用意するのは「顔」が写っている写真だけです! そこで、サンプル例として「Pixabay」から顔写真を探してみます。 (Pixabayについて詳細はコチラ) 今回は、「男性の顔」が写っている写真を使ってみましょう。 (PCの画面に「顔写真」を表示しておいてください) 「顔写

    1タップで顔写真が生きているように動き出す画像認識アプリ「Mug Life」を使ってみた! - paiza times
  • ブラウザ上で超簡単にWebサイトが作れる!Bootstrap4対応のWeb制作エディタ「Pingendo」の活用ワザを一挙大公開! - paiza times

    どうも、まさとらん(@0310lan)です。 今回は、マウス操作で簡単に「Bootstrap4」に対応したWeb制作をブラウザ上で行えるサービス「Pingendo」をご紹介しようと思います。 以前から、PC向けソフトウェアとしてリリースされていましたが、最近になってベータ版ではあるものの「Chromeブラウザ」からでも利用できるようになりました! 【 Pingendo 】 「Pingendo」は、基的にマウスでポチポチとクリックしていくだけで、簡単に見栄えの良いWebサイトが作れてしまう便利なサービスです。 また、中・上級者向けにソースコードもすべて編集可能になっているので、自分好みにカスタマイズすることも出来るのが特徴となっています! ■基的な使い方! それでは、実際に「Pingendo」を使いながら、どのようなサービスなのかを見ていきましょう。 利用するにあたり、面倒な登録やインス

    ブラウザ上で超簡単にWebサイトが作れる!Bootstrap4対応のWeb制作エディタ「Pingendo」の活用ワザを一挙大公開! - paiza times
  • 地図アプリの開発を爆速化する「Webマッピング」サービスの活用術を大公開! - paiza times

    どうも、まさとらん(@0310lan)です。 今回は、地図上にデータをマッピングすることで、さまざまな情報を「見える化(可視化)」できるWebサービスの活用法についてご紹介しようと思います! マッピングが出来るようになると、単なる「データの集まり」だったものが視覚的にとても分かりやすくなるので非常に便利です。 誰でも簡単に扱える定番のマッピングサービスから、地図アプリなどの開発に役立つモノまで取り上げてご紹介しようと思います。 ちなみに、マッピングをするのに必要な「データ」に関しては、無償で利用できるオープンデータをまとめたサイト「LinkData」に公開中のモノを利用しているので、みなさんもぜひ一緒にトライしてみてください! ■「Googleマイマップ」を活用しよう! まずは、誰でも扱いやすいGoogleの「マイマップ機能」を使って、簡単なマッピングに挑戦してみましょう! データは、Li

    地図アプリの開発を爆速化する「Webマッピング」サービスの活用術を大公開! - paiza times
  • Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開! - paiza times

    どうも、まさとらん(@0310lan)です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか? Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います! ■多機能な「写真ギャラリー」を組み込めるライブラリ! ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指

    Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開! - paiza times
  • ゲームで遊ぶだけ!気付いたらプログラミングできるようになるサービス10選 - paiza times

    Photo by Carlos Sancho こんにちは。谷口です。 プログラミングの勉強を始めたばかり、またはこれから始めようとしている方々は、何を使って勉強しようと考えていますか? 今は学習サイトや書籍やスクールなど、自分に合ったスタイルで勉強できるようになっていますが、自分一人で勉強しようとすると、だんだん難しくなってきて挫折したり、一度難しいと感じてしまうとプログラミングが楽しくなくなってきたり……ということもあるかと思います。 そこで今回は、あまり勉強っぽくなく初心者でもゲーム感覚で楽しくプログラミングを学べるコンテンツを14個ご紹介いたします。 現在paizaではプログラミング×異世界ファンタジーRPG『ロジックサマナー~閃光の召喚プログラマ』を公開しています! 主人公はひょんなことから異世界に迷い込んだITエンジニア。異世界では、なんとプログラミングしたコードが召喚獣を呼び出

    ゲームで遊ぶだけ!気付いたらプログラミングできるようになるサービス10選 - paiza times
  • Webアプリの開発で面倒な作業を一発解消してくれる無料Webサービス9選! - paiza times

    どうも、まさとらん(@0310lan)です。 みなさんは、Webアプリの開発にトライしたことはありますか? いざ、コードを書き始めるとちょっとしたことで悩んだり、簡単に思っていた処理が意外と面倒であったり、データベース操作が難しかったり…など、予想以上に困難な場面に直面することが多いと思います。 そこで今回は、初級者から上級者まで幅広い開発シーンを想定し、面倒な作業を解消して便利に活用できる無料Webサービスを厳選してみましたので、ご紹介しようと思います! 目次 ・悩みがちな「関数」や「変数」の名前を日語で一発変換! ・Eメール認証の判定を自動化する! ・多彩な「情報リソース」を無料でゲット! ・わずか数行で画像要素をInstagram風のオシャレ写真に変換! ・任意のWebサイトURLから自動で「スクショ」をゲット! ・超お手軽にソースコードをシェア&レビューする! ・Googleスプ

    Webアプリの開発で面倒な作業を一発解消してくれる無料Webサービス9選! - paiza times
  • 初心者でもアルゴリズムの学習ができる入門本とサイト一覧 - paiza times

    Photo by VFS Digital Design 皆さんはアルゴリズムやデータ構造について知っているでしょうか。情報系の学部出身の人は学校の授業でやったかもしれません。一方で学校で情報系の勉強をせずにITエンジニアになったという方は、アルゴリズムやデータ構造について一度は「勉強したほうが良いんだろうな」と思いつつも、実際の業務であんまり必要なさそうだし、難しそうだし、DevOpsやオブジェクト指向やフレームワークについて学ぶので手一杯で未着手、という人も多いのではないでしょうか。 今回はそんな方に向けて、アルゴリズム、データ構造を学ぶ意義と、それらを学ぶときに役立つとサイトについてまとめました。 ■アルゴリズム、データ構造を学ぶ意味 アルゴリズムやデータ構造について語られるときに、非常に良く言われる事として「そんなものは実務に役立たたないので必要ない」という意見があります。当にア

    初心者でもアルゴリズムの学習ができる入門本とサイト一覧 - paiza times
  • Webサービスを作りたい人が、素早くプログラミング言語を学べる15サイト - paiza times

    Photo by Daniel Cukier コーディング転職サイトpaizaを運営している関係上、「Webサービスを作りたいけど、プログラミング言語をどこから学んだらよいか?」という質問をよく受けることがあります。今回はプログラマ視点でプログラミングを学ぶときにつまずやすいポイントと、プログラミング言語の基礎を簡単に楽しく学べるサイトをまとめてみました。 最近はオンラインでプログラミングを勉強できるWebサービスが多数登場してきているので、以前よりプログラムを学ぶコストはぐっと下がっています!! 目次 ・プログラミング言語を学ぶときに躓くポイント ・学ぶ言語を選ぶのに役立つサイト ・すぐ書きはじめられるプログラミング学習サイト ・講義型のプログラミング学習サイト ・少しコードに慣れてきてからお勧めのサイト ・さらにスキルアップするのに最適なサイト ・基礎文法をマスターしたいなら(おまけ)

    Webサービスを作りたい人が、素早くプログラミング言語を学べる15サイト - paiza times
  • 1