フロントエンド開発の３ステップ（npmことはじめ） - Qiita
スライド 当記事は以前勉強会でLTしたものです。 スライドは下記にあります。 フロントエンド覚えること多すぎ問題 モダンなフロントエンド開発で、入門記事を探そうとすると、 まずwebpackやTypeScript, Babelによるビルド環境構築から始まる記事が多くヒットします。 ですが、Node.jsの初心者がいきなり複数のツールを習得しようとすることが 挫折の原因になっていると感じています。 ですので、まずNode.jsをインストールした直後から、必ず使うことになる、 npmの機能をまず覚えておきましょう。 フロントエンド開発で覚えるべき３つのコマンド 以下の3つだけ覚えておきましょう。 npm init npm install npm run これだけ覚えれば、ひとまずフロントエンド開発を進めることができます。 完璧なワークフローを構築するのは、書いているアプリが大きくなってきてから
laravel7チュートリアル
作成日：2019/01/23 更新日：2020/06/23 実行環境：aws cloud9 実行 OS：ubuntu 18.04 LTS PHP バージョン：7.4.7 Laravel バージョン：7.16.1 はじめに 本記事では，PHP のフレームワークである laravel を用いて todo アプリケーションを実装しながら，基礎的な laravel の仕組みを学ぶ．todo リストの大まかな仕様は以下の通り． タスク名・締め切り・コメントの 3 つを入力し，db にデータを保存する． メイン画面ではタスクの一覧を表示し，更新ボタンと削除ボタンを設置． 更新ボタンクリックで更新画面へ移動し，データを更新することができる． 削除ボタンをクリックすると，該当するデータを削除することができる． フレームワークとは フレームワークとは，はじめからよく使用される処理，関数，クラスなどが用意され
Nuxt.js, Firebase, Stripe をフル活用してサーバーレスでJAMStackなECサイトを2日で開発した話 - Qiita
Nuxt.js, Firebase, Stripe をフル活用してサーバーレスでJAMStackなECサイトを2日で開発した話stripeVue.jsFirebasedeprecatedNuxt 本記事で紹介しているサービスの公式Twitterアカウントができました → @jslounge_info はじめに potato4d こと花谷拓磨です。 普段は ElevenBack という屋号のもと、フロントエンドを中心としながらも、デザインやサーバーサイドなどをも含めて作業することが多いのですが、屋号での活動の一環として、 JSLounge という渋谷で活動するハンズオン団体の運営を行っています。 その JSLounge にて過去に開催したハンズオン資料を入手できるサイトを構築することとしました。 通常、ハンズオンとなればその場でメンターがついて 1:1 で進めますが、 JSLounge の資
東京都の新型コロナ対策サイト“爆速開発”の舞台裏 オープンソース化に踏み切った特別広報チームの正体
東京都が公開した「新型コロナウイルス感染症対策サイト」が、都としては異例のオープンソースなWebサイトとして話題になっている。このサイトは、元ヤフー社長の宮坂学副知事率いる「特別広報チーム」が、発足からたった1週間で公開した“爆速開発サイト”だった。 新型コロナウイルス感染症対策サイトでは、都内の新型コロナウイルス感染者数やコールセンターへの相談件数などをグラフや表として掲載し、視覚的に分かりやすくまとめている。 異例なのは、サイトのソースコードをGitHubで公開している点だ。一般の人々でもサイトの構造を確認できるうえ、コードの改善提案（プルリクエスト）を出したり、他の自治体がコードをコピーしてそれぞれの対策サイトを作ったりできる。これまでは、東京都のサイトやサービスでソースコードが公開されることはなかった。 8日ごろには、台湾のデジタル担当政務委員（デジタル大臣）であるオードリー・タン
Electronでアプリケーションを作ってみよう - Qiita
はじめに Electronをご存知でしょうか. Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです. Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています. いわゆるWeb系の技術, Node.js + HTML + CSSでアプリケーションを作成できるのが特徴です. 類似した思想のフレームワークとして, node-webkit(NW.js)もありますが, アプリケーションのエントリポイントの考え方等が異なります. このエントリでは, Electronの使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
Nunjucks (JSテンプレートエンジン) とGulpでHTML開発環境を効率化
こんにちは、Quidamです。 前回の記事「「JSテンプレートエンジンとは？」まとめると大変だった基礎知識」から考察が進み、JSテンプレートエンジン「Nunjucks」を社内標準として使用していくことになりました。ちなみにNunjucksの読み方は「ナンジャックス」です。日本人には何とも言いにくい…。「ナンジャックス」と真ん中にアクセントを置きそうですが、おそらくアクセントは先頭の「ナ」で「ナンジャックス」のよう。…どうでもいいですね。 改めて、今回はNunjucksとGulpでHTML開発環境を効率化する具体的な設定例をご紹介します。 ゴールと前提情報 この記事では、GulpとNunjucksで次のような環境を作る事をゴールとします。 Nunjucksを使って、ヘッダー／フッター／モーダルコンテンツなどの共通HTMLパーツを外部ファイル化し、各ページに合わせてアレンジできるようにする。
時間泥棒確定！PWAで作られた良質なWebゲームアプリ12個を厳選してみた - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、PWAで開発された良質なWebゲームを厳選してみたのでご紹介します！ スマホのホーム画面に配置してアプリのように起動させることもできますし、オフラインにも対応しているのでネットワークが無くても遊べるものばかりです。 通勤途中や休憩時間などで気軽に楽しめるゲームを厳選しているので、ご興味ある方はぜひ遊んでみてください！ PWAとは？ スマホをルービックキューブに変えてしまうアプリ！ 【 The Cube 】 ピッタリ合わせて高層ビルを建築するバランスゲームアプリ！ 【 Tower Game 】 Chromeブラウザに隠された恐竜ゲームを楽しめるアプリ！ 【 Dino Game 】 3D空間で自分の陣地をひたすら守るディフェンスゲームアプリ！ 【 Defend 】 Googleによる毎年恒例のサンタクロースゲームアプリ！ 【 Santa T
エンジニア歴17年の俺が、事業系の開発タスクをバンバン投げてくる非エンジニアに、保守の必要性を死ぬほど分かりやすく説明する。｜じゅ ごん｜note
エンジニア歴17年の俺が、事業系の開発タスクをバンバン投げてくる非エンジニアに、保守の必要性を死ぬほど分かりやすく説明する。 [Ateam Lifestyle x cyma Advent Calendar 2018]の5日目は、株式会社エイチームライフスタイルの@gonjyu121が担当します。 はじめに最近のWEBサービス運営チームというと、事業運営や企画営業のチームと、エンジニアチームが一緒になって働く事が多いですよね。 そんな時、多くのエンジニアが、 「品質保持やリファクタリング、改善系のissue（タスク）の優先度がなかなか上がらず、着手できない・・・・・・」 といった悩みを抱えがちです。これなんですが、非エンジニアの皆さんからすると、 「エンジニアがすごいのは分かるんだけど、何をやってるか、なんでこんな時間がかかるのか、正直分からないんだよなー」 と思っていたりします。こんな話、
メテオフォール型開発 - 実践ゲーム製作メモ帳2
今日は、日本の代表的なソフトウェア開発手法について紹介しよう。 その名も、メテオフォール型開発である*1。 第一節 通常のウォーターフォール型開発におけるプロジェクトはこのような形を取るが、 メテオフォール型開発ではこのような形が取られる。 そしてこうなる。 これはアジャイル型開発手法におけるサイクルであるが、 神の前では無力である。 神の一声は全てを崩壊させ、 民は一生懸命これを再建す。 これが、メテオフォール型開発*2である。 第二節 全てのスケジュールは天界の都合によって決まる。これを黙示録と呼ぶ。 ソフトウェア開発においてフィードバックは重要なファクターだが、 神にフィードバックは届かない。 ただし、祈りを捧げることはできる。この祈りはごくまれに届く。 神は様々な姿を取る。 外から現れることもあれば、 内に棲んでいることもある。 あるいは、まだ会っていない or 会うことすらできな
ReactとPHPでリアルタイムなシミュレーションゲームを作ってみた
複数人でプレイできて、経営シミュレーションの仕組みを取り入れたゲームを作りたい。Stardew Valleyから交流機能を省いた、経営活動ができるゲームだ。 こう考えた私は、PHPとReactJSでゲームを開発することにしました。 しかし問題は、複数人でプレイするゲームの構成や、プレイヤーと経営の仕組みを実装する方法について何も知らなかったことです。 自分自身にReactJSを使うだけの知識があるのかすら分かりませんでした。初期のバージョンではサーバーの処理と経営の仕組みを実装することに重きを置いているので、インターフェイスの構築にはReactJSが適しています。経営の仕組みとして考えている農業とのインタラクションについては自信がありませんが、経営システムを単一のインターフェイスで構築するのは魅力的なアイデアです。 私がJavaScriptによるゲーム開発に関する本を執筆したきっかけは、d
XAMPP/MAMPは不要！チームでの開発に最適なVagrantでの開発環境構築 | 株式会社ウィズモ
こんにちは。しげァsjdasaxnYhsキです。 WEB制作での開発環境について、うちでは案件によりますが、今までは主にXAMPP/MAMPを使用した開発を行っていました。 しかし、時代は流れに流れ、今更ながらPHPでの主な開発環境をMAMPから「Vagrant（ベイグラント）」へ移行させることにしました。 これまでの開発環境の問題点これまでの開発環境についての問題点ですが、よくあるのが以下のようなことでした。 XAMPP/MAMP等でよくある問題点 チームでの開発の場合、それぞれ環境が違うと「あれ、こっち動かないよ」という人がでてくる複数案件を１台でやってるとVirtualHostが溢れるport80が何者かに使われている、そして動かない複数人で環境を揃えるにはそれぞれソフトウェア等のインストールが必要mampなどでの開発環境では、チームでのそれぞれのPHPのバージョンが違ったり、 po
Webアプリ開発を爆速化する高品質なjQuery UI代替フレームワーク5選
WebアプリのUIを1から作るのは手間がかかりますよね。そこでjQuery UIのようなプラグインの出番です。高品質なUIフレームワークを5つ紹介します。 先進的なWebサイトを構築するなら、UIコンポーネントを作り、使いこなす必要があります。欲しい機能がカレンダーでも、スライダー、グラフ、そのほかのユーザーインタラクションの向上や単純化に役立つどのような機能でも、選択肢は自分で作成するか既存の機能を有効活用するかのどちらかです。 コンポーネントを自分で開発すると手間がかかり、複雑な作業になりがちです。本当に画期的な取り組みでないかぎり、有益な時間の使い方とは言えません。こうした場面ではUIライブラリーやフレームワークが活躍します。ライブラリーは一般的なUIコンポーネントを作成する作業を簡単にしてくれます。既存のフレームワークを有効活用すれば、用途に合わせたカスタマイズができます。 特に広
Webサイトからプッシュ通知を送ろう！ JavaScriptでのプッシュ通知の実装方法 - ICS MEDIA
スマートフォンアプリではおなじみのプッシュ通知ですが、ウェブサイトからもプッシュ通知できることをご存知でしょうか？ JavaScriptのServiceWorkerとPush APIを使用することで、ウェブサイトからでもスマートフォンアプリと同様にユーザーにプッシュ通知を送ることができます。また、モバイルだけでなくデスクトップでも通知を行うことができるため、ユーザーエンゲージメントの向上の手法として有効です。 プッシュ通知のデモ プッシュ通知を行う簡単なサンプルを用意しました。Chrome 42以降のブラウザで確認してください（2018年3月現在のChrome 65で動作することを確認しています）。 「プッシュ通知の配信設定」のトグルを選択すると、「cURLコマンド」のボックスにコマンドが生成されます。このコマンドをMacをお使いの方はTerminal上から実行してください。Windows
Fluentd + ElasticSearch + Kibana3で簡単に様々なログを可視化・解析する
ISUCON本戦に参加することができてしまったため，各種ログを集めて簡単に見れると良さそうだなぁと思っていたところ，Fluentd + Elasticsearch + Kibana3の組み合わせがなかなかよさそうだったので試してみました． 本記事では，NginxのAccessLogとMySQLのSlowQueryLogを可視化してみます． Fluentdはご存知の方も多いと思いますが，Treasure Dataのメンバによって開発が進めれているオープンソースのログ収集ツールです．Fluentdに追加された様々なログデータはJSONに変換，アウトプットされます．実装はRubyで行われており，pluginを追加することでで様々なINPUT/OUTPUT先を追加することができます． Fluentdにはリアルタイムにログを収集して活用できることや，様々なログフォーマットの違いを吸収してJSONで同
ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略 - 情報建築家 石橋秀仁
本稿では、まず「ウェブサービス開発の現場で、ウェブデザイナーの仕事はエンジニアに奪われつつある」という脅威を語る。次に、生存戦略を考えるヒントとして「分かりやすい生存戦略」を2つ提示する。「アートディレクター」と「フルスタックウェブデザイナー」という2つの生存戦略だ。 なお、「仕事を奪われていくプロセス」と「生存戦略を遂行するプロセス」について、5〜10年程度のタイムスパンをイメージしている。 ウェブデザイナーの仕事がエンジニアによって奪われつつある ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア／プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。 象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作
プログラマー向け最強フォント「M+」 | ソフトアンテナ
プログラミングに最適なフォントは何でしょうか。海外のブログ記事「The Best Font for Programming: M+」にて、プログラマー向けのベストフォントとして「M+」フォントが推奨されていました(Reddit)。 ブログによるとRetinaディスプレイのような高詳細ディスプレイで使うのに具合がよく(低解像度ではTerminusフォントが推薦されています)、0(ゼロ)とO(大文字のO)のような紛らわしい文字がはっきり区別できる点がお気に入りポイントの様子。 ↑このように。 実は、M+フォントは日本人が開発している日本語対応のフリーフォントです。海外発のフォントの場合アルファベットの見栄えはよくても日本語と合わせるとどうも…といったことが起こりがちですが、M+フォントだとそのような心配は不要だと思います。日本人開発者なら使わない手はないかもしれません。 M+フォントは、個人利
JenkinsでPHPプログラムをデバッグしてみよう!!
先日社内でJenkinsについての勉強会を行ないました。 勉強会を行った際に、JenkinsでPHPプログラムをデバッグしてみましたので 今回はJenkinsを用いてPHPプログラムをデバッグするまでの設定方法について書きたいと思います。 PHPでJenkinsを使ってみたいが、設定がわからないという方は参考にしてください。 Ⅰ：環境 以下の環境で設定を行ないました。 ・OS:Centos6 ・PHP：5.3 ・フレームワーク：ZendFramework ・JenkinsURL：http://jenkins.example.com:8080 （URLはJenkinsをインストールしたマシンのアドレスに変更してください） Ⅱ：サーバ上に準備するもの １：必要なソフト一覧 ①：Phing phpcs,phpmd,phpcpd,phpDocumentor,phpunitを一括管理することができる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイトリニューアルの7ステップと、よりよいサイトを作るための「要件定義」の勘所 | 【レポート】Web担当者Forumミーティング 2018 Spring | Web担当者Forum
KPT（けいぴーてぃー）
TechCrunch | Startup and Technology News
