node.js でログインページを作成する - Qiita
目的 下図のような簡易ログインページを作成することを目的とします。 WEBサーバは node.js の Express 、登録用ページは react、登録済みユーザ管理DB には PostgreSQL を使用しました。 上図ではユーザ・WEBサーバ間でHTTPS通信をしていますが、本記事ではHTTP通信をしています。 WEBサーバ構築 node.js の Express を使用します。 まずは localhost:3000 に Express のデフォルトページを表示します。 mkdir tmp cd tmp/ npm install express --save npm install experss-generator --save ./node_modules/.bin/express npm install npm start 表示できました。 WEBページ構築 react を使用
Vue.jsミニハンズオン（TODOリストにアニメーションをつける） - Qiita
AngularでもReactでもriot.jsでも満足できなかったひとに、ぴったりフィットなJSフレームワーク「Vue.js」のざっくりハンズオン第２回目です。 第１回目は「Vue.jsミニハンズオン（TODOリスト作成）」をご覧ください。 このハンズオンではnode.jsのパッケージは使わず、Google ChromeとテキストエディタがあればOKです。 Vue.jsミニハンズオンのシリーズは以下を公開しています。 Vue.jsミニハンズオン（TODOリスト作成） Vue.jsミニハンズオン（TODOリストにアニメーションをつける） Vue.jsミニハンズオン（TODOリストをコンポーネント化する） 今回の目標 目標は第１回目で作ったシンプルなTODOリストにアニメーションをつけることです。 まずはシンプルなアニメーションを作ってみる TODOリストにアニメーションをつける方法がまだわか
CodeIQについてのお知らせ
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
[それWeb] HTMLでデバイスのカメラから写真をとり、PHPでOCRにかけて文字列を返す - Qiita
それWebでできるよ！ こんにちは皆さん スマホのカメラを使って写真を撮ると、なんと文字列が返ってくる。 そんなアプリがあるような気がするのですが、現在ではブラウザでもカメラにアクセスできるので、わざわざアプリにする必要もなく ( OSの差異にあまり煩わされることなく ) Webアプリで簡単に作ることができるのではなかろうか、と考えました。 考えたらやるしか無いでしょう。 休日を利用して、ちゃっちゃか作ってみました。 あ、いつものようにPHP使いますね TL;DR 今回の見所は以下のとおりです。 HTML + JavaScriptでカメラを取る tesseract-ocrをインストールしたコンテナを作る PHPでOCRする 何がやりたいのか 掲示板とかで無線wifiのssidとか貼ってあるとき、いちいち手打ちするの面倒なんで、カメラで取ってそのままはっつけられるようになったら嬉しいのになぁ
![[それWeb] HTMLでデバイスのカメラから写真をとり、PHPでOCRにかけて文字列を返す - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8af0a4e97eee81e2ba1e3e66597e252b0cae1f77/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUUzJTgxJTlEJUUzJTgyJThDV2ViJTVEJTIwSFRNTCVFMyU4MSVBNyVFMyU4MyU4NyVFMyU4MyU5MCVFMyU4MiVBNCVFMyU4MiVCOSVFMyU4MSVBRSVFMyU4MiVBQiVFMyU4MyVBMSVFMyU4MyVBOSVFMyU4MSU4QiVFMyU4MiU4OSVFNSU4NiU5OSVFNyU5QyU5RiVFMyU4MiU5MiVFMyU4MSVBOCVFMyU4MiU4QSVFMyU4MCU4MVBIUCVFMyU4MSVBN09DUiVFMyU4MSVBQiVFMyU4MSU4QiVFMyU4MSU5MSVFMyU4MSVBNiVFNiU5NiU4NyVFNSVBRCU5NyVFNSU4OCU5NyVFMyU4MiU5MiVFOCVCRiU5NCVFMyU4MSU5OSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NTcyODQ3NTZkOWQzMGU4OGZjMDM4OTk3MTg4YjJmZmQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbmlpc2FuLXRva3lvJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yNmM0MzUzMzI1OGNmMDU4ZjE5YjY2YzE0N2Y1N2QyNQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D0b306ebd547c6814ce3819d00f4810d3)
Webページにチャット機能を簡単に導入できるSmallchatを試してみた #Slack | DevelopersIO
どうも！西村祐二＠大阪です。 今回はWebページに簡単にチャット機能を追加できる「Smallchat」というサービスを紹介したいと思います。 このサービスのいいところはWebページ上のチャットとSlackが連携できるところです。 通常だとチャット機能の開発コストや運用コストがかかり大変ですが、 このサービスは出力されたJavascriptのタグをWebページに埋め込むだけで簡単にチャット機能の導入ができます。 さっそくSmallchatを使ってみましょう！ 事前準備 Slackを利用するためSlackのアカウント、Slackのチームの準備をおねがいします。 Slackのサイト SmallchatとSlackを連携 ▼こちらよりSmallchatのサイトにアクセスし「Add to Slack」をクリックします。 ▼「Authorize」のボタンをクリックして権限を付与します。 ▼Webサイト
axios超簡易サンプル - Qiita
概要 郵便番号-住所検索APIを利用し、axiosを使って郵便番号から住所を検索した結果をconsole.log()出力するだけの超簡易サンプルです。 開発環境 node.js : v6.9.1 npm : 3.10.8 webpack : 1.13.2 ソースプログラム構成 [プロジェクトルートフォルダ] ├── dist ├── src │ └── index.js ├── index.html ├── package.json └── webpack.config.js 手順概要 ソースコード・設定ファイル記述 依存パッケージインストール（ダウンロード） ビルド 実行 手順詳細 ソースコード・設定ファイル記述 import axios from 'axios'; let zipcode = '9071801'; axios.get(`https://api.zipaddress.ne
npmとwebpack4でビルド - jQueryからの次のステップ - Qiita
むずかしくないJavaScriptのやさしい話 デモチュートリアル このチュートリアルは、#ndsmeetup8 で発表した内容のデモの手順をまとめたものです。 jQueryをscriptタグ挿入で使っているような開発者向けの内容です。 npmとwebpackでビルドをするという使い方の提案です。 発表内容はこちら。 http://www.slideshare.net/fbcivic/javascript-ndsmeetup8 ※発表当時はwebpack1についての記事でしたが、webpack1→webpack2→webpack3→webpack4と記事を更新しています。 webpack3までの古い解説はこちら （基本的なことなのでほとんど変わりませんが、webpack4でwebpack-cliが必要になったり設定ファイルの記述が変わりました） 事前準備 nodejsをインストールしてくだ
手軽にテキストシャッフル演出ができるJSライブラリ「shuffle-text」を公開 - ICS MEDIA
JavaScriptライブラリ「shuffle-text」を公開しました。shuffle-textはテキストシャッフル（文字列がランダムで切り替わる演出）の表現を行うためのライブラリで、SPA（シングル・ページ・アプリケーション）やゲームの演出やスペシャルコンテンツなどの演出に役立ちます。 たとえば、ウェブサイトでマウスカーソルが触れたときに次のような演出ができます。 JSライブラリはMITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 shuffle-text: JavaScript Text Effect library. shuffle-text を使ってみよう 本記事では、JSライブラリを組み込み利用するまでの手順を解説します。以下のデモが今回作成するもののサンプルとな
phiary
JavaScript の dispatchEvent の情報があまりにも少なかったので解説用にサンプルを作ってまとめてみました. このエントリーでは dispatchEvent の基本的な使い方と活用例について解説します. うまく使えばネイティブっぽく JavaScript を拡張したりってこともできる便利な関数です. About 今回制作したサンプルデモは２つ. 最初のサンプルはイベントを発行するサンプルです. boxB をクリックした際に boxA のクリックイベントも発生するようになっています. 2つ目のサンプルは rightclick イベント という 右クリックしたときのみ発行する独自イベントを定義しています. Code 今回制作したサンプルデモ１個目の全体コードです. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <l
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=
Riot.js入門 なるべく簡単に とはいえ 少し実用的に - Qiita
やりたいこと なるべく簡単に、とはいえそこそこ実用的なくらいに、Riot.js を使いたい。 Riot.jsはランタイムでのコンパイルなども可能です。開発者てきにはメリットありますが、多少ユーザメリットが感じられないので……プリコンパイルしてサーバにあげたいです。あと、開発環境的にあんまり複雑なことすると手軽感がなくなるので、最低限ですませたい。 ということでメモがてら作ってみました。 環境構築 npmインストール してください。 各種 npm install $ npm install -g riot $ npm install --save-dev gulp $ npm install --save-dev gulp-riot $ npm install --save-dev gulp-connect var gulp = require('gulp'); var riot = req
Riot.jsがこれからJSを学ぶのにいいような気がするので使ってみる！ - Qiita
どもめがねこと、大串です。こちらは Riot.js Advent Calendar 2016 - Qiita の記事として書いています。 もともとは、JSに興味があるものの、なかなか仕事で使う機会がなく、さらにはJSを使うためにいろいろ技術を組み合わせて使わないといけない。 WebpackやbabelやES6やGulpやnpmやわーーー。。。ということで、全体のことも解らずなのですが、このRiotのコアコントリビュータでもある河村さんに、「メガネさん Riot.js Advent Calendar 2016 に参加してよ。」とお声掛けいただきましたので、とりあえず参加しないわけには行かないということで、ココに書きます。 さて、上記のようにほぼさっぱりわかってないものです。（JSといえば、jQueryアコーディオンするぐらい）なので、そういった私と同じような人がRiot.jsを使えるのか？！
【Riot.js v3対応】Riot.js x Firebase で超お手軽にWebアプリを作ってみる
まえがき この記事でできること 最近評判のreact風超軽量ライブラリ「Riot.js」と、Googleが買収したMbaasサービス「Firebase」。 この2つのイケてるサービスを使って、超お手軽にWebアプリを作ってみるチュートリアルです。 RiotとFirebaseを組み合わせてる例があまりなかったので試してみました。 この記事ではユーザー登録/認証まわりを実装しています。 またデザインには、Bootstrapよりモダンでイケてると噂のCSSフレームワーク「SemanticUI」を使っています(※当社調べ)。 SemanticUIももっと流行ってほしい。 *** 2016年12月16日追記 *** Riot.jsのv3がリリースされたので、現時点の最新版v3.0.4対応に書き換えました。 v2からけっこう色々変わっていますのでご注意ください。 *** 追記おわり *** 完成版イメ
はじめてのRiot.js | CYOKODOG
手抜きタイトルのはじめてシリーズ３つ目。近頃、耳にすることの多いRiot.jsをさわってみました。 Riot.jsとは Riot.js — A React-like user interface micro-library（日本語訳） Reactを意識して作られた超軽量のUIライブラリ、ビュー部分(コンポーネント)に特化 Web componentsのように利用できる HTMLの中に、JavaScriptやCSSを書く 軽量、5.7KB インブラウザ・コンパイルを利用することで、CDNを読み込むだけで手軽に利用できる 開発元：MUUT 簡単な利用例 今回試した内容のリポジトリ。 cyokodog/riot_study 以下手順で利用可能。 CDNの読み込み コンポーネントの定義と読み込み コンポーネントのマウント /01/index.html <html> <head> <meta htt
JSグラフライブラリNVD3.jsを使ってはてなブログにハイセンスな株価チャートを表示させる方法 - サラリーマン休日副業で月10万円以上目指すページ
久々にプログラミング系のネタです。 はてなブログにJavaScriptのグラフライブラリであるNVD3.jsを使用し、ハイセンスな株価チャートを表示させてみます。 もちろん、同様の方法で棒グラフ、円グラフ、折れ線グラフ等の基本グラフや、複合グラフ等の高機能なグラフまで簡単に表示させることができます。 １．CSS/ライブラリの読み込み まずはCSSとJavaScriptライブラリを読み込みましょう。 下記ソースをページ上部にコピーします。 <link href="http://cdn.rawgit.com/novus/nvd3/v1.8.4/build/nv.d3.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" char
もう迷わない！HTML5のもっとも基本的なテンプレートはこれだ！（2016年版）
HTMLを書くときのベースとなる「書き出し」。いまどきはエディターにプリセットされていますし、ネットにも山ほど転がっていますが、どうせならきちんと意味を理解して、自分だけのテンプレートを作っておくとカッコいい。 HTML5を習得していくうちに、HTML5のテクニックをまとめて使ったひな型を作っておきたいと考えることでしょう。もちろんお勧めしますし、開始点として便利な、オンラインソースの使用も検討してみるもいいでしょう（もっと詳しく知りたい場合は、html5boilerplate.comやhttps://github.com/murtaugh/HTML5-Resetも参照してください）。 ただし今回は、構築内容も含め、コードを一から説明していきます。なぜならHTML5とCSS3を使ったサイトやWebアプリを作る際、使えるオプションに詳しくなれるし、この記事をテクニックの手引きとして参照しやす
Leaflet で Riot.js を使ってみる - Qiita
http://leafletjs.com/ と http://riotjs.com/ を一緒に使ってみます。 1. シナリオ 地理院地図で 平成28年熊本地震・UAV動画 というレイヤーが公開されています。このレイヤーの実体は緯度経度と動画のタイトル、youtube へのリンク、撮影日がエンコードされた GeoJSON で以下の URL から入手が可能です。 https://cyberjapandata.gsi.go.jp/xyz/20160414kumamoto_0416uav/2/3/1.geojson 地理院地図でこのレイヤーを表示 すると、以下のようにポップアップに最低限の情報とリンクが表示されます。 ここでは、ポップアップの中身の HTML を Riot.js を使ってカスタマイズし、以下のように動画を埋め込みで再生できるようにしてみましょう。 2. コード 以下の3つのファイル
Riot.js ことはじめ - Qiita
端的に結論を言うと、もうこれで良いじゃないかな、です。 背景 ちょっと前にこのへんとかを中心にWebのフロントエンドを作るのにフレームワークはいるかいらないかみたいな議論（適当）がありましたが、業務で静的データを使ったWebページ（サーバサイドの状態がフロントエンド側から変化しないページ）を作ることが多い自分としてはこう思いました。 確かにjQueryで直接DOMをいじるのは、いじる要素が片手で数えられるうちはいいが、それを超えるとうまく管理できなくなるからあんまり上手い方法でないのは同意できる かといってReactJSは確かに便利そうではあるが、正直ぱっと見ではよくわからないので、使うなら腰を入れて勉強する必要がありそう＝ミニマムスタートしにくそう ということでうまく折衷案的なものはないかと思っていたら riot.js というのを見つけたので試してみました。 Riot.jsの超入門 Ri
Hubotで投稿されたURLのTitleをつぶやくスクリプトを実装する
またもやHubotネタです。 ＃最近Hubot弄ってるだけで他のこと全然できてない・・・ 今回は、投稿されたURLのTitleをつぶやくスクリプトを実装します。 スクリプト 早速スクリプト本体です。Gistにもおいておきました。 下記を参考にさせていただきました。 HubotでURLが貼られたらページのタイトルをしゃべるようにする request = require 'request' cheerio = require 'cheerio' iconv = require 'iconv' convertEncode = (body) -> charset = body.toString('ascii').match /<meta[^>]*charset\s*=\s*["']?([-\w]+)["']?/i return new iconv.Iconv(charset[1], 'UTF-8/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://unskilled.site/javascriptstylesheets/
