読者です 読者をやめる 読者になる 読者になる

paiza開発日誌

paiza(https://paiza.jp)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

初心者からのJavaScript開発入門!iTunesのJSONデータを使ってランキングサイトを作るチュートリアル大公開!

どうも、まさとらん(@0310lan)です。今回は、JavaScriptでJSONを使った「Webアプリ開発」に挑戦してみようと思います! そこで、アップルが提供している「RSS Generator」からJSONデータを取得し、多彩なジャンルのランキングサイトを構築してみましょう!…

プログラミング問題を作るエンジニアが、数学的な面白いアルゴリズムを紹介してみた

Photo by Alex Graves 秋山です。paizaでは主にプログラミングスキルチェック問題の作成を担当しているので、アルゴリズムについて調べることもよくあります。というわけで今回はみんな大好き?な、数学的なアルゴリズムについて書いてみたいと思います。プ…

Pythonの学習を始めた初心者が、知っておきたいテクニック4つ

Photo by francois schnell 秋山です。Pythonって多少プログラミング経験がある人であれば、文法的にはそこまで難しい言語ではないと思うのですが、初心者の人がPythonでゼロから何か作ろうとしたり、細かーい修正をしなきゃならなくなったりしたときに、知…

Web上からソースコードの圧縮・整形・変換など190以上のツールを利用可能な「BeautifyConverter」を徹底解説!

どうも、まさとらん(@0310lan)です。今回は、ブラウザ上からWeb制作などで便利に使えるミニツールを190以上も搭載した異色のWebサービスをご紹介しようと思います!特に、ファイル関連のジェネレーターやコンバーターが豊富に揃っているのが特徴で、コンソ…

ツイッターで出題した未定義問題のお詫びと調査と解説について

Photo by Alan Becker Capuyá 青木です。先日、paizaのツイッターアカウント(@paiza_official)で出題した四択問題について、皆様からたくさんのご指摘・ご批判をいただいたので、その経緯と結論をお伝えします。次のような問題を考えて出題しました。int i…

Pythonエンジニアが紹介する、Pythonの超便利なライブラリ・フレームワーク13個

Photo by hoerner_brett 秋山です。私は主にPythonを使って開発をしているので、今回はPythonの便利なライブラリやフレームワークを紹介していきたいと思います。と言っても割と定番のものを中心に使っているので、既にPythonをがんがん使っている人にとって…

Python初心者が2系→3系への移行時に意外と気づかないけど、知らないままだと危険な変更点

Photo by Yuya Tamai 秋山です。私は主にPythonを使って開発をしているのですが、Python2系とPython3系にはいろんな変更点があります。で、互換性がない変更点も割とあって、よく知らないまま初心者が2系から3系に移行しちゃうと結構危険なところもあるので…

Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた!

どうも、まさとらん(@0310lan)です。みなさんは、「CSSフレームワーク」を活用しているでしょうか? いきなりフレームワークと聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は誰でも利用できるようにシンプルな設計で公開されている…

MacBook Pro Late 2016を会社に買ってもらったので、Vimmerが使ってみたゆるい感想

秋山です。MacBook Pro with TouchBar Late 2016を会社の金で買ってもらったのが今週月曜に届きまして、金曜まで使ってみた感想を書いていきたいと思います。ちなみに新旧マシンスペックは 【新】 MacBook Pro (15-inch, Late 2016) CPU : 2.9 GHz Intel Cor…

あなたが所属する開発チームのランクを決める、12の質問「ジョエル・テスト」

Photo by shaz wildcat こんにちは、吉岡(@yoshiokatsuneo)です。 動きの速いIT業界において、良い製品やサービスをどれだけ素早く生み出せるかは大変重要なことです。 そのためには、エンジニアにとって質が高く、成長できる開発環境が欠かせません。 では…

知らなきゃ損する!Web開発で絶対使いたくなる、人気のJavaScriptライブラリ8選と導入方法を公開

どうも、まさとらん(@0310lan)です。今回は、毎日のように誕生する新しいJavaScriptライブラリの中から、思わず使ってみたくなるようなオススメのライブラリを厳選してご紹介しようと思います。 そのままWebアプリとして活用できそうなモノから、コードの…

JavaScriptライブラリを使った超簡単チェスゲーム開発入門!ブラウザ上でCPU対戦が可能!

どうも、まさとらん(@0310lan)です。今回は、JavaScriptによる簡単なゲーム作りに挑戦するため、「チェス」をテーマにした開発チュートリアル記事となっています。 「なんだか難しそう…」と思うかもしれませんが、簡単な手順で実現できるJavaScriptライブ…

ブラウザだけで今すぐ使える!無料の「ゲーム開発環境」Webサービス厳選まとめ!

どうも、まさとらん(@0310lan)です。 みなさんは、「ゲーム開発」にご興味あるでしょうか?最近人気の「Unity」みたいな統合開発環境があれば、かなり本格的なゲーム作りが個人でも可能になってきましたが、実はこのような統合型の開発環境をブラウザ上で…

機械学習・転職・彼女など…2016年の楽しみなアドベントカレンダー【読むもよし書くもよし】

Photo by Tatsuo Yamashita こんにちは。谷口です。そろそろアドベントカレンダーの季節がやってきます。今年のアドベントカレンダーで面白そうなのが多いので、個人的に楽しみなものをまとめておきます。【※アドベントカレンダー is 何】 アドベントカレン…

ブラウザ上で超簡単にWebサイトが作れる!Bootstrap4対応のWeb制作エディタ「Pingendo」の活用ワザを一挙大公開!

どうも、まさとらん(@0310lan)です。今回は、マウス操作で簡単に「Bootstrap4」に対応したWeb制作をブラウザ上で行えるサービス「Pingendo」をご紹介しようと思います。以前から、PC向けソフトウェアとしてリリースされていましたが、最近になってベータ版…

デザインセンス不要でWeb制作が捗る!登録ナシですぐ使える「HTML5/CSS3」の無料テンプレート12選+α

どうも、まさとらん(@0310lan)です。ネット上には、Webサイトを効率よく制作できるように多種多様な高品質テンプレートが存在します。そのまま利用しても良いし、開発やデザインの参考にしてみたり…など、その活用範囲は広いのですが、検索すると「有料・…

Web開発が捗るFirebase入門!JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開!

 どうも、まさとらん(@0310lan)です。今回は、Webサービスなどを開発する際に、ユーザーの管理や識別などで必要になる「ユーザー認証」機能を、できるだけシンプルに作ってみたいと思います。 利用するのは、さまざまなバックエンド機能を提供するGoogle…

面倒な設定不要!無料でWebサイトをSSL化してホスティングする超お手軽サービス厳選まとめ!

どうも、まさとらん(@0310lan)です。 最近は、無料であるにも関わらず、多彩な機能を提供してくれるホスティングサービスが増えてきました。 そこで今回は、面倒な「契約」や「設定」が不要で、誰でも簡単にWebサイトを即座に公開できる優れたサービスを厳…

一度使えばもう手放せない! Web制作の効率を上げる厳選Webサービスまとめ!

どうも、まさとらん(@0310lan)です。今回は、Webサービスやサイトを制作する過程において、知っていると役に立つユニークなサービスを厳選してみました。ゼロから実装すると難しい機能を簡単に提供してくれたり、サイトにちょっとしたアクセントを加えてく…

知らなきゃ損するGoogle Apps Scriptの外部JSONデータ連携術!すべて無料で作る「お天気Webアプリ」の作り方を大公開!

どうも、まさとらん(@0310lan)です。みなさんは、「Google Apps Script(以下、GAS)」を使ったことがあるでしょうか?昔は、スプレッドシートのマクロ的な使い方であったり、Googleサービスを連携するために使うことが多かったような気がします。しかし、…

プログラミングなしで超簡単!Webサイトやブログに「チャット機能」を組み込める「Drift」を使ってみた!

どうも、まさとらん(@0310lan)です。みなさんは、自分のWebサイトやブログ、もしくはサービスなどを利用してくれるユーザーとコミュニケーションする場合、どのような方法を使いますか?よくあるのは、フォームなどを用意してメールでやり取りする方法です…

音声認識入門!Web Speech APIを使いChromeブラウザを音声操作するWebアプリ開発術を公開!

どうも、まさとらん(@0310lan)です。みなさんは、音声認識を活用していますか?例えば、iOSの「Siri」と会話してみたり、Androidなら「OK Google」と喋って検索した経験があるのではないでしょうか?今回は、このような音声認識を利用し、PCのChromeブラウ…

【凄腕Webエンジニア7人に聞いてみた】どんな開発環境や便利ツール使って仕事してるの?

Photo by Peter Petrusこんにちは。谷口です。 他人の開発環境って気になりませんか?私は気になります。誰かの作業を見ていて「何そのツール知らなかった」「えっそのコマンド便利そう」となったことありませんか?自分以外のエンジニアは、自分の知らない…

面倒な手続き不要!「Web API」の超お手軽活用術をJavaScriptコード付きで一挙大公開!

どうも、まさとらん(@0310lan)です。今回は、面倒な登録手続きやトークンなどが一切不要で、今すぐ利用できる便利な「Web API」を厳選してご紹介しようと思います。これらのAPIを使うことで、Web制作がちょっと便利になったり、独自性のあるユニークなサー…

2016年版、Dockerのすべてが5分でわかるまとめ!(コマンド一覧付き)

こんにちは、吉岡(@yoshiokatsuneo)です。 Dockerはシンプルで軽量な仮想環境という特徴から急速に広まっており、paizaでも利用しています。ただし、発展が早いことから、断片的な情報や古い情報などもあります。そこで、ここでは2016年の今のDockerについて…

AWS,Docker,Ansible...ウェブエンジニアが知っておくべきインフラ技術8選

↑2016年のよく使われるDevOpsツール。Docker、Ansibleが伸びています。 (RightScale: New DevOps Trends: 2016 State of the Cloud Surveyより) こんにちは、吉岡(@yoshiokatsuneo)です。 ウェブサービスを作るにはどうしたらいいでしょうか? 当然ですが、プ…

JavaScriptでグラフ描画入門!全8個のライブラリをコード付きで一挙に解説!

どうも、まさとらん(@0310lan)です。今回は、JavaScriptを使って「グラフやチャートを描きたい!」とか、「さまざまなデータを可視化させたい!」という人にオススメのJSライブラリをご紹介しようと思います。また、すぐに使い始められるように、ミニマム…

Dockerは危険という誤解と、本当に注意すべき点

こんにちは、吉岡(@yoshiokatsuneo)です。 Dockerは、シンプルで使い易い軽量仮想環境という特徴を生かして急速に発展しており弊社でも利用しています。 しかし、独自の概念を持つことや、機能が次々追加されていることから、誤解を生じることもあります。 …

「A-Frame」でVR開発入門!HTMLの追記だけでスマホブラウザから好きな場所を360度パノラマ画像体験

どうも、まさとらん(@0310lan)です。みなさんは、「VR(バーチャルリアリティ)」を体験されたことはあるでしょうか?「Oculus Rift」のような頭に装着するデバイスが人気ではあるものの、持っている人はまだ少ないと思いますので、今回はみなさんがお持ちの…

凄腕エンジニアが選んだAtom・Vim・Emacsの超便利プラグインと設定34選

Picture by ITエンジニアを目指す女子高生たちの学園ライフ4コマ漫画『ぱいじょ!』 こんにちは、谷口です。皆さんは普段どんなエディタを使っていますか?「今のエディタに不満がある」「乗り換えを考えている」という方もいるかと思います。弊社でpaizaを…

「埋め込みタグ」一発でWebコンテンツを激変させる至高のサービス総まとめ!

どうも、まさとらん(@0310lan)です。みなさんは、「YouTube」の動画をWebサイトやブログなどに貼り付けたことがあるでしょうか?「埋め込みタグ」をコピペするだけで、簡単に動画コンテンツを利用できるわけですが、最近は他にも多彩なコンテンツが埋め込…

ブラウザだけでWeb開発に挑戦! 「Cloud9」&「Milkcocoa」でテトリスにWebランキング機能を搭載しよう!

どうも、まさとらん(@0310lan)です。今回は、ブラウザだけを使って簡単なWeb開発に挑戦し、オンライン上でゲームのスコアを友人・知人と競争できるようなWebランキング機能を実現してみたいと思います!利用するサービスやツールは以下のとおり。(すべて…

Docker for Mac プライベートベータを早速使ってみた!

こんにちは、吉岡(@yoshiokatsuneo)です。 DockerはLinux上の軽量コンテナ環境として、飛ぶ鳥を落とす勢いで成長しており、paizaでもジャッジシステムで利用しています。 そのDockerのMac OS X、Windows用クライアントの新製品が、"Docker for Mac"、"Docker…

JavaScript初心者を一気に上級者へ導く海外の無料動画ベスト6を一挙公開!

どうも、まさとらん(@0310lan)です。みなさんは、「JavaScript」をどのような方法で学習されているでしょうか?お手軽な方法としては…、・書籍やブログ記事を読む ・勉強会・セミナーへ参加する ・友人や先輩に直接聞く ・学習向けのWebサービスを利用する…

地図アプリの開発を爆速化する「Webマッピング」サービスの活用術を大公開!

どうも、まさとらん(@0310lan)です。今回は、地図上にデータをマッピングすることで、さまざまな情報を「見える化(可視化)」できるWebサービスの活用法についてご紹介しようと思います!マッピングが出来るようになると、単なる「データの集まり」だったも…

Webサービスを作りたい人に最適、たった1時間でJSベースのQAサイトを作る方法 - MEANスタック開発(3)

(English article is here.) こんにちは、吉岡(@yoshiokatsuneo)です。 MEANスタック(*)は、JavaScriptのみでフロントエンド、データベース、バックエンドの全てを開発できるWebサービス開発環境です。特にMEANスタックの一つAngularJS Full-Stack generator…

指定URLのPC・タブレット・スマホの「キャプチャ画像」を自動表示するデモアプリを作ってみた!

どうも、まさとらん(@0310lan)です。今回は、Webページのキャプチャ画像が取得できるサービス「Page2Images」の提供しているAPIを使ったデモアプリの作り方をご紹介します!これをマスターすれば、PCやスマホなどの「表示チェックツール」が簡単に作れたり…

Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開!

どうも、まさとらん(@0310lan)です。みなさんは、「JavaScriptライブラリ」を活用しているでしょうか?Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るよ…

便利!Pythonプログラミングを学んでその場でコードを実行できるブログ

paizaが運営している無料オンラインプログラミング実行環境サービスpaizaIO、皆さんお使いいただいたことはありますでしょうか?実はこちらのpaizaIO、あまり知られていないのですが、その場でコードを書いて実行できるブログパーツとして使用することもでき…

コード不要でWebスクレイピング可能な「Kimono」で、動画キュレーションプレイヤーを作ってみた!

どうも、まさとらん(@0310lan)です。最近は、暇な時間を見つけると、ついつい「YouTube動画」をボーッと見てしまうのですが、同じような方はいらっしゃいますか?私の場合、YouTubeに時間を費やしてるうちに…、「もっと効率よく、興味のある動画だけを見た…

OpenSSHクライアントで秘密鍵が漏洩する脆弱性(CVE-2016-0777)の内容と対策

Photo by Ian Britton こんにちは、吉岡(@yoshiokatsuneo)です。 サーバ管理で使わない人はいないSSH(OpenSSH)ですが、SSHクライアントで秘密鍵が漏洩する 可能性のある脆弱性(CVE-2016-0777)が発見されています。 各ベンダーからリリースされるアップデート…

「AngularJS」と「はてブAPI」で作るChromeアプリの作り方を完全公開!

どうも、まさとらん(@0310lan)です。今回は、Googleが提供する「Chromeブラウザ」で動作するアプリケーションを作ってみたいと思います。「なんだか難しそう…」と思うかもしれませんが、ざっくり言ってしまうと普通に「Webページ」を作るのと変わりません…

プログラミング経験がなくても大丈夫!Webサービスを一発作成する方法

こんにちは、吉岡(@yoshiokatsuneo)です。 ウェブサービスを作るにはどのような方法があるでしょうか? 言語は、PHP、Java、Ruby、Python、JavaScript・・・ フレームワークは、Laravel、Ruby on Rails, Struts・・・ フロントエンドは、jQueryUI、Sencha、A…

Twitterの過去ログが全部取得できず困った時に無料で解決できる方法

Photo by PROAndy Melton こんにちは、吉岡(@yoshiokatsuneo)です。 最近、Twitterの仕様変更により、Webサイト上に設置されているツイートボタンのツイート数が表示されなくなったことが大きな話題になりました。ツイート数がわからなくなったことにより、…

【ブログが書きやすい】快適なMarkdownエディタはどれか!?

こんにちは、吉岡(@yoshiokatsuneo)です。 開発関連のブログを書いていますが、長い文章をブラウザ上で編集していると編集画面が小さかったり、オフラインで編集できないことが気になり始めます。そんな時はブログ編集用のアプリケーションを使うと快適にブ…

2015年7月9日以降にFacebook認証でメールアドレスが取れない問題とその対策

こんにちは、吉岡(@yoshiokatsuneo)です。 Facebook、LINE、TwitterなどのアカウントでログインするSNS連携認証は、簡単にログインできること、パスワード管理を一元化できることなどから多くのサービスで採用されています。 このSNS連携認証ですが、Faceboo…

初級者でも1時間でTwitter風Webサービスを作れる!- MEANスタック開発(2)

(English article is here.) こんにちは、吉岡(@yoshiokatsuneo)です。 前回はMEANスタックの一つ、YeomanのAngularJS Full-Stack generatorのインストールと使い方について紹介しました。MEANスタックはMongoDB, Express, AngularJS, Node.jsを組み合わせた…

最新・最速!Webサービスが今すぐ作れる! - MEANスタック開発(1)

(English article is here.) こんにちは、吉岡(@yoshiokatsuneo)です。 最近のリッチなWebサービス開発ではブラウザ(クライアント)とサーバ両方のコードを書いたり、Webソケットなどで連携したりすることもあり、気軽に取り組みづらくなっています。しかし、…

Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた!

(English article is here.) こんにちは、吉岡(@yoshiokatsuneo)です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体ど…

姿を現した!次世代JSフレームワークAngularJS2.0アルファ版を試しみてた!

こんにちは、吉岡(@yoshiokatsuneo)です。 AngularJSは、最も有名なフルスタックJavaScriptフレームワークで、『paiza.IO』でも使っていますが、現在次期バージョンAngularJS Ver2.0の開発が進められています。 そして、先日アメリカで開かれたAngularJSカン…