サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
horicdesign.com
ReactはUIライブラリ、Reduxはステート管理ライブラリということは前から知っていた。そしてそれら二つは決して難しいライブラリではない。しかしReactとReduxをどう連携するのか、その部分についてはいくら記事を読んでもどうも釈然としなかった。 そこでこの前一日使って、本腰をいれて勉強してみた。すると思ってたよりもずっと簡単だったのでそれについてまとめようと思う。 用語の解説 Reduxを理解するにあたって覚えなければならない用語が下の3つ。 State Reducers ActionCreators State アプリケーションの状態。StateをReducerを通じてのみ新しいStateに変更される。このStateはreact-reduxでconnectされたReactコンポーネントのpropsより参照することが可能。 Reducers Stateの値を更新するための関数がまと
ここ最近のフロントエンドについて思うこと 最近、SPAがどうとかReactがどうとかよりもむしろ、UI/UXをJavaScriptを使って向上させることに興味がある。ここ数年フロントエンドエンジニアの関心があまりにも技術的な方向に向かいすぎているような気がしてならない。Webpackの設定がどうとか、Reduxの非同期用のMiddlewareはredux-sagaがいいとかそんな話ばかりだ!自分はJavaScriptとCSS3を上手に使ったかっこいいUIが好きだし、そういったUIへの議論がもっとエンジニアの間で活発にされたらいいのになと思っている。だが、決して僕がReactやVueなどの技術を毛嫌いしているわけではない。実際、案件でReactをつかったこともある。個人プロジェクトでReactを使ってAtomic Labというスタイルガイドジェネレーターを作ったこともあるくらいだ。 ただ、「
従来のmedia queryの問題点 CSSでWindow幅に応じて適応するスタイルを変えるためにmedia queryという考え方がある。スマートフォンやタブレットの普及によって、レスポンシブ対応が必須になった現代においてはmedia queryは非常に便利な機能の一つである。 ただ、このmedia queryだけでは、限界がでてくる。それは使っているブラウザのwindow幅でしかCSSの切り替えが行えないということである。時にそれは実装者にとって非常に厄介な問題となりうる。 上の図のようなレイアウトのケースを考えてみよう。 window幅が1024pxの時はメインカラムとサブカラムがある。960px幅の際にメインカラムの下にサブカラムが回りこむ。 window幅が1024pxの際にはメインカラムとサブカラムが横並びでレイアウトされているのでcontainerの幅はwindow幅が960
最近、仕事上でJavaScriptライブラリを作って公開することが多くなってきました。その際のノウハウが溜まってきたので先日公開したSmartPhoto.jsを例にとって紹介したいと思います。 SmartPhoto.jsでは以下の5つの方法で開発したことが、いまどきっぽいなと感じています。 Babel Browserifyを使ったモダンコーディング eslintを使ってソースコードの品質を担保 jQuery未使用 git tagとnpmとのバージョニングの紐付け CircleCIを使ったテスト 1. Babel Browserifyを使ったモダンコーディング browserify ./src/index.js -t babelify -p licensify --standalone smartPhoto -o ./js/smartphoto.js 上記のように、browserify ba
フォームをテストするのに毎回同じデータを入力するのってめんどくさいですよね? そこで、フォームに一度入力した値をlocalStorageに保存し、次回からはそのデータを自動入力するためのBookmarkletを作りました。
こんにちは。堀 悟大(@steelydylan )です。最近はブラウザでのテストの自動化に興味があります。今回はCircleCIを使ってgithubにpush時に自動でブラウザのテストコードが走るように色々環境を整備してみましたので、ご紹介します。 なぜ、今回ブラウザテストを試みたか 現在、下のようなテーブルを編集するためのJavaScriptを書いています。 ただ、機能追加のたびに、手動で正しく動作するかテストするのが大変なので、githubにpushした段階で、CIツールを動かして、自分の代わりにテストをしてもらうことにしました。そのために今回はCircleCIというツールを使ってテストを行うことにしました。 ツールの紹介 今回はCircleCI上でテストコードを走らせるために、Nightmare, mocha, power-assert という3つのツールを利用しましたので軽く紹介さ
この前作成した、acms-util-kitに検索機能をつけるべく今回、指定した要素内から任意の文字列を見つけ出すためのjQueryプラグインを作りました。 使い方 <div class="search"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit magni consequuntur ex perferendis iusto tempora omnis id <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, dignissimos atque enim, debitis nesciunt unde ipsum? Saepe fugiat molestias consequuntur qu
これはa-blog cms Advent Calendar 2016の4日目の記事です。 現在、a-blog cms Ver. 2.7 の新しい機能として、テーブルユニットというものを開発しています。 名前を聞いただけで大体どんなものかはピンとくるかもしれません。下のイメージのようにテーブルと書かれたボタンを押すと、テーブルのレイアウトが出現します。そこに直感的に文字入力が行えます。 テーブルユニットでは以下の操作が可能です。 行の削除 列の削除 行の追加 列の追加 セルの結合 セルの分割 文字の右寄せ、左寄せ、中央寄せ セルへの文字入力 列の追加や行の追加などは、「0,1,2...」などの数字や「a,b,c...」などのアルファベットがふられたセルにホバーして表示されるアイコンをクリックして行うことができます。 どう開発しているか 普段はJavaScriptとa-blog cmsを完全に
こんにちは。突然ですが、flexboxってご存知ですか?その名の通り、幅を変幻自在に調整できるとてもフレキシブルなボックスで、cssのdisplayのプロパティの1つです。 しかし、flexboxは幅だけではなく、並び順も変えれたりするんですよ。 今回はその並び順に着目したデモを作ってみました。 display:flexに指定された、子要素にorderのプロパティを追加していくだけです。 一番目に表示したければ、order:1となります。 デモ 今回はそのflexboxの表示順を変えられる機能を利用してちょっとした、グリッドシステムを作ってみました。 グリッド幅で表示順と、画面に対する幅が変わります。 画面を縮めてみてください <div class="cs_row"> <div id="a" class="cs_col-xs-12 cs_col-sm-3 cs_col-sm-order-1
gulpでbrowserifyを使う際に、jQueryのプラグインをどうやって$にsetしようかなということを長い間なやんでいました。$をglobalにsetするのも気がひけるのでどうにか、ローカルだけで解決できないかと色々なjQueryのプラグインのソースをみたりした結果、下記の方法が一番しっくり来ましたので今回紹介します。 package.json gulp-browserfiyおよび、jquery-browserifyをnpm installでダウンロードします。 { "name": "gulpfile_generator", "version": "1.1.0", "description": "This is a genarator for gulpfile and package.json", "author": "steelydylan", "url": "https://h
公開アップルップル社内勉強会 Vol.20 公開アップルップル社内勉強会 2016-01-18(月)19:30 - 21:00 社内の勉強会を一般の皆さんに公開しています。 毎月第3月曜日に開催して、今回で20回目になります。 発表は質疑応答を含め20-30分程度ですが、実際の発表... gulpはみなさんご存知ですよね?ファイルを圧縮したり結合したりするときに便利なやつです。今回は2016年にどんなプラグインを使っていこうか考え、整理してみました。 今回は、以下の4つの項目に分けて、自分のおすすめのプラグインを紹介します。 ユーティリティ CSS JavaScript HTML ユーティリティ browser-sync ファイル等の保存時に、ブラウザーをリロードする際に利用します。例えばCSSを変更した際にわざわざブラウザをリロードする手間を省きます 使用例)CSSファイルを保存した際に
このように、マウスをホバーさせると、キャプションが出てくるCSSを書きました。 ソースは下のようになります。 .itemBox{ display:inline-block; position:relative; } .itemBoxThumb{ display:inline-block max-width: 100%; max-height: 100%; } .itemBoxCaption{ background-color: rgba(0,0,0,0.8); color:#FFF; padding:10px; position:absolute; top:0; left:0; width:100%; height:100%; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; opacity:0; } .itemBo
gulp generatorとは gulp generatorとはWEB上でGUIベースで、gulpfile.jsとpackage.jsonのソースコードを生成できるツールです。GUIがお好きな人や、gulp初心者の方におすすめのツールです。 使い方 gulpで自分の使いたいオプションにチェックを入れたり、出力先や入力先をフォームに入力していくだけです。 機能 作成したデータのローカルストレージへの保存 チェックを入れたり、フォームに入れた値などは自動的にローカルストレージに保存されますので、次にサイトに訪れた際も前回と同じ状態で使っていただけます。 ソースのコピー Google Chromeをお使いの方はソースのコピーが可能です。「ソースをコピー」をクリックしていただくと、出力されているソースコードがクリップボードに保存されます。 Zipファイルとしてダウンロード また作成したソースコー
保存後にコンパイルするのがめんどくさい。 この前、bootstrap-sassをSublimeTextをつかってコンパイルする方法を、記事に書きました。 SublimeTextでBootstrapテーマをカスタマイズ しかし、わざわざ保存したあとにコンパイルするのはめんどくさくないですか?? そこで今回は、保存と同時に自動でコンパイルをかけてくれる仕組みをgulpを使って、導入しました。 前の記事を読んでいることを前提で話を進めていきます。 gulpとは.... gulpとはストリーミング・ビルド・システムのことで、scssやtype scriptなどのビルドが必要な言語をビルドしてくれるシステムです。 コードの圧縮なども行ってくれます。 しかし、gulpの導入にはNode.jsが必要です。 まず、Node.jsからダウンロードしましょう Node.jsをダウンロード Node.jsとは、
今回はじめてgulpのプラグインを作成したので、どのようにプラグインを作ったのかをまとめておきたいと思います。流れは下のようになります。 プラグイン用のフォルダを作成 package.jsonを作成 index.jsを作成 README.mdを作成 npmのアカウントを作ろう。 1. プラグイン用のフォルダを作成 はじめにプラグイン用のフォルダを作成します。フォルダ名は自分が配布したいパッケージ名にするとよいでしょう。私はgulp-less-to-scssというパッケージを配布したのでフォルダ名をgulp-less-to-scssとしました。 2.package.jsonを作成 次に作成したフォルダの中にpackage.jsonを作成しましょう。 パッケージ名やバージョン、パッケージの説明、依存ファイル等をJSON形式で書いていきます。 私の場合は下のようにpackage.jsonを作成し
今回はgulpというストリーミングビルドシステムを使ってlessをscssに変換してみました。どうせそういったプラグインがあるんだろうなと思って、ググっても見つからなかったので、下のページを参考にして自分で変換するコードを書いてみました。 Anyone know of a good way to convert from LESS to Sass? It definitely looks like LESS has all the momentum at the moment, but we're seeing some annoying issues with LESS's in-browser compiler (which we like using during development b... そのためにgulp-replaceというプラグインを使って、正規表現を駆使してless
ACMS.Config.PaperEditorAdds = function(Extensions) { return [ new Extensions.CustomBlock({ tagName: 'div', className: 'acms-alert', customName: 'alert', icon: 'アラート' }), //さらに追加 new Extens...
このページを最初にブックマークしてみませんか?
『Horic Design』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く