タグ

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

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

    どうも、まさとらん(@0310lan)です。 みなさんは、「ゲーム開発」にご興味あるでしょうか? 最近人気の「Unity」みたいな統合開発環境があれば、かなり格的なゲーム作りが個人でも可能になってきましたが、実はこのような統合型の開発環境をブラウザ上で実現するサービスがいくつか存在します。 そこで今回は、用途別に厳選したオススメのサービスをご紹介しようと思いますので、ご興味ある方はぜひトライしてみてください! ■気で作り込める「2Dゲーム」開発環境! 【 WiMi5 】 ゲームに使う「ステージ」作りをグラフィカルに設定し、キャラのアニメーションやメインのゲームロジック、最終的な書き出しまですべてカバーする統合開発環境が「WiMi5」です。 シューティング、RPG、パズル、アクション…など、基的に2Dゲームならどんなゲームでも制作可能で、すでに多くのユーザーが多彩なゲームを公開していま

    ブラウザだけで今すぐ使える!無料の「ゲーム開発環境」Webサービス厳選まとめ! - paiza times
  • デザインセンス不要でWeb制作が捗る!登録ナシですぐ使える「HTML5/CSS3」の無料テンプレート12選+α - paiza times

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

    デザインセンス不要でWeb制作が捗る!登録ナシですぐ使える「HTML5/CSS3」の無料テンプレート12選+α - paiza times
  • 面倒な設定不要!無料でWebサイトをSSL化してホスティングする超お手軽サービス厳選まとめ! - paiza times

    どうも、まさとらん(@0310lan)です。 最近は、無料であるにも関わらず、多彩な機能を提供してくれるホスティングサービスが増えてきました。 そこで今回は、面倒な「契約」や「設定」が不要で、誰でも簡単にWebサイトを即座に公開できる優れたサービスを厳選してご紹介してみようと思います。 これからWebサイトを公開しようと考えている方は、ぜひ参考にしてみてください! ■コマンド1発でホスティングが完了するサービス! 【 PubStorm 】 ブラウザ上に開発環境を構築できるクラウドIDEサービス「Nitrous」のチームが提供しているサービスで、エンジニアが扱いやすいように全てコマンドラインからの操作で完結できるように設計されています。 基的な使い方としては、Webサイトを構成するファイルを作ったら以下のコマンドを叩くだけです! $ storm publish たったこれだけで、【 プロジ

    面倒な設定不要!無料でWebサイトをSSL化してホスティングする超お手軽サービス厳選まとめ! - paiza times
  • 一度使えばもう手放せない! Web制作の効率を上げる厳選Webサービスまとめ! - paiza times

    どうも、まさとらん(@0310lan)です。 今回は、Webサービスやサイトを制作する過程において、知っていると役に立つユニークなサービスを厳選してみました。 ゼロから実装すると難しい機能を簡単に提供してくれたり、サイトにちょっとしたアクセントを加えてくれるモノや、専門的な解析・分析をサポートしてくれるものまで幅広くご紹介していますので、ぜひ参考にしてみてください! ■Webサイトに「感情ボタン」を設置する! 【 Emotify 】 ブログの記事などには、よく「SNSボタン」が設置されていますが、これと同じような感覚でユーザーの「感情」を表現したボタンを設置できるのが「Emotify」の特徴です。 導入方法もシンプルで、ユーザー登録後に生成されるコードをコピーし、表示させたい箇所のHTMLに貼り付ければ完了というお手軽さ。 実際に、「感情」ボタンを設置するとこんな感じになります!(スマホに

    一度使えばもう手放せない! Web制作の効率を上げる厳選Webサービスまとめ! - paiza times
  • 知らなきゃ損するGoogle Apps Scriptの外部JSONデータ連携術!すべて無料で作る「お天気Webアプリ」の作り方を大公開! - paiza times

    どうも、まさとらん(@0310lan)です。 みなさんは、「Google Apps Script(以下、GAS)」を使ったことがあるでしょうか? 昔は、スプレッドシートのマクロ的な使い方であったり、Googleサービスを連携するために使うことが多かったような気がします。 しかし、今ではGASを単体で利用できるようになり、簡単なWebアプリを作って公開したり、スプレッドシートを「データベース」代わりに使ったりなど、かなり柔軟な利用ができるようになりました。 そこで今回は、簡単なサンプル事例として「天気予報」の外部JSONデータをGASで取得&加工し、シンプルな「お天気Webアプリ」を作る方法をご紹介しようと思います! GASは、独自に提供されているAPIを除けば、ごく普通のJavaScriptなので誰でも扱いやすいプログラミングが出来るようになっています。 ■Google Apps Scri

    知らなきゃ損するGoogle Apps Scriptの外部JSONデータ連携術!すべて無料で作る「お天気Webアプリ」の作り方を大公開! - paiza times
  • 面倒な手続き不要!「Web API」の超お手軽活用術をJavaScriptコード付きで一挙大公開! - paiza times

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

    面倒な手続き不要!「Web API」の超お手軽活用術をJavaScriptコード付きで一挙大公開! - paiza times
  • Dockerのすべてが5分でわかるまとめ!(コマンド一覧付き) - paiza開発日誌

    こんにちは、吉岡(@yoshiokatsuneo)です。 Dockerはシンプルで軽量な仮想環境という特徴から急速に広まっており、paizaでも利用しています。ただし、発展が早いことから、断片的な情報や古い情報などもあります。そこで、ここでは今のDocker(Ver1.13: 2017/1/20更新)について、5分でわかるように簡単にまとめてみます。 目次 Dockerの特徴 コンテナと仮想マシンの違い Dockerの発展 Dockerの構成(5つの要素) Dockerの基コマンド Dockerコマンド一覧 Dockerの仕組み 考え方 まとめ Dockerの特徴 Dockerは、Linux上のシンプルで軽量な仮想環境(コンテナ)で以下の特徴があります。 早い・軽い OSレベルの仮想化なので、起動は一瞬です。コンテナ間でイメージを共有できるので、コンテナの起動自体ではディスクは消費しませ

    Dockerのすべてが5分でわかるまとめ!(コマンド一覧付き) - paiza開発日誌
  • JavaScriptでグラフ描画入門!全8個のライブラリをコード付きで一挙に解説! - paiza times

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

    JavaScriptでグラフ描画入門!全8個のライブラリをコード付きで一挙に解説! - paiza times
  • 凄腕エンジニアが選んだAtom・Vim・Emacsの超便利プラグインと設定34選 - paiza times

    Picture by ITエンジニアを目指す女子高生たちの学園ライフ4コマ漫画『ぱいじょ!』 こんにちは、谷口です。 皆さんは普段どんなエディタを使っていますか?「今のエディタに不満がある」「乗り換えを考えている」という方もいるかと思います。 弊社でpaizaを作っている凄腕エンジニアたちに聞いたところ、Atom派とVim派とEmacs派がいたので、各エディタを使うメリット・デメリット、また実際に開発で使っていて便利なプラグインや設定の小技などをみっちり聞いてきました。 エディタの設定や乗り換えの参考にしていただければと思います。 ■その前にpaizaを作っているエンジニアが使うエディタの割合 Picture by ITエンジニアを目指す女子高生たちの学園ライフ4コマ漫画『ぱいじょ!』 Atomユーザー:2名 Vimユーザー:2名 Emacsユーザー:1名 もちろんみんな一つのエディタ単体

    凄腕エンジニアが選んだAtom・Vim・Emacsの超便利プラグインと設定34選 - paiza times
  • 「埋め込みタグ」一発でWebコンテンツを激変させる至高のサービス総まとめ! - paiza times

    どうも、まさとらん(@0310lan)です。 みなさんは、「YouTube」の動画をWebサイトやブログなどに貼り付けたことがあるでしょうか? 「埋め込みタグ」をコピペするだけで、簡単に動画コンテンツを利用できるわけですが、最近は他にも多彩なコンテンツが埋め込めるようになっています。 そこで今回は、特にユニークなWebコンテンツを埋め込める無料サービスだけを厳選してみましたので、ぜひ参考にしてみてください! ■リッチな情報を盛り込んだ「画像」を埋め込む! 【 ThingLink 】 Webページに「画像」を挿入する機会は多いと思いますが、1枚の画像で伝えられるコトには限界があります。 そこで、「ThingLink 」を使うと、ごく普通の画像内に「動画」「音楽」「リンク」「テキスト」…など、さまざまな要素を埋め込むことが可能になるのです。 まずは、以下のサンプル画像をチェックしてみてください

    「埋め込みタグ」一発でWebコンテンツを激変させる至高のサービス総まとめ! - paiza times
  • ブラウザだけでWeb開発に挑戦! 「Cloud9」&「Milkcocoa」でテトリスにWebランキング機能を搭載しよう! - paiza times

    どうも、まさとらん(@0310lan)です。 今回は、ブラウザだけを使って簡単なWeb開発に挑戦し、オンライン上でゲームのスコアを友人・知人と競争できるようなWebランキング機能を実現してみたいと思います! 利用するサービスやツールは以下のとおり。(すべて無料) ・開発環境に、オンラインコードエディタの「Cloud9」 ・サーバー周りのバックエンドに「Milkcocoa」 ・CSSフレームワークとして「Milligram」 ・ゲームとして遊ぶテトリスに「Blockrain.js」 ・公開用サーバーとして「GitHub Pages」 これらを組み合わせれば、今すぐブラウザを開いて誰でも簡単に開発を始めることが可能です! ■開発の準備をしよう! まずは、開発を始める前に「GitHub」と「Cloud9」のユーザー登録を済ませておきましょう。 そして、「GitHub」のマイページから新しいレポジ

    ブラウザだけでWeb開発に挑戦! 「Cloud9」&「Milkcocoa」でテトリスにWebランキング機能を搭載しよう! - paiza times
    vinzentvladimir
    vinzentvladimir 2016/04/11
    ブラウザだけでWeb開発に挑戦! 「Cloud9」&「Milkcocoa」でテトリスにWebランキング機能を搭載しよう!
  • JavaScript初心者を一気に上級者へ導く海外の無料動画ベスト6を一挙公開! - paiza times

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

    JavaScript初心者を一気に上級者へ導く海外の無料動画ベスト6を一挙公開! - paiza times
  • 4月からエンジニアになる人が入社前から読んでおくべきITニュースサイト10選 - paiza times

    Photo by Boris Schubert こんにちは。谷口です。 4月からITエンジニアとして入社される皆さん、おめでとうございます! 学生の方や新社会人になる方々とお話をしていると、「就活中や入社前に見ておくと役立つサイトはありますか?」「入社後はどういった情報サイトで情報収集や勉強をすると良いですか?」といった質問を受けることが非常によくあります。 最新技術や新しいプロダクト等の情報等を収集するのは技術者としてとても重要です。 ITエンジニアになる方々の中には「そんなの学生のうちからやってるぜ」という方もいらっしゃるかと思いますが、実際にお話をすると「もうすぐ社会人になるけど、何で調べるといいのかよくわかんないです…」という方も多いのが現状です。 そこで今回は4月にITエンジニアとして新卒入社をされる方々が、デキるエンジニアになるためにチェックすべきIT系情報サイトを、大きく分野

    4月からエンジニアになる人が入社前から読んでおくべきITニュースサイト10選 - paiza times
  • 地図アプリの開発を爆速化する「Webマッピング」サービスの活用術を大公開! - paiza times

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

    地図アプリの開発を爆速化する「Webマッピング」サービスの活用術を大公開! - paiza times
  • 初心者におすすめ!Python3を習得できる4つの学習法と11のコンテンツ - paiza開発日誌

    Photo by Kathleen Franklin こんにちは。谷口です。 先日、プログラミング言語別エンジニアの平均年収ランキングにて、Pythonが651万円で1位になったことが話題になりました。 www.itmedia.co.jp Python機械学習人工知能分野、計算系の研究に適したライブラリが非常に多く、各分野の研究の盛り上がりとともにニーズが増えています。また、もちろんそういった研究分野だけでなくYouTubeやInstagram、Dropbox等といったメジャーなWebサービスでも多く使用されています。 Pythonは他のプログラミング言語に比べても、構文がシンプルで、一つの処理について誰がコードを書いても同じ書き方になりやすいという特徴があります。そのおかげで初心者でも比較的コードが書きやすく、また他人が書いたコードを読む際も読みやすい言語となっています。プログラミン

    初心者におすすめ!Python3を習得できる4つの学習法と11のコンテンツ - paiza開発日誌
  • Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開! - paiza times

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

    Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開! - paiza times
  • Webアプリの開発で面倒な作業を一発解消してくれる無料Webサービス9選! - paiza times

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

    Webアプリの開発で面倒な作業を一発解消してくれる無料Webサービス9選! - paiza times
  • 何のために働くのかわからなくなった時、ヒントをくれる技術者達の言葉12 - paiza times

    Photo by Petras Gagilas こんにちは、谷口です。 毎日仕事をしていると、仕事やキャリアについてどうすべきか悩むことがあると思います。 「開発は好きだけど、激務で精神的にも疲れてきた」 「自分で便利なシステムを考えて作りかったけど、現実は振ってきた案件を消化するだけになってる気がする」 「やりたいことがわからなくなってきた……自分はこのままでいいんだろうか?」 等々……課題や壁にぶつかったとき、不安が消えずにどうしたらよいかわからくなったとき、世界の著名なIT技術者や経営者の方々の言葉が助けになることもあります。今回は彼らのマインドに触れられるよう、ヒントになりそうな言葉を抜粋して集めてみました。(元の発言が英語によるものは意訳になります) ■ITエンジニアや経営者たちによる名言 ◆ポール・グレアム(スタートアップ養成所・Yコンビネーター創業者) 他人にとっては仕事のよ

    何のために働くのかわからなくなった時、ヒントをくれる技術者達の言葉12 - paiza times
  • 1