編集者が最近のフロントエンド技術に初挑戦して仕事用アプリを作ったので見て - nomolkのブログ
つくったもの 原稿の締切と進捗を管理するシステムです。 これが画面の全体像のキャプチャです。モザイクが多くてよくわからないので、ちょっと説明を加えたのが下の画像です。 上のほうに、その日と翌日の掲載予定記事が出ます。その下にカードのような感じで表示されているのが、各原稿の締切／進捗管理です。 カードは締め切り日順に表示されていて、各カードの内容はこんな感じになっています。締め切りを本人に伝えたかどうかとか、ネタのメモを書き込むことができます。ステータスは未入稿・チェック中・リライト中・入稿済みの4種類があり、手で更新します。 この日は三土さんの締切で、まだ原稿が入稿されていないことがわかりますね。（三土さん晒してすいません。この記事は無事掲載されました） 締切1週間前とか、超過とか、状況によってカード自体の色も変わって気づきやすくなっています。 背景 僕はデイリーポータルZ(以下、DPZ)
JavaScriptで制御できるWebベースの万能マップエディタ「Mapbox Studio」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、自分好みのマップをブラウザ上でカスタマイズしたり、JavaScriptから自在に制御可能な地図サービスのご紹介です！ データを取り込んでマッピングしたり、プラグインによる拡張も可能で自分のWebアプリやサービスなどにも簡単に組み込めるスグレモノです！ 【 Mapbox Studio 】 ■「Mapbox Studio」の使い方 それでは、まず最初に「Mapbox Studio」の基本的な使い方から見ていきましょう！ 初めての人は無料のユーザー登録が必要なので、サイトのトップページにあるボタンをクリックします。 好きなユーザー名・メルアド・パスワードだけで、簡単に登録ができます！ 登録後は、Webページにマップを表示させる簡単なチュートリアルが始まるので、試しにやってみましょう！ 表示された画面にある「JS」の項目をクリック！ 左側の「C
Excel管理の座席表をLeafletでWeb化した話 - LINE ENGINEERING
! This post is also available in the following languages. 英語, 韓国語, ベトナム語 こんにちは、LINEのIT支援室で社内システムの開発と運用をしている岩月です。この記事はLINE Advent Calendar 2017の6日目の記事です。 人員の増加に対応するために、今年の4月、LINEはJR新宿ミライナタワーに移転しました。移転に伴い、IT支援室ではいくつかの新しい社内システムを導入しましたが、今日はその1つである「座席表」についてお話させていただきます。 開発のきっかけ 移転前、座席の管理は以下のようにExcelで行われていました（名前は消しています）。 ◯◯さんの座席を調べたいと思ったら、Excelもしくは変換されたPDFをダウンロードして、ビューアーの検索機能で名前を調べる必要がありました。恐らくよくある運用というこ
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
[Node.js] 無料で簡単にウェブアプリを公開できるサービス「Glitch」を使ってみた！ - Qiita
Glitchとは GlitchはNode.jsのアプリを公開するためのサービスです。 Node.jsでウェブアプリを公開しようとすると、サーバーの設定したりドメインを取得したり…とても複雑です。 Glitchは、あなたの創造性を試すことだけに集中できます。 Glitchは、あの有名なプロジェクト管理ツールのTrelloをつくったFogCreekSoftware社によって開発が進められています！ アプリを公開するためだけでなく、オンラインのEditorなどもついていい感じです。 使ってみる これまでAWSやさくらインターネットなどを使っていましたが、Glitchはずば抜けて簡単です。 まずはGlitchにアクセスします。 新しいプロジェクトの作成1 右上の①[Sign in]ボタンからログインします。 FacebookかGitHubが選べますが、後々GitHubからソースコードを取得すること
![[Node.js] 無料で簡単にウェブアプリを公開できるサービス「Glitch」を使ってみた！ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a6f54dbfed613279dcdfaa6714de0a80cb6008b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTm9kZS5qcyU1RCUyMCVFNyU4NCVBMSVFNiU5NiU5OSVFMyU4MSVBNyVFNyVCMCVBMSVFNSU4RCU5OCVFMyU4MSVBQiVFMyU4MiVBNiVFMyU4MiVBNyVFMyU4MyU5NiVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiU5MiVFNSU4NSVBQyVFOSU5NiU4QiVFMyU4MSVBNyVFMyU4MSU4RCVFMyU4MiU4QiVFMyU4MiVCNSVFMyU4MyVCQyVFMyU4MyU5MyVFMyU4MiVCOSVFMyU4MCU4Q0dsaXRjaCVFMyU4MCU4RCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiVFRiVCQyU4MSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MTc1NTNiOTRkMjc3NGQ1ZjYxYjU2M2E0YjU5YzE0MjI%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5b25lZGFjbyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZTcyNTA4MTU2YmMwZTVmNzQ5ZThkZmYxY2I3OTJiODE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D03b4202c0a5228dc571f35b021dbd12c)
ウェブアプリをソースごとパクる業者に対する対策 - Qiita
こんにちは。みなさんもウェブアプリをリリースしたあとに同業者にソースごとパクられたことってありますよね。難読化しても難読化されたまま同業者のサーバで動くので困ったものです。そこで、私がとった解析しずらい対策をまとめてみたいと思います。 前提 多機能な画面をJavaScriptでゴリゴリ作ったのにもかかわらず、HTMLやCSS、JavaScriptファイル一式を自社サーバにまるごとコピーして、ライセンス表記だけ書き換えて使うような業者を罠にはめるということを想定しています。 当然通信をリバースエンジニアリングする人もいるので、自社サーバでは防げないという前提です。 HTMLにはauthorメタタグ よくあるMETAタグで権利者を明記します。これは権利の主張もそうですが、JavaScript自体に権利者が認定した権利者でなければ無限ループを起こすという処理のためにも使用します。逆に、権利者が我
AsciiDoc と PlantUML と mermaid.js で素敵なテキストベース仕様書ライフ
以前からテキストベースで仕様書(PDF)などを管理したいと思っていたのですが、ようやくその環境が整い、一度実際に運用してみてかなりいい感じだったので紹介したいと思います。 基本テキストは AsciiDoc で記述する UML は PlantUML で記述する フローチャートとかは必要に応じて mermaid.js も使う つまり基本テキストで表現・管理できるものはテキストで書く 成果物は PDF形式。目次(Table of Contents) はつける。 動作確認環境 macOS Sierra 10.12.3 ruby 2.3.1 Asciidoctor 1.5.5 Asciidoctor PDF 1.5.0.alpha.14 Asciidoctor Diagram 1.5.4 mermaid 7.0.0 AsciiDoc とは AsciiDoc Home Page 軽量マークアップ言語の
SlackとGASを使って会社のお弁当発注を自動化した話 - Qiita
こちらの内容は第一回 MAMORIO Meetupで発表した内容をまとめたものです。 背景 弊社ではお弁当が必要な人は前日に注文しておけば、会社が無料で提供してくれる福利厚生があります。（素晴らしいですね ) ちょうど会社の近くに安くて美味しいお弁当屋さんがあり、配達もしてくれるのですが、この注文先のお弁当屋さんは電話かFAXでしか注文を受け付けておらず、誰かが毎日集計して朝お弁当屋さんに注文する必要がありかなり面倒です。 具体的には以下のような作業が毎日必要になります。 集計 呼びかけ: 明日誰がお弁当が必要か聞く リマインド: 集計時に忙しくてすぐ答えてくれない人もいるので未回答の人に対してリマインドする キャンセル: 集計したもののやっぱりキャンセルとなった場合はその分を差し引く 確定&発注: 集計した個数を電話あるいはFaxで発注する この作業を毎日人がやっているようでは、弊社の様
ブラウザだけでJavaScriptを使った3Dゲーム開発ができるWebエディタ「nunuStudio」を使ってみた - paiza times
どうも、まさとらん（@0310lan）です。 今回は、面倒な「インストール」や「ユーザー登録」など一切不要で、ブラウザから即座に起動できる無料の3Dゲーム開発エディタのご紹介です！ ゲームに限らず、3DコンテンツやVRアプリに興味のある方にもオススメのサービスですよ。 【 nunuStudio 】 「nunuStudio」は、既存のWeb技術（Web GL, Web Audio, Web VR…）を融合して構築されているのが特徴で、3D描画は「Three.js」をベースにしており、物理エンジンは「cannon.js」を活用しています。 ■「nunuStudio」を始めよう！ それでは、実際に「nunuStudio」の開発エディタを使ってみましょう！ まず、サイトにアクセスしたら、トップ画面にあるボタンをクリックします。 いくつかの選択肢が表示されますが、ここでは「Web版」のボタンをクリッ
d3.jsでスゴイっぽい図(force layout)を作ってみたら思ったより簡単だった件 - Qiita
スゴイっぽい図((force layout))って何 こんな感じの、なんかビヨーンとなってシャキシャキして動くやつ。 説明するより動くものを見てもらった方が早いかも。 作ったdemo やってみた感想 グワングワン動いて楽しい 動的な描画をするのは難しそうだと思ってたが、そうでもなかった。 d3.js自体も難しいものだと避けてきたが、たくさんの人が記事にあげてくれているからググればなんとかなる。 実際に何かに使うには、描画したいデータを必要なフォーマットに直すところがちょっと大変そう。 解説 0. 全ソース 一旦全ソースを貼ってみる。 コピペしていくつかの値をいじってみるだけでも楽しい。 <!DOCTYPE html> <html> <head> <title>d3test</title> <script src="http://d3js.org/d3.v3.min.js" charset=
TypeScriptの型検査を無効化して型安全性を失わせる落とし穴5つとその避け方 - falsandtruのメモ帳
TypeScriptにはanyを使わないよう注意しても型検査が無効化され型安全性が失われるパターンがいくつかあり、中には致命的なものも存在する。今回はこのパターンをいくつか紹介する。 コールバックのvoid戻り値型 コールバックのvoid戻り値型はすべての型を受け入れるためvoid型 === any型となる。 function f(cb: (a: number) => void): void { return cb(0); } function g(a: number): number { return a; } f(g); このためvoid型の値はvoid演算子を使用して即座に強制的にvoid型に変換しなければならない。 void f(g); ここでは手遅れ。 function f(cb: (a: number) => void): void { return void cb(0); }
GitHubのラベルの変更を通知するreviewkunの紹介 〜Google Apps Script でちょっとしたツールを作る〜 - Hatena Developer Blog
※ GitHub と Slack を利用している人向けの記事になります こんにちは。はてなでアプリケーションエンジニアをしている id:hatz48 です。 社内で使っているちょっとしたツールの紹介と、それを作るのに Google App Script を利用したら楽だったという話をしようと思います。 どんなツールですか github.com はてなでは現在、コードの管理に GitHub/GitHub Enterprise、コミュニケーションツールに Slack を利用しています。 GitHub と Slack を利用していれば、おそらくその二つの連携機能 も利用しているのではないかと思います。連携はとても便利ですが、現状すべての活動を Slack に流すことが出来るわけではありません。出来ないことのうちの一つが「ラベル変更」の通知です。 はてなではいくつかのチームで、ラベルによるレビュー
CodePen Project 機能がやってきた！ 有料会員になった！
CodePen の新機能、Project がやってきた！ たくさんの人達にサポートしてもらいながら、日々圧倒的成長をさせていただいているわけですが、「人間以外」では、CodePen に一番お世話になっています。コンパイルが必要な Sass や ES6 に対応しているし、jQuery や Vue.js といった外部ソースも使えるので、すぐにコードを試すことができます。実務でうまくいかないコードは、一旦 CodePen のシンプルな環境で実装することで切り抜けてきました。ありがとう CodePen。 そんなコードペンに大型新機能登場ということで、ついに有料会員になり、実際につかってみました。 結論から言うと、Sass, ES6 をコンパイルしてくれる。Webpack を使えるので import export もできる。普通のウェブサイトとしてディプロイできる。です。特に import expo
TypeScript で Google Apps Script を書く環境を整備する | Hori Blog
無料で自動化環境を整備できることで有名な Google Apps Script ですが、以前はブラウザで JavaScript を用いて開発する必要があったため辛い部分もありました（人による）。 現在は公式からローカル開発をするための公式 CLI ツールが提供されているので、静的型付けの恩恵を受けるべく TypeScript を用いて開発できるようにしてみました。 公式の CLI ツール G Suite Developers Blog: Advanced Development Process with Apps Script danthareja/node-google-apps-script: The easiest way to develop Google Apps Script projects インストール自体は Node.js が入っている環境であれば npm install
この素晴らしい Vue.js に祝福を！
Vue.js Tokyo v-meetup="#3" での発表資料です。
わずか1行のJavaScriptでWebサイトにリアルタイムコラボレーション機能を実現できる「TogetherJS」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、Webサイトやアプリなどへ複数人によるリアルタイムコラボレーション機能を、驚くほど簡単に実現してくれるJavaScriptライブラリのご紹介です！ このライブラリ自体は、数年前から存在しているので知っている方も多いと思いますが、まだ「知らないよ…」という方は、ぜひこの機会にトライしてみてください。 いまだに、ちょっとした「コラボ機能」を実装したい時に重宝する唯一のライブラリになっています！ 【 TogetherJS 】 ■「TogetherJS」の始め方！ それでは、実際にサンプルを作りながら「TogetherJS」がどのようなライブラリなのかを見ていきましょう！ まず最初に、「TogetherJS」を利用するのに必要となる本体ファイル「together.js」をGitHubからダウンロードするか「git clone」で取得します。 も
軽量なのに強力！jQueryそっくりなJavaScriptライブラリ「Umbrella」とは？
オープンソースのjQueryライブラリはWeb開発の現場において何年もの間不動の地位についていました。 JavaScriptのことを深く理解していなくとも、オブジェクト指向で分かりやすい構文、豊富な外部プラグイン、加えてAjaxなどの非同期通信も簡単に扱うことができたのが、その人気の理由です。 JavaScriptを用いた開発現場ではいまもなお人気のjQueryですが、ここに来て新たなJavaScriptライブラリが注目を集めています。 それが、Umbrellaです。 UmbrellaはjQueryと同様に完全オープンソースで、jQueryと同じく要素セレクタを扱うことができたり、DOM操作ができたり、Ajaxリクエストを行うことができます。 また、UmbrellaはjQueryと若干異なる文法や関数の呼び出し方を採用していますが、基本的に残りの部分はほとんどjQueryと一緒です。 それ
まるでシムシティのようなWeb地図ライブリラリ「eegeo.js」
eeGeo eeGeoは、「グランド・セフト・オート」や「レミングス」などのクリエイティブディレクターであったイアン ヘザーリントン氏が2010年9月に設立した3D地図を提供する会社です。 日本では、NTTドコモがライセンス供与を受け、屋内3Dマップの提供などを行っています。 今のところ、日本では3Dで表示できる地域がないのですが、ゲーム業界のノウハウを用いた地図サービスとして個人的に期待しています。 登録すれば個人ユーザーでもAPIを使用することができるので、紹介がてらサンプルを載せておきます。 Web版サンプル example 公式サイトに登録し、ダッシュボードから「Create new app」ボタンをクリックして「API Token」を取得してください。 スタイルシートとライブラリを読み込みます。 <link href="https://cdnjs.cloudflare.com/a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - owenthereal/godzilla: Godzilla is a ES2015 to Go source code transpiler and runtime
Reactで学ぶ！いまどきのWeb開発
