タグ

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

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

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

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

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

    Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた! - paiza times
    ji_ku
    ji_ku 2016/12/20
  • 知らなきゃ損する!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
  • 「いつか勉強する」を実現できたことありますか?現役エンジニアがやっている勉強法10 - paiza times

    Photo by UBC Learning Commons こんにちは。谷口です。 自分以外のエンジニアを見ていて、「どうしてこんなことまで知っているんだろう?」「何でここまでできちゃうんだろう?」と思うことはありませんか? デキるエンジニアたちは、やはり裏でいろいろな勉強をしています。とはいえ、誰もが業務後や休みの日に何時間も難しい勉強をしている…というわけではありません。 結論から言うと、彼らは情報収集やインプットなどに関して、普段の生活の中で効率よく学べる仕組みを作っているため、無理のない勉強とスキルアップができているのです。 では、具体的にどんな勉強法を実施しているのか? 今回は、弊社でpaizaを作っているエンジニアたち(記事公開当時)に比較的簡単に習慣化しやすい学習方法を聞いてきましたので、ご紹介いたします。 「なかなか勉強のための時間が作れない」「どういうステップで勉強したら

    「いつか勉強する」を実現できたことありますか?現役エンジニアがやっている勉強法10 - paiza times
  • Web開発が捗るFirebase入門!JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開! - paiza times

     どうも、まさとらん(@0310lan)です。 今回は、Webサービスなどを開発する際に、ユーザーの管理や識別などで必要になる「ユーザー認証」機能を、できるだけシンプルに作ってみたいと思います。 利用するのは、さまざまなバックエンド機能を提供するGoogleの【 Firebase 】です! 非常に多機能なサービスですが扱いはとてもシンプルで、簡単なコードを覚えてしまえば誰でも活用できるはずです! 自分でサーバーを用意する必要もなく、基的な機能は無料で使えるので今すぐ始められるのも特徴と言えるでしょう。 ■始め方! 今回は、「メールアドレス」と「パスワード」でログインする一般的な「ユーザー認証」ページの作成に挑戦してみましょう! そこで、まずはFirebaseにアクセスして新規にプロジェクトを作成します。 好きな「➀プロジェクト名」と、自分の「➁国名」を指定します。 すると、プロジェクト

    Web開発が捗るFirebase入門!JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開! - paiza times
  • 面倒な設定不要!無料でWebサイトをSSL化してホスティングする超お手軽サービス厳選まとめ! - paiza times

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

    面倒な設定不要!無料でWebサイトをSSL化してホスティングする超お手軽サービス厳選まとめ! - paiza times
  • SIerの「開発」と「運用保守」分離がまねく3つの弊害 - paiza times

    Photo by Photo4jenifer 今回のpaiza開発日誌は片山がお送りします。 近年Webビジネスにおける開発業務は、システムが売上や収益と直結しているため、素早い開発が求められるようになり、開発と運用が協力する継続的インテグレーションやDevOpsという概念が重要になってきています。 逆にSIerでは開発と運用・保守の分離がされたままで、特にITエンジニアの成長阻害要因になっていると考えられます。この「開発と運用保守の分離」は、SI業界で働くITエンジニアにとっては、「人月商売」「多重下請け構造」と並ぶ三つ目の問題になっているのではないかと思います。 そこで今回はITエンジニアがキャリアを形成していく上で、開発と運用保守の分離がもたらす弊害について考察してみたいと思います。 ■運用・保守とは何か? SIerではシステム開発の場において、大きくは「開発チーム」と「運用・保守チ

    SIerの「開発」と「運用保守」分離がまねく3つの弊害 - paiza times
  • 新規事業を潰してわかった、失敗するスタートアップの8の兆候 - paiza times

    Photo by Jeff Attaway 今回のpaiza開発日誌は片山がお送りします。 paizaの運営を始めて3年半ほどたちました。 大変なこともたくさんありましたが、ユーザー数もこの1年で約6万人ほど増えるなど、事業もだいぶ軌道に乗ってきました。 paizaはメディアビジネスなので、ITエンジニアと求人企業がそれなりの数集まらないと成り立ちません。初期投資もそれなりに必要だったため、最初のころは資金がすごい勢いで溶けていく割には先が見えない、まさにヒリヒリと「痺れる」毎日をすごしていました。 最近ではようやく事業も軌道に乗ってきましたが、ここまで来るためには、paizaを立ち上げる前に一度、新規事業立上げで失敗した経験がとても役立ちました。 今回は、その失敗から学んだことをまとめてみました。何かの参考になれば幸いです。 ■スタートアップ立上げをやってみて分かった失敗の法則 paiz

    新規事業を潰してわかった、失敗するスタートアップの8の兆候 - 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
  • 生存戦略としてITエンジニアが35歳までに考えておくべき3つの事 - paiza開発日誌

    Photo by Financial Times 今回のpaiza開発日誌は片山がお送りします。 仕事柄色々なITエンジニアの方と話す機会があるのですが、全般的にエンジニア技術面についての探求は強いけれど、自分のキャリアについての探求はわりとのんびりしている方が多いのだなと思う事が良く有ります。また、そのあたりで働き方の面で少し損しているかも、と感じる事があります。 エンジニアは、どうしたら自分のスキルを生かして自分のやりたい開発を続けることができるのか、夢を叶えられるのか、そのためにはどのようにキャリアに向き合ったらいいのかについてまとめてみました。 ■キャリアは自分で考える時代 少し損をしているなと思った例で言うと、、、 とりあえず開発できればいい⇒常駐や保守メインの仕事 30代半ばで初めての転職、かつSI、組み込み⇒Webなどの業界チェンジ それぞれ結構レベルの高い方です。1のタイ

    生存戦略としてITエンジニアが35歳までに考えておくべき3つの事 - paiza開発日誌
  • 面倒な手続き不要!「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開発日誌
    ji_ku
    ji_ku 2016/06/21
  • AWS,Docker,Ansible...ウェブエンジニアが知っておくべきインフラ技術8選 - paiza times

    ↑2016年のよく使われるDevOpsツール。Docker、Ansibleが伸びています。 (RightScale: New DevOps Trends: 2016 State of the Cloud Surveyより) こんにちは、吉岡(@yoshiokatsuneo)です。 ウェブサービスを作るにはどうしたらいいでしょうか? 当然ですが、プログラムを書く必要があります。Ruby on Rails、MEANスタック、LAMP、などフレームワークを選択した後は その方法論に従ってコードを書いていきます。 開発はローカルのパソコンで行いますので、サーバ・ネットワークなどインフラについて考える必要はありません。 しかし、実際にサービスをリリースして使ってもらうには、そのサービスをサーバで動かす必要があります。 サービスを安定して継続的に動作させるにはインフラの知識が不可欠です。 従来、ハード

    AWS,Docker,Ansible...ウェブエンジニアが知っておくべきインフラ技術8選 - paiza times
  • Dockerは危険という誤解と、本当に注意すべき点 - paiza times

    こんにちは、吉岡(@yoshiokatsuneo)です。 Dockerは、シンプルで使い易い軽量仮想環境という特徴を生かして急速に発展しており弊社でも利用しています。 しかし、独自の概念を持つことや、機能が次々追加されていることから、誤解を生じることもあります。 特にセキュリティについては感情的になりやすいので正確な情報を把握することが大切です。ここでは、Dockerコンテナのセキュリティについてよくある誤解と注意点を紹介します。 ◆Dockerコンテナのセキュリティに関する誤解 コンテナを単に実行するだけで、ホストや他のコンテナがのっとられる コンテナは隔離環境で実行されますので、単純に(オプションを明示せずに)一般的なコンテナを実行するだけで、ホストや他のコンテナがのっとられることは現状はありません(知られてはいません)。 ホストのディレクトリ・ファイルを共有すれば、ホストのファイルに

    Dockerは危険という誤解と、本当に注意すべき点 - paiza times
    ji_ku
    ji_ku 2016/06/09
  • JavaScriptでグラフ描画入門!全8個のライブラリをコード付きで一挙に解説! - paiza times

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

    JavaScriptでグラフ描画入門!全8個のライブラリをコード付きで一挙に解説! - paiza times
  • 初心者でもほぼ無料でR言語を勉強できるコンテンツ10選 - paiza開発日誌

    Photo by Hermann Kaser こんにちは。谷口がお送りします。 ITエンジニアの方の中には「R言語を学習したい」という方も多くいらっしゃるかと思います。 R言語は、データ分析やデータ処理に特化したオープンソースのプログラミング言語です。システムを開発をする他のプログラムミング言語とは位置付けが異なり、統計解析機能が付いていて、解析処理やその結果をグラフィカルに表示することができます。 そのため、多量のデータ解析が求められるソーシャルゲームの解析や、リサーチ、データマイニング、アソシエーション分析が必要な業務の求人が増えています。 また近年データサイエンティストが注目されていることもあり、今後求人が増えることが予想されます。 そこで今回は、プログラミング未経験~初心者の方が、なるべくコストをかけずにR言語に触れられて、学習に役立てられるコンテンツを10件ご紹介していきます。

    初心者でもほぼ無料でR言語を勉強できるコンテンツ10選 - paiza開発日誌
    ji_ku
    ji_ku 2016/06/06
  • ある社内プログラマが初めて技術書(『Docker実戦活用ガイド』)を出版するまで - paiza times

    こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 先日の記事のように、Docker技術書Docker実戦活用ガイド』(マイナビ出版)を出版しました。 (現在、Amazonではサーバ、ネットワーク書籍のベストセラー1位になっているようです。) 今回、はじめて技術書を出版したのですが、 どのような流れで書籍を出版するようになったか紹介してみたいと思います。 実は、書籍の出版はソフトウェア開発の流れと似ていることもわかります。 企画 技術書を書く予定は全くなかったのですが、機会は突然やってきました。 まず、今年の1月はじめに出版社の方からDockerの書籍執筆について、問い合わせをメールでいただきました。 以前にデブサミでDockerについて発表したことがあり、その資料を見たとのことでした。 paizaのオンラインジャッジを支えるDockerとその周辺 まずは話を

    ある社内プログラマが初めて技術書(『Docker実戦活用ガイド』)を出版するまで - paiza times
    ji_ku
    ji_ku 2016/06/03
  • 「工数一日」は「明日できる」じゃない!エンジニアと非エンジニアのギャップとは - paiza times

    Picture by ITエンジニアを目指す女子高生たちの学園ライフ4コマ漫画『ぱいじょ!』 こんにちは、谷口です。 ディレクターやプロジェクトマネージャーといった非エンジニア職の方々は、エンジニアとコミュニケーションをとることに難しさを感じたり、考え方にギャップを感じたりしたことがある方もいらっしゃるかと思います。 「エンジニアとわかりあえない…」「エンジニアが何を考えてるのかわからない…」という方のために、エンジニアとのトラブルのもととなるやりとりや、気を付けるとよいことを考えていきますので、非エンジニアの方々の参考になればと思います。 ■「どれくらいでできる?」はその場で決められるものではない 非エンジニアエンジニアのもめごとの原因で多いのが、スケジュールに関することです。 非エンジニア「この機能どれくらいでできる?」 エンジニア「一日でできます」 非エンジニア「じゃあ明日リリース

    「工数一日」は「明日できる」じゃない!エンジニアと非エンジニアのギャップとは - paiza times
    ji_ku
    ji_ku 2016/05/25
  • 地図アプリの開発を爆速化する「Webマッピング」サービスの活用術を大公開! - paiza times

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

    地図アプリの開発を爆速化する「Webマッピング」サービスの活用術を大公開! - paiza times
  • Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開! - paiza times

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

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