どうも、まさとらん（@0310lan）です！ 今回はJavaScript環境で動くJupyter Notebookのような無料Webサービスをご紹介します。 インタラクティブに動作するJavaScriptを活用したドキュメント作りが可能であり、学習用途はもちろんのことデータ分析・可視化・機械学習・プロトタイプ作りなど、さまざまな用途に活用できるのが特徴です。 JavaScriptを使ったドキュメント作りにご興味ある方はぜひ参考にしてみてください！ ちなみにJavaScriptの基本は、paizaラーニングの「JavaScript入門編」で学ぶことができます。 【 Dnotebook 】 ■「Dnotebook」の使い方 それではさっそくですが、「Dnotebook」をどのように使っていけばいいのか詳しく見ていきましょう。 「Dnotebook」はnpmからインストールしてローカル開発環境で

こんにちは。倉内です。 就活に関する情報はインターネットで集めることが多いと思いますが、特にIT業界は積極的に情報公開をしてくれる現役エンジニアの方も多いため、さまざまな情報を手に入れることができます。 ただ、私自身新卒でSEとしてSIer（受託開発中心）に就職し、その後転職で今のpaiza（自社サービス開発）に来てみて、「ITエンジニアというくくりでも実際は結構な違いがあるな」と感じました。 新卒での選択が一生を左右するわけではありませんが、できればある程度将来のキャリアを見据えた上で選択できたほうが、遠回りせず自分のやりたいことがかなえられるのかなとも思います。 そこで今回は、学生時代はなかなか得にくい「ITエンジニアの仕事」の実態についてもう少し深堀りしてみます。 「ITエンジニア」という職業の誤解しがちなところ 職種も業務内容も多岐にわたる 「ITエンジニア」というと、コードを書い

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上で誰でも簡単にWebサイトを作成できる無料の静的サイトジェネレータをご紹介します！ 特別な開発環境を用意する必要はなくて、コマンドラインからの実行も不要でユーザー登録もありません。そのため、誰でも気軽にWebサイトを作り始められる手軽さが特徴になっています。 本記事の後半では、書き出したソースコードを使ってネット上に公開する手順についても解説しているので、ご興味ある方はぜひ参考にしてみてください！ 【 T3MPL 】 「T3MPL」の使い方 それでは、「T3MPL」をどのように使えばいいのか詳しく見ていきましょう。 まずはサイトのトップページを下方にスクロールして、いくつかのテンプレートが表示されることを確認してください。 2020年10月時点において、以下のようなテンプレートを選択できるようになっています。 ランディングペー

どうも、まさとらん（@0310lan）です！ 今回は、Webサイトの構造を可視化して直感的に理解しやすい「ビジュアルサイトマップ」を作成できるWebサービスをご紹介します。 ブラウザからGUIベースのエディタにアクセスするだけで誰でも利用可能で、すべてマウス操作でできるので初心者でも簡単に使いこなせます。ブロックを追加していくだけでサイトマップに簡易的なワイヤーフレームが挿入できる点がとても便利です。 また、既存のWebサイトから素早くサイトマップに変換する方法も合わせて解説しているので、ご興味のある方はぜひ参考にしてみてください！ 【 Octopus.do 】 ■「Octopus.do」の使い方 それでは、「Octopus.do」をどのように使うのか詳しく見ていきましょう！ トップページにアクセスしたら【Create sitemap】ボタンをクリックします。 すると「サイトマップエディタ

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

どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptで簡単にExcelのようなスプレッドシートを作成できるライブラリをご紹介します！ 基本的な操作はすべてJavaScriptから制御可能であり、自分の好きなようにカスタマイズできる強力な機能が多数提供されています。また、簡単なプログラムだけでファイルの書き出し機能が利用できるなど便利なメソッドも多く含まれています。 自作のWebアプリなどにも手軽に組み込めるので、ご興味ある方はぜひ参考にしてみてください。 なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください。 【 jExcel 】 ■「jExcel」の使い方 それでは、まず最初に「jExcel」の導入方法から見ていきましょう！ 全部で3通りの方法が以下のように提供されています。

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上から誰でも手軽に動画編集ができる無料のWebサービスをご紹介します！ 類似のサービスはいくつかありますが、すべての機能を完全無料で利用可能で「透かし」*1も入らない珍しいサービスなのが大きな特徴です。プロモーション動画やSNS・YouTube向けの動画なども手軽に作成できます。 動画編集にご興味ある方は、ぜひ参考にしてみてください！ 【 Kapwing 】 ■「Kapwing」の使い方 それでは、まず最初に「Kapwing」をどのように使うのか詳しく見ていきましょう。 トップページにアクセスしたら青いボタンをクリックしてください。 試しに使うだけなら面倒なログインなどは不要で、すぐに編集用のエディタが表示されます。 「Kapwing」で動画編集をする方法として、以下の4パターンが提供されています。 それぞれの内容は以下のとおり

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザから即座に起動してすぐにでもベクター画像を描画できる無料のSVGエディタを厳選してご紹介します。 ほとんどのエディタがログイン不要ですぐに利用可能なうえ、オリジナルのアイコンやイラストをSVG形式で保存してWebコンテンツとして活用できます。 イラスト作成やSVGに興味のある方は、ぜひ参考にしてみてください！ ■ primalDraw シンプルなUIでありながら、ベクター画像を描くための基本的な描画ツールは一通り揃っているSVGエディタが「primalDraw」です。 面倒なユーザー登録などは不要で、ブラウザからアクセスすれば即座にエディタが起動してすぐに描画できる手軽さが特徴的です。また、2020年5月時点ではすべての機能を無料で提供しているのも魅力の1つでしょう。 ベジェ曲線などを利用した基本的なペンツールでゼロからイラスト

どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単にPWAやWebアプリをビジュアルエディタで開発できるWebサービスをご紹介します！ 「Adalo」は、最近人気が高まっているプログラミング不要のNoCodeサービスの一種ですが、なかでも直感的に操作ができて理解しやすいシンプルな設計なのが特徴です。 これまでアプリ開発を諦めていた人やオリジナルアプリの開発に興味ある方はぜひ参考にしてみてください！ 【 Adalo 】 ■「Adalo」の使い方 それでは「Adalo」の基本的な使い方から見ていきましょう！ まずはサイトにアクセスして【SIGN UP】ボタンから無料のユーザー登録を済ませておきます。 メールアドレス・パスワード・ユーザー名を入力すれば完了です。 すると開発したい種類を聞かれるので、今回は「Native Mobile App」（スマホアプリ）を選択してみましょう。

こんにちは。谷口です。 エンジニアを目指している方や現役エンジニアの方の中には SQLについて勉強したい なんとなくSQL文書いてるけど実は苦手 という方も多いかと思います。 かつてはSQLの勉強をしようと思ったら、一から環境設定をしてデータベース（DB）を構築しなければなりませんでしたが、最近はオンラインで構築済みのDBを使ったりして、SQLの基本をすぐに学べる学習コンテンツも増えています。 そこで今回は、これからSQLに入門したい方、改めて勉強し直したい方向けに、SQLの問題がたくさん解ける学習コンテンツをご紹介します。 SQLってどんな言語？ SQLとは、リレーショナルデータベース（RDB）のデータを操作するための言語です。私たちはSQLを使うことによってRDBMS（リレーショナルデータベースマネジメントシステム）に命令を出して、必要なデータをRDBに格納したり、格納したデータを取得

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

どうも、まさとらん（@0310lan）です！ 今回は、膨大な量のAPIを横断検索できてそのままブラウザ上でテスト実行も可能なWebサービスのご紹介です。 元々はRapidAPIが提供していたサービスを楽天がパートナー契約を結んだことで、日本語でも利用できるようになりました。2018年末にはバージョン2.0となり改良も進んでいます。 APIの開発者やWeb開発に興味のある方は、ぜひ参考にしてみてください！ 【 Rakuten RapidAPI 】 ■「Rakuten RapdAPI」の使い方 それでは、実際に使いながらどのようなサービスなのかを見ていきましょう！ 最初に、トップ画面から【新規登録】ボタンをクリックしてユーザー登録を済ませておきます。 メールアドレス・パスワードなどを設定すればすぐに登録できます。 （※GitHubやGoogleアカウントでも登録可能です） 登録が完了したら、す

どうも、まさとらん（@0310lan）です！ 今回は、フロントエンドによる静的なWebページだけでなく、Node.jsなどのサーバサイドも含めた動的なWebアプリを無料でホスティングしてくれるサービスをご紹介します。 GitHubのリポジトリと連携することで、とにかくWebアプリを公開するまでの作業が簡単かつ高速に実現できるのが大きな特徴です。 サーバレスによる実行も可能なので、ご興味ある方はぜひ参考にしてみてください！ 【 Unubo 】 ■「Unubo」の使い方 それでは、「Unubo」をどのように使っていけば良いのか見ていきましょう！ まずは、サイトにアクセスしたら【SIGN UP】ボタンをクリックします。 無料のユーザー登録画面が表示されるので、ユーザー名・メールアドレス・パスワードを入力しましょう。 登録したメールアドレス宛にリンクが送られてくるので、それをクリックすれば登録完了

Photo by Martha W McQuade こんにちは、谷口です。 エンジニアのみなさん、デザイン周りで困った経験はないですか？ Web制作をしていると、 カラーやフォントサイズなどをちょっと変えただけでデザインがおかしくなってしまった 適切なカラーやフォントがよくわからない 見た目が微妙にかっこよくない感じだけどどう改善したらよいのかわからない… みたいなときってありますよね。 今回は、デザイナーに聞いたWebデザインに使えるいろいろな便利サイトをご紹介します。 デザインを手助けしてくれる便利なサイトがたくさんありますので、Web制作をするときの参考になればと思います。 配色関連 SchemeColor 豊富なカラーパレットからキーワードで絞り込んで、さまざまな色の組み合わせを手軽に探すことができます。お気に入りのカラーを集めてストックしたり、ダウンロードすることもできます。 P

どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単に最近のトレンドを意識したWebサイトを作成できる無料のWebサービスを厳選してみました！ 短時間で美しいサイトが作れるので、プロトタイピングにも最適です。 各サービスの特徴や使い方などを簡単にまとめているので、これからWebサイトを作ろうと考えている人はぜひ参考にしてみてください！ ■「Bootstrap 4」ベースのWebサイトを作れるサービス！ 【 Pingendo 】 マウスでポチポチクリックしていくだけで、いつの間にか「Bootstrap 4」ベースのWebサイトが作れてしまうのが「Pingendo」の面白いところ。 当初はシンプルなWebエディタとしてリリースされていましたが、活発にバージョンアップを繰り返して多機能なサービスに変化しています。 豊富なテンプレートやコンポーネントが搭載されており、ファイルの書き出し

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

Picture by ITエンジニアを目指す女子高生たちの学園ライフ4コマ漫画『ぱいじょ！』 こんにちは、谷口です。 ディレクターやプロジェクトマネージャーといった非エンジニア職の方々は、エンジニアとコミュニケーションをとることに難しさを感じたり、考え方にギャップを感じたりしたことがある方もいらっしゃるかと思います。 「エンジニアとわかりあえない…」「エンジニアが何を考えてるのかわからない…」という方のために、エンジニアとのトラブルのもととなるやりとりや、気を付けるとよいことを考えていきますので、非エンジニアの方々の参考になればと思います。 ■「どれくらいでできる？」はその場で決められるものではない 非エンジニアとエンジニアのもめごとの原因で多いのが、スケジュールに関することです。 非エンジニア「この機能どれくらいでできる？」 エンジニア「一日でできます」 非エンジニア「じゃあ明日リリース

どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScript」をどのような方法で学習されているでしょうか？ お手軽な方法としては…、 ・書籍やブログ記事を読む ・勉強会・セミナーへ参加する ・友人や先輩に直接聞く ・学習向けのWebサービスを利用する ・etc... などが一般的でしょうか。 今回は、上記のリストに加えて、もう１つ有効な方法である「海外の無料動画」についてご紹介しようと思います！ 「どうせ、英語だから…」と、つい敬遠しがちですが、海外ユーザーが作るプログラミング学習動画は、国内に比べて圧倒的に「質」が高いのが特徴です。 なかでも、特に解説が丁寧で理解しやすい動画だけを厳選しましたので、ぜひチェックしてみてください！ ■「JavaScript」の基本を徹底的に学ぶ！ まずは、JavaScriptを「どのように書いたら良いのか？」を丁寧に教えてくれる動画のご

Photo by Tax Credits 先日、コンピュータソフトウェア協会（CSAJ）会長の荻原紀男氏の「オリンピックにはボランティアで働くエンジニアが必要」という発言が大変話題となりました。 japan.zdnet.com japan.zdnet.com この発言を巡り、ボランティアでソフトウェアエンジニアを働かせることに対する批判や、ITエンジニアの地位の低さを問題視する声が多く挙がりました。 そんな中で今回は、本当に日本のITエンジニアの地位は低いのかどうか、海外のエンジニアの平均年収、他職種とも比べた水準を調べてみました。 ■物価、職種、地域による比較 ◆1．物価を考慮する 例えば日本の中だけでも、都心と地方では、物価（実感としては、普段消費するモノの値段というよりは家賃等の方が差が大きいと思います）は大きく異なります。同じ企業でも支社によっては都市手当てついたり……ということも

こんにちは。谷口です。 ITエンジニアの転職やプログラミング学習に関する仕事をしている私ですが、学生の頃は文系の学部に所属し、プログラミングには全く触れたことがありませんでした。 新卒の時はそんな状態で、自分に特性があるのかどうかもよく分からないまま、面接をしてくれた人事担当者の「プログラミングは研修を受ければできるようになるから大丈夫」の言葉を信じて、受託開発をしている企業に入社しました。 そして新人研修で生まれて初めてプログラミングに触れ、勉強する中で、一歩進もうとする度につまずき、進んだと思ったら二歩前に覚えたことを忘れ、ということを繰り返しながら、何とか働いてきた時期がありました。 プログラミングのプの字も知らなかった新人の頃にどこでつまずいてきたかを思い出しながら書いてみたいと思います。 ■代表的なつまずきポイント ◆1.Hello Worldの段階からつまずく 研修で最初に勉強