JavaScriptでファミコン風2Dゲームが作れる無料のWeb開発環境「Bitmelo」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上に2Dゲームを開発できる環境を提供してくれる無料のWebサービスをご紹介します。 ゲームを作るのに必要なキャラクターの作成や効果音などの音作りから、ステージの作成やゲームロジックのプログラミング・ファイルへの書き出しまですべて統合されているのが大きな特徴です。 ゲームを作ってみたいと考えている人は、ぜひ参考にしてみてください！ 【 Bitmelo 】 ■「Bitmelo」の使い方 それでは実際に使いながら、どのようなサービスなのかを見ていきましょう！ 「Bitmelo」は面倒なユーザー登録などは一切不要で、以下のURLにアクセスするだけですぐにブラウザ上にゲーム開発環境が起動します。 ＜BitmeloURL＞ https://bitmelo.com 「Bitmelo」はゲーム開発に必要となる以下の要素をすべて自由に作れるのが大
TypeScript + Vue.js の始め方
こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう！😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います！
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
IFTTTにGoogle Apps Scriptを混ぜたらヤバい化学反応が起こった件 - もぐてっく
はじめに 2010年12月に彗星のごとく現れたWebサービス同士のマッシュアップサービスIFTTT。 「if (this) then (that)」と言うシンプル極まる構文で手軽にWebサービスが連携出来るのが特徴です。 IFTTTは様々なWebサービスをサポートしており、ちょっと挙げるだけでもTwitter、Evernote、Google Drive、Skypeなどの有名どころから、ナニコレ？ってものまで実に多彩です。 加えて、IFTTT独自のサービス群も魅力的です。 スマホ通知、Alexa・Google Homeの音声入力、スマホのウィジェット（メモ、ボタン、写真）など。 それらを前述のシンプルな構文で自由に組み合わせられるのが、IFTTTの魅力だと思います。 IFTTTの弱点 シンプルさが売りのIFTTTなのですが、それがそのまま弱点にもなっているという印象です。 例えば「為替の情報
Firebaseの始め方
はこです。こんにちわ。今日はFirebaseを始めてみたいと思います。 Firebase is 何？ Firebase はGoogleが運営しているサービスで(2014年後半にGoogleが買収)、BaaSとかmBaaSと呼ばれるモノの一種。 ・・・だったはず何だけど、高機能多機能過ぎてヤバイことに。 BaaS/mBaaS is何？ 僕の理解では、mongoDB(或いは各種スキーマレスNoSQL)のクラウド上ホスティングから始まり、その他「サーバで作業しないとアプリ作れないもの」を仮想化するために追加された諸々（ログイン機能、push通知、etc...)のサービスを含む物。簡単にそして素早くアプリを作るためのもの。 たくさんあるけども、基本機能としてどれも「JSONを投げて保存・検索キーでJSON取り出し」がある。 Firebaseの諸機能 中心機能と特徴は 1. リアルタイムデータベース
JavaScriptフレームワーク選定の議論 - Qiita
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
Gulp.js+EJS+JSONを使った複数ページの生成方法 - aircolor memolog
人気のタスクランナーツール「Gulp.js」とテンプレートエンジン「EJS」を下地に、 JSONデータから複数ページを生成できる仕組みを備忘録を兼ねて紹介します。 きっかけ 現在進めている案件で、HTMLを静的かつそこそこ大量に作る事案が発生。 しかし1ページづつ作成・修正するのはとにかくめんどくさいと思われたので、JSONで情報を一括で編集でき、生成も簡単に出来るやり方を確立したかった。 前提・やりたいこと サーバはありものを使用。権限的な問題で新たにパッケージのインストールすることは不可。 PHPが使えないサーバだったため、複製は静的HTMLで行う必要がある。 似たページを1つづつ作成、後で修正をするのはとにかくめんどくさいので、機械的に行いたい。 ページ複製用データは全てJSONファイルにまとめたい。 仕様 書き出しツールとしてGulp.jsを使用。 テンプレートエンジンはEJS。採
最新版で学ぶwebpack 4入門 – JavaScript開発で人気のバンドルツール - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
CodePenっぽいコードプレビュー・管理のできるChrome拡張【Web Maker】
2017年10月24日 便利ツール 先日行ったCSS Nite in HIROSHIMA Vol.10では初めてのライブコーディングを行いながらの登壇でした。今回はそこでコーディングデモを見せるために利用したツール「Web Maker」を紹介します。 ↑私が10年以上利用している会計ソフト！ Web Makerって何？ Web MakerはHTMLやCSS、JavaScriptのコードを書けば、リアルタイムでプレビュー表示できるChrome拡張です。こういったコードのプレビュー・保存はずっとCodePenを使っていましたが、Web Makerのいいところはオフラインで使えるところ！CSS Nite in HIROSHIMAの会場ではWifiが利用できなかったのと、仮にインターネット環境があったとしても遅延があると嫌だなぁということで今回はWeb Makerを試してみました。 ちなみにCod
JavaScriptで爆速グラフ・チャートが作成できる「CanvasJS」を使ってみた！ : うえぶはっく
ちょっとしたデータをサクッと「グラフ」や「チャート」にして、Webページに素早く公開したい人に最適なJavaScriptライブラリ「CanvasJS」のご紹介です！ 類似のライブラリはいくつかありますが、「CanvasJS」はわずか数行のコードですぐにグラフが作成でき、なおかつ豊富なパラメータをいじることで驚くほど細かいカスタマイズも実現できるのが特徴的です。 今回は、基本的な使い方を中心にご紹介しようと思います！ 必要なファイルを準備しよう！ 「CanvasJS」の本体ファイルは、サイトのトップページからダウンロードできますが、CDN経由からも利用できるようになっています。 https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js これを、HTMLファイルに読み込みます！ // index.html <!d
最短で中級者になれる！JavaScriptを入門から学べる最強のサービス・ツール10選 | iPhoneの神様
機種変更では、このような失敗をする方がとても多いです。 有料オプションを契約させられ料金が高くなった。。 待ち時間や契約時間が長くて、半日かかってしまった。。 キャンペーンや割引がきちんと適用されていなかった。。 スマホを乗り換えるときには、 → おとくケータイ で乗り換えをするとキャッシュバックがもらえます。 スマホの機種変更するときは、 →ソフトバンクはこちら →ドコモはこちら →auはこちら キャリア公式オンラインショップがおすすめです。学割や限定キャンペーンなどがもっとももおとくな時期です。 最も人気の言語、JavaScript Redmonkの調査によると、人気言語のランキング第一位はJavaScript (2015年6月発表のデータ,Redmonkより引用) これはGitHubとスタック・オーバーフローというサービスのコミュニティを分析した結果で、見にくいですが１位がJavaS
SPAがネイティブアプリをぶっ壊す：HTML5/Javascriptが変えるWebの未来 - Qiita
はじめに タイトルは半分釣りですが、半分本気で考えてもいます。 近い将来、Webアプリが今のネイティブアプリの市場を超えてくる、と仮説を立てています。 ぜひ、先人のみなさんのご意見やお考えを教えてください。 SPAについて SPAとはなにか（What） 歴史 佐川夫美雄さんのイベントレポートの一部が、非常にまとまっていてわかりやすい部分でしたので、まず引用させていただくこととします。 RIAはアプリケーション利用者に対し高い評価を得ましたが、2010年のAppleショックにより衰退の方向へ向かいます。具体的には2010年にSteve JobsがFlashを激しく批判したことに端を発します。プロプライエタリ(Proprietary Software)なFlashよりオープン性のあるHTML5を推進するようになりました。2011年にはMicrosoftがWeb開発者に対してSilverligh
CodeGrid - フロントエンドに関わる人々のガイド
HTML/CSS 365 CSS仕様 105 CSS設計 53 HTML仕様 40 SVG 25 スタイルガイド 14 HTML/CSSの実践 129 HTML/CSSドリル 4 フォント 3 データ形式 6 性能と品質 49 セキュリティ 16 パフォーマンス 12 アクセシビリティ 21 デザイン 62 ディレクション 48 ドキュメンテーション 7 JavaScript 573 ECMAScript 42 ライブラリ 61 ブラウザAPI 38 WebGL 40 テスト 36 JavaScriptの実践 64 JavaScriptの設計 9 JavaScriptドリル 15 非同期通信 5 Vue.js 73 DOM 9 Angular 30 Electron 4 Web Components 14 jQuery 24 Backbone 17 TypeScript 24 Coffee
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
Ajaxで使えそうなWEBサービスAPI一覧 - Ajax専
※ここの情報は古くなっています。 最新の情報はWeb APIまとめ - Shiz Labsを参照してください。 Ajaxで利用できそうなWEBサービスAPIの一覧です(Ajax専調べ)。数が増えてきたので、見やすいように表示形式を変更しました(2007/04/24)。 ※一部RSSや、Javascriptを貼り付けるだけで動作するような厳密にWEBサービスAPIという定義でないものも含まれます。 【一覧】 01.Google Web APIs 02.Yahoo! Webサービス 03.Amazon Webサービス 04.はてなWebサービス 05.ビッダーズWebサービス 06.お天気Webサービス 07.じゃらんWebサービス 08.スマッチWeb サービス 09.価格.com Webサービス 10.カーセンサー・ラボ Webサービス 11.お仕事検索webサービス 12.Flickr
zuzara.com » 日本で公開されているAPI一覧（下書き）
追記：清書としてusing API;でAPIに関するブログをはじめました。 「ProgrammableWeb: Web 2.0 Mashup Matrix」には海外のAPIがずらりと並んでいますが、日本語圏のAPIの最新のリストは見当たらなかったので集めてみました。 Nakamura-KU ADDICT <>invGeocoder のREST 緯度経度を引数に住所を返す写真共有「フォト蔵」Geocoding API – 住所から緯度経度を検索RSSナビ –開発者の方 (RSSナビ RSET API)Simple API – ウェブサイト・サムネイル化ツールlivedoor PICS WebService – livedoor PICS サービスのお知らせ – livedoor Wiki（ウィキ）ヨコナビ – livedoor ReaderのAPI一覧Weather Hacks – live
メンテナンスフリー！郵便番号から住所を返すライブラリ·ajaxzip3 MOONGIFT
Webシステムを開発している中で郵便番号を入力したら自動的に住所を補完して欲しいという要望は多々ある。実装はそれほど難しいものではない。厄介なのはメンテナンスだろう。市区町村の統廃合によってデータが変わった場合の対応だ。 郵便番号から住所に変換する便利なライブラリ 郵便局から配布されているCSVを都度取り込むという方法もあるが、非常に面倒だ。そこで使ってみたいのがajaxzip3だ。 今回紹介するオープンソース・ソフトウェアはajaxzip3、Ajaxを使って住所を取得するライブラリだ。 ajaxzip3の面白い所はライブラリをGoogle Code上にアップロードしてそのまま利用できてしまう点だ。規約上どうなのかという問題はあるが、そのまま使うと自分でメンテナンスする必要が全くなくなってしまう。自分のサーバであってもajaxzip3を外部のSubversionリポジトリからアップロードす
ステップ・バイ・ステップで Pathtraq の API を使ってみよう - IT戦記
はじめに 「このサイトの人気ページを見たい！」 「このページに、皆いったいどうやって来てるんだろう？」 「このページを見たあとは、どこを見に行ってるんだろう？」 そんなこと思ったことありませんか？ Pathtraq API を使うことで、そんな情報をあなたのソフトウェア、ウェブアプリケーションに組込めるようになりました！やった！ でも、難しいんでしょ＞＜？ 違うよ。全然違うよ。超簡単だよ。 というわけで、今日は JavaScript から Pathtraq API を使ってみましょう！ Step 1 Pathtraq API を目で見てみよう！ やり方は、簡単です。 http://api.pathtraq.com/pages?url=**ここに調べたい URL** とやるだけです。 試しに、このブログを見てみましょう。 RSS が出力されました。 これは、 IT 戦記内で最近人気のページを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
食べログのフロントエンドエンジニアってめっちゃ大変やねん･･･
