どうも、まさとらん（@0310lan）です！ 今回は、誰でも無料で使える天気予報APIを提供してくれるWebサービスをご紹介します！ 面倒なユーザー登録やAPIキーの設定などが不要で、欲しい天気情報のパラメータを含めたURLを好きなように構成するだけで簡単にJavaScriptから制御できるのが特徴です。 日本はもちろん、世界中の詳細な天気情報を取得できるのでご興味ある方はぜひ参考にしてみてください！ 【 Open-Meteo 】 ■「Open-Meteo」の使い方 それでは、「Open-Meteo」をどのように使えばいいのか詳しく見ていきましょう！ 「Open-Meteo」が提供する天気予報APIを利用するにあたり、何か特別な登録や申請は必要ありません。もっと言えば、ユーザー登録も不要でAPIキーもありません。 非営利プロジェクトであれば誰でも自由に使うことが可能で、以下のエンドポイント

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

どうも、まさとらん（@0310lan）です！ 今回は、面倒な開発環境を一瞬で構築してブラウザ上からWebアプリを気軽に開発＆公開できる無料のWebサービスをご紹介します！ 完全なオープンソースで開発が進められており、React / Angular / Vueなどのプロジェクトを誰でも簡単にプログラミングできる高度なエディタを搭載しているのが特徴です。 【 CodeSandbox 】 ■「CodeSandbox」の使い方 それでは、まず最初に「CodeSandbox」の使い方から見ていきましょう！ サイトにアクセスしたら、画面右上にあるボタンをクリックします。 次に、「React」「Vue」「Angular」などのプロジェクトを選択する画面が開きます。 ここで好きなフレームワークを選んだり、素のJavaScript（Vanilla JS）やCLIツール、GitHubからリポジトリを読み込んだ

Photo by Gerald Rich 有吉です。昨年入社したpaiza(ギノ) の営業です。 ぶっちゃけエンジニアって、営業が嫌いな人が多いですよね。 「無理な納期の仕事ばっかりとってくる」とか、「技術を知らないのに『すぐできるでしょ』とか言ってくる」とか、不満はいろいろあると思います。私も、以前はそっち側の営業だった…かもしれません。すみません。 「以前は」というのは、自分でプログラミングを勉強してみたら、技術やエンジニアに対する意識がすごく変わったからです。 というわけで、今回は営業の私がなぜプログラミングを学ぶことにしたのか、何を使ってどんな勉強をしたのか、そして勉強したことで何が変わったのかをお話しします。 【目次】 ■私の簡単な経歴 ■なぜ営業がプログラミングを学ぼうと思ったのか？ ◆技術的なことがわからないと、営業としてよい提案ができない ◆プログラミングができる営業になれ

(English article is here) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 いま最も熱いプログラミング言語の一つといえば、Pythonですよね。最近は特に機械学習向けのライブラリが充実していることから、人気が伸びています。 Pythonはスクリプト言語で、一行でもコードを書けばその場ですぐに動かすことができるため、プログラミング初心者の学習にも最適です。Pythonはアメリカの大学で最も多く教えられている言語である…といったデータもあります。 このPythonを使ってWebサービスやWebアプリケーションを作るときに必要なWebアプリケーションフレームワークには、Django, Pyramid, Flask, Bottleなどがありますが、今のところ最もメジャーなのがDjango(ジャンゴ)です。 Djangoには、Web開発に便利なル

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

Photo by Qfamily こんにちは。谷口です。 Python初心者の皆さんは、普段どうやって勉強をしていますか？ Web上で学習サービスを探す 教えてくれる人を探して聞く スクールに通う 書籍や学習サイトに書いてある情報を読む などの方法があるかと思いますが、「YouTubeなどの動画」でも、Pythonについて学ぶことができます。 動画を使えば、無料、もしくは安価で楽しく・効率よくPythonプログラミングを勉強できます。 今回は、そんなPythonについて学べる動画チャンネルを7つご紹介します。 ■Pythonについて学習できる動画チャンネル ◆thenewboston：Python 3.4 Programming Tutorials 言語：英語 www.youtube.com さまざまな言語のチュートリアル動画が公開されているチャンネルで、もちろんPythonのチュートリア

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザさえあれば今すぐ「プログラミング動画」を制作してネット上に公開できる無料のWebサービスをご紹介します！ 自分の声を一緒に収録することも可能なので、チュートリアル動画やプログラミング講座などを自由に制作できるスグレモノです。 優秀なコードエディタや動画編集機能なども優れているので、ご興味ある方はぜひ参考にしてみてください！ 【 Scrimba 】 ■「Scrimba」の使い方！ それでは、実際に「Scrimba」を使いながら、どのようなサービスなのかを見ていきましょう！ まず最初に、トップページの画面上部にある「ログイン」ボタンからGitHubアカウントと連携しましょう。 ログインが済んだら、次に「create」をクリックします。 すると、「新規作成」ウィンドウが表示されます。 ここで、「① テンプレート」と「② プロジェクト名

どうも、まさとらん（@0310lan）です！ 今回は、自分のWebサービスやサイトに訪問したユーザーが、どのような行動をしているのかを動画で再現してくれるサービスのご紹介です！ ユーザー側で発生した不具合などのログも記録されたり、特定のユーザーだけを抽出して分析できたり、とても便利な機能が無料で利用できるのでオススメですよ。 【 LogRocket 】 ■「LogRocket」の使い方！ それでは、実際に「LogRocket」を使いながらどのようなサービスなのかを見ていきましょう！ 今回は「LogRocket」の機能を試すために、以下のようなサンプルサイトを作っておきました。 このサイトを利用して、どのような機能が使えるのかをご紹介しようと思います。 まず、公式サイトへアクセスして「トップページ」のボタンをクリックしましょう。 ユーザー登録画面が表示されるので、「メールアドレス」と「パスワ

秋山です。 私は主にPythonを使って開発をしているので、以前Pythonの便利なライブラリやフレームワークを紹介する記事を書いたのですが（後でリンク貼りますね）、今回はその記事でも紹介したNumPy（なむぱいと読みます）という数値計算用ライブラリの使い方チュートリアルを書きたいと思います。 NumPyは機械学習やディープラーニングなどを学ぶ上でも前提知識とされることが多いため、これからその辺の分野の勉強をしてみたい人の参考になればと思います。 チュートリアルの実行環境は、ブラウザだけでPythonもNumPyも使えるオンラインのプログラミング実行環境「paiza.IO (パイザ・アイオー)」を使っていきます。 ■NumPyにおける配列 NumPyにおける配列は"ndarray"という形式になっていて、このndarrayはいろいろな機能を持っています。 まず、普通のリストをndarray

Photo by francois schnell 秋山です。 Pythonって多少プログラミング経験がある人であれば、文法的にはそこまで難しい言語ではないと思うのですが、初心者の人がPythonでゼロから何か作ろうとしたり、細かい修正をしなきゃならなくなったりしたときに、知っていると得するかもしれないTips的なことを紹介したいと思います。 「既にPython使いまくってる」という人にとってはおなじみの内容ばかりかもしれませんが、「最近Python使い始めた」という人は意外とまだ知らない、そして知っておくとお得なことがある（かもしれない）話です。 ■クラスなどの扱いに関して ※他の言語の仕様を全て認識しているわけではないので、Python以外の言語でも似た仕様のものはあるかもしれません。 ◆classを定義する際のインスタンス変数、クラス変数のprivate的な動きについて 大多数の言語

どうも、まさとらん（@0310lan）です。 みなさんは、「CSSフレームワーク」を活用しているでしょうか？ いきなりフレームワークと聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は誰でも利用できるようにシンプルな設計で公開されているモノが増えています。 そこで今回は、多機能でありながらも学習コストが低い「CSSフレームワーク」を厳選し、レスポンシブ対応でモバイルに優しいものをいくつかご紹介しようと思います！ ■CSSだけで多彩なサイトを構築できるフレームワーク！ 【 Picnic CSS 】 Web制作に必要なコンテンツを、とにかく簡単な手順で手っ取り早く構築できるように設計されているのが「Picnic CSS」です！ 特に、Flexboxを活用した非常に柔軟なグリッドレイアウトや、JavaScript不要でインタラクティブな要素を構築できる機能などはとても便利だと思

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

どうも、まさとらん（@0310lan）です。 ネット上には、Webサイトを効率よく制作できるように多種多様な高品質テンプレートが存在します。 そのまま利用しても良いし、開発やデザインの参考にしてみたり…など、その活用範囲は広いのですが、検索すると「有料・無料」「低品質・高品質」などが混在していて見つけるのが大変だったりします。 そこで今回は、「無料・高品質」なテンプレートの中から使用用途別にカテゴリを分けて、さらに面倒な「登録」も不要なモノだけを厳選してご紹介しようと思うので参考にしてみてください！ ■「ブログサイト」に最適なテンプレート！ 【 Spore 】 「Spore」は、モダンブラウザに対応したレスポンシブなテンプレートになっており、「ブログ」向けとして最適です。 ページのトップに位置するフルスクリーンのテーマ画像が印象的で、縦幅の違うカード状に並べられた記事はシンプルながらも、ア

どうも、まさとらん（@0310lan）です。 今回は、面倒な登録手続きやトークンなどが一切不要で、今すぐ利用できる便利な「Web API」を厳選してご紹介しようと思います。 これらのAPIを使うことで、Web制作がちょっと便利になったり、独自性のあるユニークなサービスを構築できるようになるでしょう。 また、簡単に扱えることから、「Web APIを使って何か作ってみたい…」と思っている初心者の方にもオススメですよ！ ■「Web API」の使い方！ 今回ご紹介する「API」は、いずれも「JSONP」形式でデータが取得できるので、普通のJavaScriptだけで試すことが出来ます。 以下のコードを、HTMLファイルに記述するか、新規にJSファイルを作って読み込むようにしましょう。 var script = document.createElement('script'); script.src

どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式

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

Photo by Andrew Roberts こんにちは。可知です。 最近はプログラミング学習に注目する人が増えていますが、プログラミングを学ぶためには様々なハードルがあり、独学で始めたけど挫折してしまった……という人も多いと思います。 先日、このブログに掲載された「プログラミングの勉強を始めたときに、文系が挫折しやすい7つのポイント」も、大変注目を集めました。 paiza.hatenablog.com 私も、BASICで「10 PRINT "12345";」みたいなプログラムを書いてから、かれこれ30年以上たちまして、いまだに心が折れてばかりで、たいしたプログラムが書けません(ycatch (Yutaka Catch) · GitHub)。 どうしてプログラミング学習というのは、ハードルが高くなってしまいがちなのでしょうか？プログラミングを習得するのに、挫折しないで済む方法はないのでし

Photo by Matthew Pearce 今回のpaiza開発日誌は片山がお送りします。 皆さんはWebデザイナーがどんな仕事をする人か？という事を明確にイメージ出来るでしょうか？ 最近、弊社でWeb/UIデザイナーを採用する事になったのですが、求人の要件を固めていくにあたって、そもそもWebデザイナーって、どんな経験を持った人を指すんだっけ？というのが曖昧だったので、Webデザイナーのキャリアパスと、15分野のスキル一覧を書き出してみました。 現在20代のWebデザイナーだという方が、今後のキャリアを考える際にもちょうど参考になりそうな物になったので、せっかくなので公開してみようと思います。Webデザイナーからどのような職種にキャリアアップ出来るのかと言う事と、そのために必要な経験を15分野にまとめてみました。 企業がWebデザイナーを採用する際の求人要件定義にも使えるかと思います

Photo by Armando Sotoca こんにちは。谷口です。 「業務経験は少ないけど、ITエンジニアとして転職がしたい」という方や、「プログラミングを独学で習得したのでITエンジニアになりたい」といったご相談を受けることがあります。 開発業務経験の少ない方、エンジニアを目指す新卒/既卒の方々にとって、作っておくとアピールになるのが、自分で作ったシステムやアプリなどをまとめたポートフォリオです。 ここで言うポートフォリオとは自分の能力を周囲に伝えるための自己作品集のことです。企業にこれまで自作したものを一覧で見てもらうことができれば、自分のスキルをアピールすることができます。 特にSIからWEB、受託から自社サービス開発といった感じで分野を転向しての転職を目指す場合は、ポートフォリオがあると有利です。例えば「業務でのWebサービス開発経験はありませんが、自分でこのようなサービスを作