どうも、まさとらん（@0310lan）です！ 今回はJavaScriptでプログラムを書いてプレイヤーを操作する3Dゲームのご紹介です！ 大きな特徴として、3Dのステージを自作できる機能が提供されており、誰でも簡単に自分好みのステージを作成して楽しむことができます。 プログラミングの学習教材としても利用可能なので、ご興味ある方はぜひ参考にしてください。 【 CodeQuest 】 ■「CodeQuest」の使い方！ それでは、「CodeQuest」をどのように使えばいいのか詳しく見ていきましょう！ まず最初に【Sign Up】ボタンをクリックして無料のユーザー登録を済ませておきます。 メールアドレスとパスワードを入力しましょう。 ユーザー登録が完了したら、画面上部にあるリンクをクリックしてください。 次のようなダッシュボード画面が表示されたら準備完了です！ この画面からチュートリアルを試し

どうも、まさとらん（@0310lan）です！ 今回は、直感的な操作で高度なWebデザインを誰でも実現できるサービスをご紹介します。 Webサイトを構成するインタラクティブなコンテンツが豊富に用意されており、それらを組み合わせるだけで最適なWebサイトを誰でも簡単に構築できます。 また、提供されていないコンテンツや機能などは、JavaScriptで好きなように拡張できる設計になっているので無限の可能性も秘めています。Webサイトの作成にご興味ある方はぜひ参考にしてください。 【 Vev 】 ■「Vev」の使い方 それでは、「Vev」をどのように使えばいいのか詳しく見ていきましょう！ まずはトップページの黄色いボタンから無料のユーザー登録を済ませておきます。 利用可能なメールアドレスを入力してエンターキーを押してください。 すると登録したメールアドレス宛に、ログイン用のリンクが送付されるのでク

どうも、まさとらん（@0310lan）です！ 今回は、Web開発などで役に立つ厳選した無料サービスをご紹介します！ 特にWeb開発に慣れていない初心者や非エンジニアの方でも、手軽に特定の機能を提供するページを構築できるサービスを厳選してみました。 また、複数人でのレビュー、サイトの分析、学習リソースなども合わせて掲載しているので、ご興味ある方はぜひ参考にしてください！ ■独自ロードマップを公開してユーザーと共有する！ 【 Roadmap Show 】 Webアプリやサービス自体のアップデートや予定している機能追加などの情報を、プロダクトロードマップとして手軽に一般公開できる便利なサービスです。 サービス側が何をやっていて、どのような改善をしているのかをユーザー側からも分かりやすくなります。 基本的な使い方も簡単で、いくつかのカテゴリ別にタスクカードを追加していくだけです。 これから予定して

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上からリアルなハッカー気分を疑似体験できるユニークな無料Webゲームをご紹介します！ PCゲームとしてSteamからもリリースされていますが、今回ご紹介するブラウザ版は手軽に遊べるのでオススメです。ターミナル風のゲーム画面が特徴で、実際にJavaScriptを使ってプログラミングもできます。 ハッキングやセキュリティなどにご興味ある方も含めて、ぜひ参考にしてください！ 【 Bitburner 】 ■「Bitburner」の遊び方 「Bitburner」は、西暦2077年のサイバーパンクをテーマにしたディストピアな世界を舞台にしています。 ゲーム画面は3Dグラフィックや派手な演出があるわけではなく、世界観にピッタリなCLIベースのターミナルを忠実に再現しているのが大きな特徴です。 遊び方ですが、面倒なユーザー登録などは必要ありませ

どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptを使ってとにかく遊んだり楽しんだりできるインタラクティブなWebサービスやツールを厳選してご紹介します。 ゲーム体験をしたり、アート作品を作ったり、JavaScriptで開発されたユニークなサービスを利用してじっくりと遊んでみましょう。 Webの楽しい世界にご興味ある方は、ぜひ参考にしてください！ ■リアルタイムにコードを書いて戦うオンライン対戦ゲーム 【yare.io】 世界中のプレイヤーと1対1で戦うゲームなのですが、その戦い方はJavaScriptのコードをリアルタイムに書き換えながら自機を操作するというのが大きな特徴です。 見た目は簡素なシューティングゲームですが、実はかなり奥深いストラテジーゲームみたいな要素が詰まっています。 ゲームの大まかな流れとしては、以下のとおりです。 JavaScriptで自機を制

どうも、まさとらん（@0310lan）です！ 今回は、ごく普通のNotionドキュメントで構築された完全無料のWebサイトビルダーをご紹介します。 必要なものはNotionアカウントのみ！ 多彩なコンポーネントをドラッグ＆ドロップするだけで、誰でも簡単に美しいWebサイトを構築できるのが特徴で、フルカスタマイズ可能なノーコードサービスのように使うことができます。 Webサイトを手軽に構築したい方も含めて、ぜひ参考にしてみてください！ 【 The Super Builder 】 Notionをまだ使ったことがない人は、以下の記事を参考にしながら新規アカウントを作成しておきましょう。 paiza.hatenablog.com ■「The Super Builder」の使い方 それでは、「The Super Builder」をどのように使えばいいのか詳しく見ていきましょう！ 利用するにあたり、ユ

どうも、まさとらん（@0310lan）です！ 今回は、JavaScript初心者から中級者までをカバーできる学習コンテンツを厳選してご紹介します。 完全無料で公開されているものばかりを集めており、なおかつ質の高いコンテンツを選んでいますので独学したい方にも最適です。テキスト、動画、本、Webアプリなど、さまざまな種類のコンテンツを楽しみながらぜひ学習に役立ててください！ ■学習を始める前に これからJavaScriptの学習コンテンツについて解説をしていく前に、ひとつだけ以下のサイトをご紹介しておきます。 【 The Modern JavaScript Tutorial 】 これはJavaScriptの基礎構文・DOM操作・非同期処理・サーバ通信など、ほとんどの学習項目を網羅したリファレンスのようなサイトです。海外で作られたサイトですが、うれしいことに日本語化されているので初心者にも扱いや

どうも、まさとらん（@0310lan）です！ 今回は、万能なドキュメントサービスとして人気の「Notion」を、さらにパワーアップさせて別の用途に活用できるWebサービスを厳選してご紹介します！ すべて無料で利用できる（もしくは無料プランありの）サービスであり、機能的に優れていて誰でも扱える簡単な操作のものを厳選しました。 現状のNotionだけでは足りない機能を多く搭載できるサービスばかりなので、ご興味ある方はぜひ参考にしてみてください！ ちなみに、Notionについてまだよく知らないという方は以下の記事で詳細を解説しているので合わせて確認しておくことをオススメします。 paiza.hatenablog.com ■Notionをメルマガ配信システムに変えるサービス！ 【 NoCodeLetters 】 Notionで作成したテーブルをメルマガ（ニュースレター）のコンテンツ管理用データベー

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザベースのゲーム開発エディタを使って独自ゲームをインストールできる超小型のゲーム機「Meowbit」をご紹介します！ ビジュアルベースのブロックエディタで誰でも簡単にゲームが開発できるうえ、1クリックでJavaScriptによる本格的なプログラミングモードにも切り替えられます。ゲーム機には各種センサーやコネクタも搭載しているので、ちょっとしたIoT開発も可能です。 プログラミングやゲーム開発に興味のある人からガジェット好きな人も含めて、ぜひ参考にしてみてください！ なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください。 ■「Meowbit」とは？ まず最初に「Meowbit」の詳細について解説をしておきます。 名刺サイズの小型ボディにフルカラ

どうも、まさとらん（@0310lan）です！ 今回は、さまざまなミニクイズなどのゲームで遊びながら、実践的なWebデザインを誰でも学習できるWebサービスをご紹介します。 基本的な知識だけでなく、実際のWebサイトやアプリの画面などを活用してWebデザインに必要なスキルや感覚を自然と身につけることができるようになります。 これからWebデザインの学習を検討している人も含めて、ぜひ参考にしてみてください！ 【 Uxcel 】 ■「Uxcel」の使い方 それでは、「Uxcel」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページから【Sign Up】ボタンをクリックして無料のユーザー登録を済ませておきましょう。 メールアドレス、パスワードを設定するだけなので簡単です。 登録されたメールアドレス宛に認証用のリンクが送られてくるので、クリックして完了しておきましょう。 以

(English article is here) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 Chrome最新版(Chrome 85)で、徐々にWebサイトへの正確な流入元URL(URLのパス名)が取得できなくなってきています。 例えば、はてなブログからの流入では、どの記事から流入したかがわからず、流入元の調査・分析などのマーケティングへの影響が大きいと思われます。今回はまだWeb上での情報が限られているようなので、ここでは状況と対応方法について紹介したいと思います。 発端 「paiza」には毎日いろいろなサイトからのアクセスがあります。そんななか、先日ある社員から「やけに『paiza開発日誌』（このブログです）のトップページからのアクセスが増えているのだけど、理由って分かりますか？」と質問がありました。その近辺での「paiza開発日誌」のアクセス数は通

Photo by Simon Cunningham こんにちは。谷口です。 paizaはITエンジニアの転職・就職サービスなので、エンジニアを募集している企業の採用担当の方から「エンジニアがほしいのに全然採用できない」「採用したいと思った人に辞退されてしまう」といったご相談を受けることもよくあります。 残念ながら応募者からの辞退が続くような場合は、採用する側が「面接でエンジニアに嫌われるようなこと」を知らずにやらかしている可能性が非常に高いです。 たとえば 人事担当者だけでエンジニアを面接したら辞退されてしまった 面接が始まってすぐに志望動機などを聞いたら「は？」という顔をされた 面接の最後に会社説明をしたが、あまり興味を持ってもらえなかった といったことはありませんか？ 面接でのこういった行為は応募者の志望度を下げ、辞退を招く原因となってしまいます。本当に優秀なエンジニアを採用したいので

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

どうも、まさとらん（@0310lan）です！ 最近はJavaScriptの開発環境を提供してくれるWebサービスが増えており、なかにはスマホからでも気軽にプログラミングできるように最適化されているモノも少なくありません。 そこで今回は、PC・スマホのブラウザ（もしくはアプリ）から手軽にJavaScriptの開発環境を利用できるサービスを厳選してみましたのでご紹介しようと思います！ ちなみにスマホの場合はBluetoothキーボードを併用すると、さらに快適な環境が整えられますよ。 なお、JavaScriptはpaizaラーニングの「JavaScript入門編」（完全無料）で学ぶことができます。そちらも合わせてチェックしてみてください。 ■スマホでも気軽にJavaScriptプログラミングを楽しめるエディタ！ 【 Spck Editor 】 気軽にプログラミングを楽しめるという点では「Plun

どうも、まさとらん（@0310lan）です！ 今回は、不特定多数のユーザーとSlackを使ってチャットによる一括管理が可能になる無料のサービスをご紹介します！ 無料で取得可能な専用のメールアドレス宛に届いたメールが、Slack上でチャットのようにやり取りできるようになるのでカスタマーサポートなどにも最適です。 今すぐ誰でも簡単に導入できるので、ご興味ある方はぜひ参考にしてみてください！ 【 SharedBox 】 ■「Slack」の事前準備について 今回ご紹介するサービスの「SharedBox」は、Slackを利用するのであらかじめ自分のアカウントを準備しておく必要があります。 まだ、Slackのアカウントをお持ちでない方は以下のリンクから無料のユーザー登録をしておきましょう！ 【 Slack 】 そして、本記事で解説する「SharedBox」で利用するチャンネルをあらかじめ新規作成してお

どうも、まさとらん（@0310lan）です！ 今回は、わずか数行のJavaScriptコードを書くだけで3Dの地球上にデータをマッピングして可視化できるライブラリをご紹介します！ 初心者でも簡単に扱えるように設計されており、カスタマイズ性やインタラクティブな機能を追加するのも簡単です。 輸出入のデータ・統計情報・インバウンドデータなどはもちろんのこと、海外旅行や旅のログを作ったりするのにも大変重宝すると思います！ 【 Gio.js 】 ■「Gio.js」の使い方 それでは、まず最初に「Gio.js」を利用するための準備から始めていきましょう！ 導入方法としてはいくつかのオプションが用意されているので、特に手間を掛けることなく進めていけるはずです。 例えば、「npm」「yarn」を使う場合は以下のコマンドを実行するだけです！ ※「npm」を使う場合 npm install giojs --s

Photo by Amtec Staffing こんにちは、谷口です。 転職活動を始めた方にとって、最初の関門は「一次面接」かと思います。まずはここを通過できないと何も始まりませんよね。 しかし、何社も応募しているのに「一次面接すらなかなか通過できない…」という人は珍しくありません。 一次面接を通過できない人は、一体何がマズいのでしょうか？ 実は、面接で「企業側が応募者に対して知りたいこと」というのは、まとめると「3つ」しかありません。 応募者はその「3つのこと」を考えて、話せるようにしておけばよいのです。 これができていれば、「スキルが必須要件に達していない」などでない限り、ほとんど落ちることはありません。（むしろ「この人なら現時点でのスキルが足りていなくてもキャッチアップしてくれそう」と思われて通過できるケースも大いにあります） しかし、落ちた企業はお祈りメールしかくれないし、「どこが

どうも、まさとらん（@0310lan）です！ 今回は、さまざまなドキュメントを作成し、それらを繋ぎ合わせてマインドマップのように管理できる無料Webサービス「Milkr」をご紹介します！ アイデアだしや知識の整理はもちろん、議事録をまとめたりWebサイトのワークフローを作ったり…など、とても幅広い活用ができる万能ツールになっています。 直感的に扱いやすい操作になっているので、ご興味ある方はぜひ参考にしてみてください！ 【 Milkr 】 ■「Milkr」の使い方 それでは、実際に「Milkr」を使いながらどのようなサービスなのかを見ていきましょう！ サイトにアクセスしたら画面上部にある「Sign up」ボタンをクリックします。 「Google」か「Twitter」のアカウントで簡単にユーザー登録できます！ ユーザー登録すると、自分の「マイページ」が表示されるようになります！ このページには

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上から誰でも簡単にHTML5で作られたアニメーションを製作できるWebサービスをご紹介します！ Webサイトやサービスに組み込んで動きのあるコンテンツを作成したり、企業ロゴやバナー広告、商品紹介、インフォグラフィック…など、とても幅広い分野に応用することが可能です。 ブラウザさえあれば今すぐアニメーションを作れるので、ぜひみなさんもオリジナル作品を作ってみてください！ 【 Animatron Studio 】 ■「Animatron Studio」とは？ 「Animatron Studio」は、とにかく誰でも簡単にアニメーション製作ができることを前提に設計されています。 豊富なイラストやテンプレートを自在に組み合わせることで、わずかなマウス操作だけで楽しいアニメーションを次々と作っていくことが可能です。 例えば、以下のようなアニ

どうも、まさとらん（@0310lan）です！ 今回は、初心者の方でも簡単にWebサイトやブログなどを作成して公開まで可能な無料のWebサービスをご紹介します！ また、簡単にデータベースを構築したり独自のAPIを作成したりすることも可能で、使い方次第では簡単なWebアプリまで作れるポテンシャルを秘めているのが特徴です。 非常に多機能なサービスということもあり、初心者の方から上級者まで幅広く楽しめるのでぜひ参考にしてみてください！ 【 AppDrag 】 ■「AppDrag」の使い方 それではまず最初に、「AppDrag」がどのようなサービスなのかを実際に使いながら見ていきましょう！ サイトのトップページにある「ボタン」をクリックします。 無料のユーザー登録を行う画面になるので、必要事項を入力していきましょう。 ユーザー名、メルアド、パスワードだけで誰でも簡単に登録できるので便利です。 次に、