タグ

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

  • 現役エンジニアが使っているSublime Textの超便利プラグインと設定21個 - paiza times

    Photo by Antonio Tajuelo 長田です。 みなさんコーディングするときのエディタって何を使ってますか? paizaはRubyで作られているので、中のエンジニアRubyMineを使っている人が多いんですが、今年入社した私はSublime Text派です。Sublimeはいいぞ…。 今回は、Sublime Textを使うメリット・デメリット、実際に開発で使っていて便利なプラグインや設定の小技とかを書きます。Sublime仲間の皆さんや、Sublime使ってみたいなっていう人の参考になればうれしいです。 ■Sublime Textを使うメリット ◆シンプル Sublime Textは、有志が作るパッケージなどで自由にカスタマイズできますが、そのぶん最初はあまり機能が充実していません。 これはデメリットに感じる人もいるかもしれませんが、私は「いろいろやってくれるけど初期状態か

    現役エンジニアが使っているSublime Textの超便利プラグインと設定21個 - paiza times
    taks1
    taks1 2018/04/10
  • ファイルアップロードや画像編集を劇的に簡易化するJavaScriptライブラリ「Uploadcare」を使ってみた! - paiza開発日誌

    どうも、まさとらん(@0310lan)です! 今回は、自分のWebサイトに高機能な「ファイルアップローダー」を簡単に組み込めるJavaScriptライブラリをご紹介します! PCのローカルファイルや画像URL、多彩なオンラインストレージやSNSなどの写真も活用でき、画像編集もできるAPIが提供されているので非常に便利ですよ。 【 Uploadcare 】 ■「Uploadcare」の使い方! それでは、実際に「Uploadcare」を使いながら、どのようなサービスなのかを詳しく見ていきましょう! まずはトップページにあるボタンをクリックして、ユーザー登録を済ませておきます。 「GitHub」や「Google」のアカウントでもログインできるので簡単です。 ログインすると、自分専用の「ダッシュボード」が表示されます。 画面中央に表示されている「Create a project」ボタンをクリック

    ファイルアップロードや画像編集を劇的に簡易化するJavaScriptライブラリ「Uploadcare」を使ってみた! - paiza開発日誌
    taks1
    taks1 2017/10/28
  • JavaScriptでIoT開発!ブラウザ上の無料開発環境で「micro:bit」を使ったガジェットを自作してみよう - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、「micro:bit」を使ってJavaScriptによるIoT開発に挑戦してみたいと思います! ブラウザさえあれば、無料の開発エディタからプログラミングすることが可能なうえ、エミュレータも搭載されているので「micro:bit」を持っていない人でも楽しめるようになっています。 記事後半で4つのサンプル作りを解説しているので、ぜひみなさんも自作ガジェット作りを楽しんでみましょう! 【 mciro:bit 】 ■「micro:bit」とは? もともとはイギリスの学校教育向けとして誕生した「micro:bit」ですが、その扱いの簡単さから現在ではさまざまな国の授業で活用されているマイコンボードです。 クレジットカードよりも小さい「5cm × 4cm」の極小ボードに、多彩な機能がいっぱい詰まっているのが特徴です! 電子パーツを買い揃えなくても、

    JavaScriptでIoT開発!ブラウザ上の無料開発環境で「micro:bit」を使ったガジェットを自作してみよう - paiza times
    taks1
    taks1 2017/09/04
  • Webアプリ、ゲーム、IoTまで!ブラウザだけでJavaScript開発環境が構築できるWebサービスまとめ - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、ブラウザだけで格的なWebアプリの開発から、ゲーム、IoTまで幅広くトライできる無料のWebサービスを厳選してみました! それぞれの用途に特化したWebエディタをピックアップし、その特徴や機能などを解説しているのでご興味ある方はぜひ参考にしてみてください! ■React & Angular開発に特化したWebエディタ「StackBlitz」! 【 StackBlitz 】 JavaScript開発でのフレームワークと言えば「React」「Angular」が有名ですが、いざ開発を始めようとするとサーバーの準備や関連パッケージの導入など…環境の構築が面倒だったりします。 ところが、この「StackBlitz」はクリック1発で「React」「Angular」の開発環境が整った状態のWebエディタが即座に起動します! コードエディタとしても優

    Webアプリ、ゲーム、IoTまで!ブラウザだけでJavaScript開発環境が構築できるWebサービスまとめ - paiza times
    taks1
    taks1 2017/08/25
  • ブラウザだけで簡単にプログラミング動画を作って公開できる「Scrimba」を使ってみた! - paiza times

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

    ブラウザだけで簡単にプログラミング動画を作って公開できる「Scrimba」を使ってみた! - paiza times
    taks1
    taks1 2017/08/07
  • 35歳を超えてもエンジニアを続けていくために必要な5つのこと - paiza times

    Photo by Boris Baldinger こんにちは。谷口です。 ITエンジニアの「35歳定年説」は、今や過去のものとして崩れつつあります。IT人材の不足が極めて課題視されている昨今、現実には35歳を超えてエンジニアとして活躍している人や、転職に成功している人もたくさんいます。 ただ、年齢を重ねると、若い頃とは同じようにいかない場面が増えてくるのもまた現実です。 ある程度年齢を重ねた方の多くは、「今後もITエンジニアとしてやっていきたい」と思う一方で、若い頃みたいにバリバリ働けなくなってきたとか、新しい技術に興味が持てなくなってきたとか、仕事に刺激がなくなってきたとか、若いやつらの方が自分より優秀で焦るとか……すごく若いわけではなくなった今の自分と、これからもっと若くなくなっていく将来の自分に対して、何かしらのもやもやを感じた経験があるのではないでしょうか。 というのも、paiza

    35歳を超えてもエンジニアを続けていくために必要な5つのこと - paiza times
    taks1
    taks1 2017/08/02
  • JavaScriptで人工知能を活用した画像解析ができる「Kairos」で顔認識をやってみた! - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、人工知能を活用した高度な画像解析を、簡単なJavaScriptコードで実現できるWebサービスをご紹介します! 画像に写っている「顔」を認識させて、その人物の「感情」を読み取ったり、顔の座標データを取得するようなことが簡単にできるのでオススメです。 【 Kairos 】 ■「Kairos」の使い方! それでは、実際に「Kairos」を使いながら、どのような画像解析ができるのかを見ていきましょう! まず最初に、以下のリンクからユーザー登録を済ませておきます。 【 ユーザー登録ページ|Kairos 】 メルアドやパスワードなどを登録するだけで、誰でも利用可能です。(登録したメルアドにリンクが送られてくるので、それをクリックしてログインします) ログインしたら、自分専用の「ダッシュボード」が表示されます。 画面下に、「App ID」と「Key

    JavaScriptで人工知能を活用した画像解析ができる「Kairos」で顔認識をやってみた! - paiza times
    taks1
    taks1 2017/07/21
  • 企画や営業など非エンジニア職がSQLを勉強したらメリットばかりだった話 - paiza開発日誌

    Photo by Linux Screenshots こんにちは、谷口です。 あなたの会社ではSQLを使える人の割合はどれくらいでしょうか? ITエンジニアであれば多くの人が日頃から使っているSQLですが、それ以外の職種では「SQLを使えないので、データがほしいときはエンジニアにお願いしている」という人も多いかと思います。 ただ、自分でSQLを使えないと、今すぐデータがほしいのに確認できるまで時間がかかったりして不便なことも多いですよね。また、エンジニアにとっても、開発中にちょっとしたデータ取得がいくつも差し込まれたり、「データが思っていたのと違った」と言われてやり直しになったりするのはストレスになってしまいます。 paiza社内でも、かつてはそんな状態でしたので、社内で非エンジニア職向けにSQLの勉強会を実施するようになりました。現在は、営業・企画・事務局など、さまざまな職種の人たちも自

    企画や営業など非エンジニア職がSQLを勉強したらメリットばかりだった話 - paiza開発日誌
    taks1
    taks1 2017/06/21
  • コード不要で手描き風のSVGアニメーションを自動作成できるエディタ「Vivus Instant」の使い方大公開! - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、誰でも超簡単にSVG画像をアニメーション化できる無料のWebサービスをご紹介します! このサービスは、JavaScriptSVG画像を制御できる「vivus.js」をベースにしており、誰でもプログラミング不要で簡単に「手描き風」のアニメーションを作れるのが特徴です。 【 Vivus Instant 】 そして記事の後半では「vivus.js」を使った基的なプログラミングについても解説しているので、ご興味ある方はぜひ参考にしてみてください! ■「Vivus Instant」とは? それでは、実際に「Vivus Instant」を使いながら、どのようなサービスなのかを見ていきましょう! まずは、サンプルとして次のようなSVG画像を用意しました。 SVGは、ベクター形式で描かれたXML構造を持つデータですが、このままでは当然ながら静止画

    コード不要で手描き風のSVGアニメーションを自動作成できるエディタ「Vivus Instant」の使い方大公開! - paiza times
    taks1
    taks1 2017/06/16
  • 遊ぶだけでプログラミングが身につく、7つの本格的ゲームが楽しすぎる! - paiza times

    Photo by Trevor Owens こんにちは。谷口です。 プログラミング初心者の皆さんは、これから何を使って勉強しようと考えていますか? paizaを運営していると、 プログラミング未経験だけど勉強を始めたい 環境構築や経験者向けの書籍に挑戦したけど挫折してしまった 周りにプログラミングを教えてくれる人がいない 何をどう始めたらいいのかわからない といったお悩みを聞くことがあります。 最近は、学習サイトや書籍やスクールなど、いろいろなスタイルでプログラミングを学べますが、自分に合わないやり方で進めていくと 金銭面の負担が大きくて続けられない 途中で理解できなくなって挫折 プログラミングが楽しくなくなって断念 ということも起こりえます。 そこで今回は、初心者向けの問題を解きながらプログラミングを勉強できて、格的なゲームとしても楽しめるコンテンツを7件ご紹介します。 【目次】 ■ロ

    遊ぶだけでプログラミングが身につく、7つの本格的ゲームが楽しすぎる! - paiza times
    taks1
    taks1 2017/05/30
  • コーディング不要・初心者でもブラウザだけで万能チャットボットを作れる「Tars」の使い方大公開! - paiza開発日誌

    どうも、まさとらん(@0310lan)です。 今回は、誰でもプログラミング不要、「チャットボット」を制作して公開できるWebサービスのご紹介です! 作れるボットの種類も幅広く、例えば…予約注文、カスタマーサポート、FAQ…などに対応するチャットボットを簡単に構築可能です! 活用次第では、自分自身を紹介するポートフォリオボットや、イベントなどの告知ボット、仕事の打ち合わせ用にスケジュール調整ボット…などなど、とにかく広い用途に作れて楽しいので、ぜひトライしてみてください! 【 Tars 】 ■「Tars」の始め方 それでは早速ですが、実際に「Tars」を使いながら、どのようなサービスなのかを見ていきましょう! まずは、サイトにアクセスして「ユーザー登録用」のボタンをクリックします。 「ユーザー名」「メルアド」「パスワード」を入力すれば、登録完了です! すると、自分専用の「ダッシュボード」が表

    コーディング不要・初心者でもブラウザだけで万能チャットボットを作れる「Tars」の使い方大公開! - paiza開発日誌
    taks1
    taks1 2017/04/28
  • 初心者でも簡単にWebサイトを面白くできるJavaScriptライブラリ8選を徹底解説! - paiza times

    どうも、まさとらん(@0310lan)です。 みなさんは、JavaScriptライブラリを活用されているでしょうか? Web開発を効率化してくれたり、便利な機能を手軽に組み込んだりできるわけですが、今回はちょっと趣向を変えて「Webの楽しさ」を味わうことができるインタラクティブなライブラリを厳選してみました。 開発者もユーザーも双方に楽しめると思いますので、ぜひ参考にしてみてください! 目次 ■音楽に合わせて「HTML要素」がダンスするライブラリ! 【 Rythm.js 】 ■Canvas図形を超ラフな「スケッチ画」にするライブラリ! 【 Rough.js 】 ■「立体視」による3D画像を生成できるライブラリ! 【 MagicEye.js 】 ■PC・スマホに「パターンロック認証」を導入できるライブラリ! 【 patternLock.js 】 ■テキストを「タイプライター風」に表示するライ

    初心者でも簡単にWebサイトを面白くできるJavaScriptライブラリ8選を徹底解説! - paiza times
    taks1
    taks1 2017/04/03
  • JavaScriptだけで「AI(人工知能)」による高度な画像認識を実現する「Clarifai」の超簡単チュートリアル大公開! - paiza times

    どうも、まさとらん(@0310lan)です。 今回は、最近よく話題になっている「AI人工知能)」を活用し、写真を自動認識して何が写っているのかを教えてくれる機能を作ってみたいと思います! 「なんだか難しそう…」と、思うかもしれませんが、ごく普通のJavaScriptだけで完結できてしまう優秀なWebサービスがあるので、そちらも合わせてご紹介していきます! 【 Clarifai 】 ■「Clarifai」を使った画像認識とは? まず最初に、「Clarifai」を使って画像認識を体験できる公式の「サンプルデモ」があるので、これを使いながらどのようなサービスなのかを見ていきましょう。 サイトにアクセスして、画面上部にある「Demo」をクリックします。 すると、「画像認識エディタ」が起動します! この画面下部にある写真を選択するか、自分で用意した画像をアップロードすることで、「AI人工知能)」

    JavaScriptだけで「AI(人工知能)」による高度な画像認識を実現する「Clarifai」の超簡単チュートリアル大公開! - paiza times
    taks1
    taks1 2017/03/27
  • JavaScript開発はこれ1つでOK!超お手軽にWebアプリを作れる全部入りコードエディタ「Gomix」の使い方大公開! - paiza開発日誌

     どうも、まさとらん(@0310lan)です。 今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です! バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML / CSS / JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。 【 Gomix 】 以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。 ■基的な使い方! それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう! まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコード

    JavaScript開発はこれ1つでOK!超お手軽にWebアプリを作れる全部入りコードエディタ「Gomix」の使い方大公開! - paiza開発日誌
    taks1
    taks1 2017/03/15
  • 【2017年版】ブラウザ上で使えるJavaScript開発&実行環境Webサービスの厳選まとめ - paiza times

    どうも、まさとらん(@0310lan)です。 今回は、これからJavaScriptを学習しようという人や、ちょっとしたプロトタイプを開発したい人に向けて、オススメの「オンラインコードエディタ」を厳選してご紹介しようと思います! 選んだ基準としては…、 SSL対応のWebサービス JavaScriptの実行環境が備わっている 作成した「コード」や「作品」の公開が可能 面倒なログイン不要ですぐに使える 無料で利用できる …などの点を重視しながら、誰でも「ブラウザ」さえあれば今すぐ使えるモノをまとめてみたので、ご興味ある方はぜひ参考にしてみてください! ■Webページとしても公開できる実用的なエディタ! 【 PLAYCODE 】 「PLAYCODE」は、まだ新しいサービスですが、JavaScriptプログラミングの学習はもちろんのこと、ちょっとしたプロトタイプの開発に最適なコードエディタと言える

    【2017年版】ブラウザ上で使えるJavaScript開発&実行環境Webサービスの厳選まとめ - paiza times
    taks1
    taks1 2017/01/31
  • Web上からソースコードの圧縮・整形・変換など190以上のツールを利用可能な「BeautifyConverter」を徹底解説! - paiza times

    どうも、まさとらん(@0310lan)です。 今回は、ブラウザ上からWeb制作などで便利に使えるミニツールを190以上も搭載した異色のWebサービスをご紹介しようと思います! 特に、ファイル関連のジェネレーターやコンバーターが豊富に揃っているのが特徴で、コンソールからタスクランナーなどを起動する必要もなく、フロントエンド側だけでちょっとした制作を行うのに最適だと思います。 【 BeautifyConverter 】 「BeautifyConverter」は、主にファイルの「圧縮」「整形」「変換」などから「構文チェック」「画像変換」「各種ジェネレーター」…など、多種多様な便利ツールが揃っています。 登録不要で、誰でも今すぐブラウザから利用できるので、ブックマークしておいて損はないでしょう! ■基的な使い方! 「BeautifyConverter」の基的な使い方を実際に試しながら、どのよう

    Web上からソースコードの圧縮・整形・変換など190以上のツールを利用可能な「BeautifyConverter」を徹底解説! - paiza times
    taks1
    taks1 2017/01/07
  • Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた! - paiza times

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

    Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた! - paiza times
    taks1
    taks1 2016/12/21
  • 知らなきゃ損する!Web開発で絶対使いたくなる、人気のJavaScriptライブラリ8選と導入方法を公開 - paiza times

    どうも、まさとらん(@0310lan)です。 今回は、毎日のように誕生する新しいJavaScriptライブラリの中から、思わず使ってみたくなるようなオススメのライブラリを厳選してご紹介しようと思います。 そのままWebアプリとして活用できそうなモノから、コードの書く量を大幅に減らしてくれたり、ユーザー体験を一気に向上してくれるモノまで、幅広いジャンルをまとめていますので、ご興味ある方はぜひ参考にしてみてください! ■入力された内容を自動検証する! 【 Cleave.js 】 フォームなどでよく使う「inputタグ」で、何が入力されたかを検証して意図しないデータ入力を簡単に防ぐことができるのが「Cleave.js」です。 使い方は非常にシンプルで、例えば「電話番号」を入力する「inputタグ」があったとします。 <input type=”tel” id=”input-tell” /> 「in

    知らなきゃ損する!Web開発で絶対使いたくなる、人気のJavaScriptライブラリ8選と導入方法を公開 - paiza times
    taks1
    taks1 2016/12/09
  • ブラウザだけで今すぐ使える!無料の「ゲーム開発環境」Webサービス厳選まとめ! - paiza times

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

    ブラウザだけで今すぐ使える!無料の「ゲーム開発環境」Webサービス厳選まとめ! - paiza times
    taks1
    taks1 2016/11/26
  • ブラウザ上で超簡単にWebサイトが作れる!Bootstrap4対応のWeb制作エディタ「Pingendo」の活用ワザを一挙大公開! - paiza times

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

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