読者です 読者をやめる 読者になる 読者になる

ElectronのMacOSデスクトップアプリUIキット「Phtoton」とReact

Photonを使えば、 もともとGithub製のエディタAtom用に作られたElectron(http://electron.atom.io/)で作られたアプリを手早く綺麗に仕上げることができます。 使い方 こちらからPhotonをダウンロードして、 自分のElectronプロジェクトフォルダに入れておきます…

Electronから簡単にTwitter OAuth認証するためのライブラリ作った

electron-authentication-hatenaをベースにElectronのライブラリを作成しました。 このライブラリを使えば、 Electronアプリから簡単にOAuth認証することができます。 github.com インストール npm install electron-oauth-twitter 使い方 アプリを登録し、 Cons…

パーミッションについて(chmod/su/sudo/chown/chgrp)

参考: http://linuxcommand.org/lc3_lts0090.php パーミッションに関わるメソッドについてまとめてみました。 具体的には次のとおりです。 chmod (chage mode)- ファイルアクセス権限を変更する su (substitute user)- 一時的にsuperuserになる sudo (superuse…

React Redux勝手にチュートリアル(TODO List)

今回は基本的機能としてtodoの追加と削除ができるtodoリストを作成します。 前回と同様ジェネレーターからアプリのフォルダを自動生成するところから始めます。 詳しくは前回の記事参照。 uraway.hatenablog.com まずはindex.js js/index.js import React from …

Redux勝手にチュートリアル(Counter)

最近流行りのReduxをより深く理解するために、 「分かりやすい」を目指して勝手にチュートリアルを書いてみます。 自分的には結構複雑に見えたんですが、 他のフレームワークやアーキテクチャに慣れていると簡単なのでしょうか? 参考: http://qiita.com/ogomr/…

react-social-sharebuttons(Facebook) 日本語ドキュメント

react-social-sharebuttons(Facebook) Simple React components for Facebook Button. インストール npm install --save react-social-sharebuttons 使用例 import { FacebookButton } from 'react-social-sharebuttons'; class App extends React.Component…

Node.jsマルコフ連鎖モジュール作ったよ

JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック作者: クジラ飛行机出版社/メーカー: ソシム発売日: 2015/08/31メディア: 単行本この商品を含むブログ (2件) を見る 読者サポート | JS+Node.jsによるWebクローラー/ネットエージェント開発…

-bash: bower: command not found 対処法

bowser installが使えない?? なぜだ! PATHだ! http://bower.io/ npm経由でbowserをインストール npmを使ってbowserをインストール $ npm install -g bowser bowserコマンドを実行してみると、 エラー -bash: bowser: command not found 考えられる原因は…

React + Electronでエディターを作りたい

github.com Electronを使えば、 HTML + CSS + JavaScriptでデスクトップアプリが作れるらしい。 エディタはAtomを使っているけど、 簡単なドキュメントを書くだけならもっと軽いものを使いたいなあと思っていたので、 Reactを使ってマークダウンエディタを作り始…

react-social-sharebuttons(Linkedin) 日本語ドキュメント

Simple React components for Linkedin Button. インストール npm install --save react-social-sharebuttons 使用例 import { LinkedinButton } from 'react-social-sharebuttons'; class App extends React.Component { render( const url = "http://urawa…

react-social-sharebuttons(GREE) 日本語ドキュメント

react-social-sharebuttons(GREE) Simple React components for GREE Button. インストール npm install --save react-social-sharebuttons 使用例 import { GREEButton } from 'react-social-sharebuttons'; class App extends React.Component { render() …

React Twitter Timelineモジュール作りました

github.com 使い方 まず、こちらで新しくwidgetを作成し、 表示されるコードの中のdata-widget-idの値を取得します。 <a class="twitter-timeline" href="https://twitter.com/****" data-widget-id="your widget ID">****</a> 取得したwidget IDをwidgetIdプロパティとして次のようにコンポーネントに渡します。 import React from 'react'; import ReactDOM from …

react-social-sharebuttons(Feedly) 日本語ドキュメント

react-social-sharebuttons(Feedly) Simple React components for Feedly Button. インストール npm install --save react-social-sharebuttons 使用例 import { FeedlyButton } from 'react-social-sharebuttons'; class App extends React.Component { ren…

react-social-sharebuttons(Hatena Bookmark) 日本語ドキュメント

react-social-sharebuttons(HatenaBookmark) Simple React components for HatenaBookmark Button. uraway/react-social-sharebuttons: Simple Re... - GitHub インストール npm install --save react-social-sharebuttons 使用例 import { HatenabookmarkBu…

react-social-sharebuttons(LINE) 日本語ドキュメント

react-hatenabookmark-buttonとreact-line-buttonは、 react-social-sharebuttonsに統合されました。 react-social-sharebuttons react-social-sharebuttons(LINE) Simple React components for LINE Button. このLINEボタンはスマートフォン向けです。 PCユー…

文系大学生がプログラミングを始めて3ヶ月経って思うこと

もう三ヶ月と少しが経ちました。 三ヶ月ずっとJavaScriptをやっていればこんなことが出来るようになると参考になれば。 tips 単純なライブラリを読み込むと勉強になる 自作ライブラリ・パッケージがダウンロードされると嬉しい ReactJSとreact-routerっぽいも…

JavaScript初学者が1時間でNode.jsのReactLINEボタンモジュールつくった

uraway.hatenablog.com 前回と同じ要領で今度はLINEボタンのモジュールを作ってみました。 uraway/react-line-button: Simple React comp... - GitHub モジュールをまとめました。 こちらを使用してください。 uraway/react-social-sharebuttons: Simple Re... …

JavaScript初学者がNode.jsのReactはてなブックマークボタンモジュールつくった

uraway/react-hatenabookmark-button · GitHub たった40行で作れてしまいました。 scrpitタグ作って必要なものを突っ込んでるだけです。 以下ソースコード。 モジュールをまとめました。 こちらを使用してください。 uraway/react-social-sharebuttons: Simple Re…

An error occurred while installing pg の対処法

bundle インストール中、 こんなエラーが。 An error occurred while installing pg (0.18.4), and Bundler cannot continue. Make sure that `gem install pg -v '0.18.4'` succeeds before bundling. 詳しく見てみると、 コンフィグファイルがないためにエラ…

国文生のための単位チェッカーアプリつくった

単位確認は結構面倒な作業なので、 アプリにしてみた。 デザインにはMaterial UI使用。 統一感が出ていい感じ。 セルにホバーかクリックした時にその要素のテクストがポップアップするようにしたかったがよくわからん。 jQuery使うんだろうか。 単位チェッカー fir…

Error: Could not symlink share/man/man8/nginx.8

nginxをbrewでインストール $ brew install nginx nginxコマンドを打つとコマンドが見つからない $ nginx nginx: command not found インストールはされているが, 有効化されていないとのこと $ brew install nginx Warning: nginx-1.8.0 already installed,…

Uncaught ReferenceError: require is not defined 対処法まとめ

前にも記事を書きましたが、少し勉強した中で他にも解決法を見つけたのでまとめておきます。 さて、クライアントサイドのJavaScriptではrequireを使ってNode.jsのモジュールを読み込むことはできません。したがって以下の様なツールを組み込む必要があります…

THE TWELVE-FACTOR APP

THE TWELVE-FACTOR APP Herokuが提唱する、「どんなプログラミング言語、どんなバックエンドを使用していても適用することが可能である、モダンなウェブアプリ構築のための方法論」 12factor.net 12-Factor Apps in Plain English - ClearlyTech 1. コードベ…

子供向けプログラミング言語Scratchでチューチューロケット!

試験に向けて忙しくあまり更新出来てないが、Scratchで何かしら凝ったものをつくるという課題があったので、SEGAの名作パズルゲームチューチューロケット!をイメージしてパズルゲームをつくってみたので公開する。不具合があった場合はステージセレクト画面…

コミットメッセージの先頭に使う絵文字(Emoji)まとめ

Git

コミットメッセージの先頭に使う絵文字(Emoji)まとめ uraway/emoji-matome · GitHub 例えば、バグを修正したというコミットメッセージだけでも、チームや人によって"fix bug", "bug fixed", "fixed bug", "bug fix"など、さまざまな可能性がある。そこで、そ…

簡単にはてなブログに投稿できるAtomパッケージ"hatena-blog-entry-post"をメジャーアップデートしてみる。

gist-it,settings-viewを参考に、メッセージの改良と選択部分を投稿する機能の追加を行い、メジャーアップデートを行った。 uraway/hatena-blog-entry-post · GitHub コマンド Post Current File (⌥⌘P) 現在のファイルを投稿する。 Post Selection (⇧⌥⌘P) 選…

簡単にはてなブログに投稿できるAtomパッケージ"HatenaBlogEntryPost"に新機能を追加してみる。

投稿後にタイトルエディタにエントリのURLが表示されるようになりました。 カテゴリを追加できるようになればいいんですケド、難しいので後回し。 atom.io

簡単にはてなブログに投稿できるAtomパッケージ作ったよ

はてなブログのAPIを使って、Atomから簡単にエントリを投稿できるパッケージをつくってみました。 HatenaBlogEntryPost レスポンスの解析とかカテゴリとか投稿時間とか色々機能は追加できそう。 POSTリクエストにはsuperagentを使用。一回リクエストで詰まっ…

いつまでimport Reactしているつもり? Webpack-ProviderPlugin

1日に何回このようなimport宣言を書いていますか? import React from 'react' import ReactDOM 'react-dom' import $ from 'jquery' ファイルごとにいちいちimportするのはめんどくさいですよね。書き忘れるとエラーも起こすし。 そこで活躍するのがWebpack…

Feedly検索ブラウザアプリ作ったよ

Node.jsとExpressを使って、簡単なFeedlyアプリをheroku上に作ったので公開します。Expressほとんど初めて触ったけど楽しい。 DOM操作がやっぱりめんどくさかったのでReact.jsで作り直すかも。 FeedlySearch サイトのタイトルやURL、FeedのURL等で検索できま…

JSONデータをReactでリスト表示する

単一コンポーネント this.setStateメソッドでstateとして取得 componentDidMount() { $.ajax({ url: this.props.url, data: { q: "select title from feed where url = '" + this.props.target + "'", format: "json" }, type: 'GET', dataType: 'json', suc…

はてなブログのfeedをjsonで取得してReactで表示してみる with YQL

前記事では、クロスドメインリクエストについて学びました。しかし、普通にCORSを行っても、No 'Access-Control-Allow-Origin' header is present on the requested resourceと返されるAPIがあります。セキュリティの問題からAPIが許可していないためです。 …

CORSリクエストについてのまとめ

http://www.html5rocks.com/en/tutorials/cors/#disqus_thread Author Monsur Hossain ほとんどこちらの要約 導入 aaaa.comにはbbbb.comがアクセスしたいデータがあるとしよう。このクロスドメインリクエストは従来same-origin -policy によって禁止されてい…

Isomorphic JavaScript

2013年11月の記事ですが、JavaScriptを学習し始めて数ヶ月の自分には(英語のイディオム的にも)得るものが多かったので訳しておきます。 Isomorphic JavaScript: The Future of Web Apps - Airbnb Engineering Author Spike Brehm @spikebrehm JavaScript Gro…

React + Reails のUniversalアプリケーションの構築: Part 1

下記の記事の翻訳です。翻訳記事内の翻訳文以外のコンテンツ、ソースコード、画像の著作権は原作者にあります。 Universal React with Rails: Part I — Medium Author Alex Fedoseev reactive goofy on rails Planning the application この記事では、React…

Twitter API with Ruby

HTTP HTTP(HyperText Transfer Protocol)とは、サーバーとクライアントのやり取りの手順のことです。 クライアント/サーバー Client --- Server --- Client / | \ / | \ / | \ Client Client Client インターネット上には、様々なリソースを要求するクライア…

フロントエンド開発入門編(JavaScriptのインタラクティビティの追加)

Adding interactivity with JavaScript | Web Fundamentals - Google Developers こちらを訳しています。 JavaScriptのインタラクティビティの追加 JavaScriptを使うことでコンテンツ、スタイリング、ユーザーの操作に対する挙動といった、ページのほとんど…

フロントエンド開発入門編(レンダーブロッキングCSS)

Render blocking CSS | Web Fundamentals - Google Developers こちらを訳しています。コンテンツすべての著作権は原作者にあります。 レンダーブロッキングCSS デフォルトでは、CSSはレンダーブロッキングリソースとして扱われます。つまりブラウザはCSSOM…

フロントエンド開発入門編(レンダーツリーの構築、レイアウト、ペイント)

前回 uraway.hatenablog.com 自分の理解のために訳しています。公式の日本語訳の方がわかりやすいです。 Render-tree construction, layout, and paint | Web Fundamentals - Google Developers Render-tree construction, layout, and paint | Web Fundamen…

おすすめAtomパッケージ: 簡単に画像をアップロードしてコピペできる"image-copipe"

マークダウンでブログの記事を書く際、かなり役立ちそうなAtomパッケージを見つけました。使い方を載せておきます。 atom.io 画像を簡単アップロード cmd + shift + 4を押して、ctrlを押しながらスクリーンショットを撮る または 画像をコピー スクショかコ…

Googleアナリティクスを英語で使うには

カタカナでベンチマークとかコホート分析とか書かれていても意味もスペルも良く分からないので、Googleアナリティクスを英語で使うことにしました。その手順をメモしておきます。 > ユーザー設定 > アカウント情報の編集 言語を[日本語]から[US English]に変…

Googleアナリティクスで自分のアクセスを除外する方法

Googleアナリティクスを導入して、ブログのアクセス解析を行っているのですが、今のままでは自分のアクセスが混じっているので、真のデータ解析結果は出ません。自分のアクセスを除外する方法をちょっと調べてみました。 IPアドレスでフィルタリング 11dax.c…

XMLとは? JSONとは?

XML,JSONはどちらもデータを記述するためのフォーマット言語です。そのメリット/デメリットを簡単にまとめてみました。 XML XML (Extensible Markup Language)はHTMLによく似た形式の言語です。HTMLと違う点は、自分でタグ名をつけることができる点です。例…

フロントエンド開発入門編(オブジェクトモデルの構築)

フロントエンド開発入門編 Constructing the Object Model | Web Fundamentals - Google Developers こちらのサイトをまとめてみました。リンク先の画像、ソースコードを使用しています。 オブジェクトモデルの構築 ウェブページをレンダリング(描画)する…

Webpack + React + ES6の最小構成を考えてみる。

Webpack + React + ES6 Webpack + React + ES6の最小構成を考えてみる。 この記事は明石家サンタを見ながら書かれました。 (注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応) 関連した過去記事 Webpack入門編 uraway.hatenablog.com Gulp + B…

Google日本語入力キーボードでバックスラッシュ(\)を入力するには

プログラミングでよく使われるバックスラッシュ\を入力するには、option + ¥で可能なんですが、いちいちオプションを押すのは面倒なのでキーボードの設定を変更してみます。 Google Japanese Input > Preferences... > General Input from ¥ or backslash ke…

Webpack入門編

Webpack入門編 Webpackとは? Webpack フロントエンドにおける依存関係を管理し、まとめて使えるようにしてくれるスグレモノ。Browserifyより多機能だが、その分学習コストも高い。 uraway.hatenablog.com インストール プロジェクトにインストールする $ np…

Reduxまとめ(2)超訳

Actions Actionsはアプリからstoreにデータを送る情報のペイロード。storeに対する唯一のソースだ。 新しいtodo itemを追加することを表すactionの例を示す。 const ADD_TODO = 'ADD_TODO' { type: ADD_TODO, text: 'Build my first Redux app' } actionsは…

快適な開発環境を目指して(4)

fluxでの開発を見据えて、gulpを使った開発環境を作ってみた。 (Gulp + Browserify + ES6 + Babelify + Watchify + Brower-sync) 前提知識 gulp ES6(ES2015) 材料 gulp...自動タスク管理ツール Browsersync...ブラウザの自動リロード browserify...依存物を…

文系大学生がプログラミングを始めて2ヶ月経って思うこと

http://uraway.hatenablog.com/entry/2015/11/16/%E6%96%87%E7%B3%BB%E5%A4%A7%E5%AD%A6%E7%94%9F%E3%81%8CJavaScript%E3%82%92%E5%A7%8B%E3%82%81%E3%81%A6%E7%B4%84%E4%B8%80%E3%83%B6%E6%9C%88%E7%B5%8C%E3%81%A3%E3%81%A6%E6%80%9D%E3%81%86%E3%81%93%E3…