-
HTML&CSSの勉強を効率的にするツール「オンラインエディタ」のすすめ
HTML&CSSの学習には、テキストエディタとブラウザが必要だ。関連書籍や既存サイトなどのソースコードを真似るようにテキストエディタに記述する。それをブラウザで動作確認する。これがHTML&CSS学習の一連の流れである。 しかしそれぞれツールを用意したり、起動させたり、と面倒くさくはないだろうか。 たとえば関連書籍の一項を写経するにしても、数行程度で済むわけだが、HTML,CSSファイルそれぞれを保存するなど煩わしい。そのために毎度styleタグやインラインスタイルで書くのも余計な作業である。 ましてやモニターサイズに制限があって広々と作業できないのならば、ツール切り替えが発生して効率悪い。エディタ記述して、ブラウザ見て、またエディタ、といった具合だ。 この工程に違和感やフラストレーションを感じているあなたならば、活用してもらえるであろうオンラインエディタなるツールを紹介したい。 オンラインエディタとは オンライン上でHTML&CSSなどを記述、動作確認が行えるツールのこと。ブラウザでサービスのURLにアクセスすることで利用可能だ。別段アカウントを作成する必要はないが、勉強した内容をアーカイブしておけるためユーザー登録するのも良い判断だろう。 特徴 HTML&CSS,JavaScriptの記述 動作確認がシームレス 記述内容のアーカイブ 記述内容のシェア機能 フレームワークやライブラリの読み込み 使い方 いくつかあるオンラインエディタから「JSFiddle」をピックアップしてみよう。これは私が比較的よく使用するオンラインエディタであるが、ほかにも候補があるので興味があれば検索してみてほしい。 https://jsfiddle.net/ まずJSFiddleにアクセスすると、上部に青いバーが目につく。ここにはテンプレートが用意されている。ボタンをクリックすれば、下部エディタにソースコードが反映すると同時に動作確認することができる。一定の記述があり、勉強の取っ掛かりとして役立つかもしれない。 HTML,CSS,JavaScriptのフレームが設けられていて、ここがエディタとして機能する。HTMLフレームにあたっては、htmlタグやbodyタグで梱包する必要がない。つまりdivタグやh1タグ、pタグなどから書き始められる。 動作確認は、逐次「Run」ボタンをクリックする。Runボタンは、上部メニューバー左に配置されている。記述がシームレスに反映するオンラインエディタもあるが、検証したいソースコードが即座に描画されると煩わしい処理もある。そのようなことから私は、使いづらさなど感じたことはない。 まとめ ご覧のようにHTML&CSS学習を強力にサポートするオンラインエディタであるが、さらに他人のソースコードをダッシュボード上に保存しておける。この機能も大変有り難い。結局のところ学習期は、他人のソースコードがもっとも優れた教材なのだと思う。 オンラインエディタは、あなたの学習を効率化して、習得を加速させるツールになるはずだ。
-
マークアップエンジニア歴10年の私が、もっとも感嘆したソースコード
他人のソースコードから得られる知識は、想像以上に多くて眺めているだけでも大変勉強になる。 私はマークアップエンジニアということもあり、Webサイトのソースコードを閲覧する習慣がある。Webサイト訪問ついでにソースコードを覗く訳だ。ユニークな記述があれば、悪怯れることもなく我がものとしてしまう。なんと傍若無人なことか。 ほかにもオンラインエディタやgithubなども守備範囲である。他者のソースコードを容易に閲覧・学習することができることは有り難い限りだ。 さて、そんななか他者のソースコードに感嘆の声をもらしたことはないだろうか？ 私には、思い及ばないアプローチのコーディングに関心してしまった経験がある。思わず隣席のエンジニアに自慢してしまうほどだった。 その内容をご覧にいれようと思うが、マークアップエンジニアでなければ興味をもてないかもしれない。そこはご容赦いただきたい。 ソースコード HTML CSS 説明 このソースコードのどこに感嘆したのかはflexboxの折り返した状態と同様のことが再現できていたことだ。各.boxは、内包するテキストの分量が違うため、高さが異なる。無思慮にfloatで横並びさせると高さの異なる.boxに引っかかり、まともに左端へ折り返すことができない。ところが、上述のスタイルだと、不測のこともなく左端へ折り返してくれる。 この件について、「flexboxでいいじゃん」と思ったのならば、それはもっともな意見だ。flex-wrapならば、引っかかることなく左端へ折り返すだろう。そのとおりである。 しかし上述ソースコードを認めたのがIE8などが要件に含まれるような時代のことで、flexboxなど使えるものではなかった。 そして当時このようなレイアウトは、jQueryプラグインで高さを揃える対策がとられていた。heightLine.jsやfixHeight.jsと聞いてピンと来るなら同じ時代を過ごした戦友なのだと思う。ただJavaScriptによる対策だと、読み込みまでのタイムラグがあるため、わずかなチラつきが生じる。私はこれが気に食わなかった。 そんななかの上述ソースコードだったから、感嘆したのも頷ける。 まとめ 私の思い出話になってしまったわけだが、数年たったいまでも記憶しているほどの内容だったということだ。確かにHTMLにもCSSにもJavaScriptにも関心したものはあったはずだが、すでに我が身に消化して記憶すらしていない。 自身のソースコードも他者に閲覧されていることを自覚して、世に発信しなければと考えるようになったのも、この頃からだったと思う。 私も、他者に影響や知覚させれるほどのものをコーディングしていきたいと改めて思い直すとして、このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
スライダー＆カルーセルで左寄せとかできるvanilla JS製「Glide.js」の使い方
スライダー＆カルーセルのデザインパターンに、「左寄せ右チラ見せ」がある。画面左にピッタリ寄せて、右がわずかに見えている形態のものだが、これの実装が思いのほか面倒くさい。 左右チラ見せするプラグインならばいくつか思いつくのだが、片一方というのがなかなか候補にあがらない。これまでは前者の左右チラ見せできるプラグインで、苦労しながらもカスタマイズして片寄せを実現させてきた。カスタマイズといってもCSSの打ち消しが関の山なのだが。 そんな苦労を解消してくれそうなプラグイン「Glide.js」を提案させてほしい。 Glide.jsとは Glide.jsは、スライダー＆カルーセルライブラリだ。モジュール方式の実装により他のJavaScriptライブラリに依存しない。さらにvanilla JavaScriptおよびES6で記述された当該ライブラリは、極めて軽量で、高速に動作するとされている。 特徴 他ライブラリに依存しない モジュール読み込みができる vanilla JavaScriptで極めて軽量 MITライセンス インストール Glide.jsの導入は、3種類の方法がある。プロジェクトの都合でいずれかを選択するとよいだろう。 npm ダウンロード https://github.com/glidejs/glide CDN https://cdn.jsdelivr.net/npm/@glidejs/glide https://unpkg.com/@glidejs/glide 使い方 Glide.jsを使うには、JavaScriptとStylesheet、スライダーを構成するHTMLの記述が必要となる。あなたのコーディングルールに従い、対象ページに配置してもらえると有り難い。 なおnpmでインストールしたケースを想定している。ローカルに設置している場合は、ファイルパスを修正してほしい。 Stylesheet HTML JavaScript Glide.jsの必要最低限の記述は以上となる。果たして、スタンダードなスライダーを実装することができた。 「左寄せ右チラ見せ」にする そしてこのエントリー主題は「左寄せ右チラ見せ」だった。引き続き「左寄せ右チラ見せ」のカスタマイズをご覧いただこう。 左右の表示幅を制御するにはpeekプロパティを使用する。peekには、beforeとafterを与えることで、左右の見え幅を調整できる。上の例では、beforeに左側の見え幅を、afterに右側の見え幅を指定して、左寄せ右チラ見せを再現している。 まとめ Glide.jsには依存関係がない。すでに前述しているのだが、これがとても良い。jQueryプラグインのようにjQueryがなければ使えないものと違って、Glide.js単独でスライダーorカルーセルを実装できるのだ。 これは昨今のフロントエンド開発において、非常に重要な要素ではないだろうか。一貫して「jQueryプラグインで！」ってわけにもいかないことは理解してもらえると思う。Reactを使うケースもあれば、Vue.jsが向いているときもある。 それぞれの状況に応じてスライダー&カルーセルプラグインを選定しておくのも悪くないが、Glide.jsならば一貫性のあるソースコードが書けるはずだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
React Hooksに対応した複数のonChangeハンドラを処理する書き方
Functional Componentにおける複数のonChangeハンドラを一元的に処理するコールバック関数をお伝えしたい。 まずフォーム項目の操作は、onChangeハンドラが必要で、記述がなければwarningが発生するケースもある。input要素を有するコンテンツに限れば、必須イベントハンドラといえる。 そしてinput要素がひとつということも考えにくく、複数のinput要素から構成されることが予想される。たとえばログインフォームにしても、メールアドレスとパスワード、ログイン保持などが考えられるが、そのどれもstate変化によって成り立つ。 すなわちonChangeハンドラが必要となるが、それぞれでコールバック関数を定義していては効率が悪い。複数input要素があっても、ひとつのコールバック関数が処理できれば、もっとも効率がよいというものだろう。 コールバック関数の書き方 さて主題が、React Hooksを活用したコンポーネントにおける複数onChangeハンドラを処理する書き方だった。 React Hooksでstate管理するならば、おのずとFunctional Component設計になる。React Hooksは、旬なアーキテクチャであるが、Class componentで設計しなければならないケースもあることだろう。 したがってFunctional componentとClass componentの書き方を用意することにした。興味があれば目を通してみてほしい。 Class component Functional component まとめ Class component、Functional componentともに、大した差はないことが分かると思う。 イベントが発生したinput要素のname属性をstate名として、value属性をstate値として扱っている。果たして、stateを一元処理することになるわけである。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。 Reactアプリの多重クリックを防止する最適解とは？
-
フォートナイトのプレイヤー統計「Free Fortnite API」のリクエスト方法
Epic Gamesが販売・配信するTPSゲーム「フォートナイト」もシーズン9を迎えて依然勢力衰えない印象を覚える。ほかのバトルロイヤルゲームが過度のバランス調整でユーザーを失うなか、新規モードやキャンペーン、ユニークスキンの追加で初心者プレイヤーを留まらせ、楽しませてくれる。 ところが最近では、長時間労働を告発する記事により、過酷な労働環境が暴かれて話題になっている。同種のゲームに比べて豊富なアップデートには関心させられていたが、実情は、およそ週70時間労働に及ぶ極限状態で行われていたとのことだ。 「建築ゲー」ともいわれるユニークなゲーム性をもつフォートナイトだが、こんなことでファンが減ってしまうのは大変お粗末な事案だと感じた次第である。 とはいえフォートナイトを取り巻くコミュニティは盛んで、非公式APIまで公開されるなど、成長を支えている。サードパーティ製のサービスが公開されることは、Epic Gamesとしても歓迎すべき現象だろうと思う。 このエントリーでは、非公式API「Free Fortnite API」を紹介する。それにより、たくさんのサードパーティ製アプリが公開されて、春夏冬二升五合を願うためものである。 Free Fortnite APIとは Free Fortnite APIは、数百万におよぶFortniteプレイヤーの統計データを提供する。 特徴 プレイヤーデータを取得 パッチノートを入手 最新のFortniteニュースを入手 トップ10のFortniteプレイヤー情報を取得 Fortniteサーバーのステータス情報を取得 すべての権利はEpic Gamesにある 使い方 ストア情報を取得する https://fortnite-public-api.theapinetwork.com/prod09/store/get?language={language} 追加されるアイテムを取得する https://fortnite-public-api.theapinetwork.com/prod09/upcoming/get すべてのアイテムを取得する https://fortnite-public-api.theapinetwork.com/prod09/items/list 特定のアイテムを取得する https://fortnite-public-api.theapinetwork.com/prod09/item/get?ids={identifier} API統計データに基づく人気アイテム https://fortnite-public-api.theapinetwork.com/prod09/items/popular ユーザーIDを取得する https://fortnite-public-api.theapinetwork.com/prod09/users/id?username={User name} ユーザー統計を取得する https://fortnite-public-api.theapinetwork.com/prod09/users/public/br_stats_v2?user_id={User ID} チャレンジ情報を取得する https://fortnite-public-api.theapinetwork.com/prod09/challenges/get?season=current 武器情報を取得する https://fortnite-public-api.theapinetwork.com/prod09/weapons/get 最新ニュースを取得する https://fortnite-public-api.theapinetwork.com/prod09/br_motd/get?language={language} サーバー情報を取得する https://fortnite-public-api.theapinetwork.com/prod09/status/fortnite_server_status まとめ 以上が、Free Fortnite APIのリクエスト方法だ。 かくしてフォートナイトプレイヤー統計を得ることができることだろう。あとはアイデア次第である。とはいえ、有名プレイヤー情報を取得したり、パッチノートを入手したりでも見込みありだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
[gibo] Gitの無視ファイルgitignoreを一瞬で作る方法
![[gibo] Gitの無視ファイルgitignoreを一瞬で作る方法](https://wordpress.aizulab.com/wp-content/uploads/2019/05/gibo_banner.png)
みなさんは普段どのようにgitignoreを作成していますか？ 手作業で設定したり、GitHubのテンプレートから持ってきたり、前に使ったものを流用したりなど、様々な方法があるかと思いますが、 もしこのような方法で作成している方には「gibo」というツールをオススメします。 https://github.com/simonwhitaker/gibo インストール Mac環境であればHomebrewでインストールできます。 使い方 gibo listを実行すると対応する言語、フレームワークが表示されます。 だいたいの言語やメジャーなフレームワークであればリストに含まれているかと思います。 gitignoreを作成するにはdumpコマンドを使います。 以前はdump無しで良かったのですがアップデートで変更されたようです。 gibo dump NodeとするとNode.jsのgitignoreを出力します。 Railsであればgibo dump Railsのように使用する言語、フレームワークを指定しましょう。 これを.gitignoreファイルに書き込みます。 これでNodeの.gitignoreファイルが作成できます。 まとめ giboは https://github.com/github/gitignore を参照してgitignoreを作成しているようなのでgitignoreの内容も問題ないと思います。 私は以前から使用していたのですがあまりメジャーではないようでしたので紹介させて頂きました。 今まで手作業でgitignoreを作成していた方は、ぜひ使用されてみてはいかがでしょうか。
-
Next.jsでSassファイルを使う！node-sassモジュール設定方法
Next.jsでSassモジュールを使えるようにしたい？その手続き、私がお手伝いしましょう。 Next.jsには、もともとstyled-jsxが用意されています。それによりパッケージを追加せずとも、ReactコンポーネントベースのCSS設計ができるわけです。 コンポーネント単位でスタイルを当てる分には、設定もなくJSX形式で記述できます。しかしextendしたいCSSプロパティなどがある場合には、当該コンポーネントでは完結しません。 そこで取り入れたいのが、アプリケーション全体に適用されるスタイルです。CSSファイルを読み込めば済みますが、開発過程でSassを使用しているケースもあります。それならば折角だから、Next.js環境にもSassを導入したいではありませんか。 それが、このエントリーの動機です。あなたも同様のことでお困りなら、Next.js環境にSassモジュールを追加する方法をご覧になって、ぜひトライしてみてください。 必要なモジュール Next.js環境にSassを導入するには、つぎの２つのモジュールが必要です。 @zeit/next-sass node-sass 対象の環境にインストールします。コマンド実行後は、package.jsonに追加されることを確認してください。 または next.config.jsの修正 next.config.jsの先頭行で、「@zeit/next-sass」モジュールを読み込みます。当該モジュールは定数「withSass」格納してください。続いて、withSassメソッドをmodule.exportsに代入して、モジュール化しています。 CSS Modulesにする withSassメソッドにcssModules: trueを与えるとCSS Modulesが適用されます。CSS Modulesは、低レイヤーのUIにフォーカスしたアーキテクチャです。この概念の導入によりグローバル汚染防止に効果的です。styled-jsxも同様の考え方によるものといえるでしょう。しかし共通スタイルを複数コンポーネントに跨って適用したい場合には、使いません。 エラーが発生したら エラーが発生しましたか？私の環境では、つぎのエラーが発生しました。node-sassが環境に適用されていないとのことです。 エラー解消方法 node-sassのGitHubリポジトリにissuesが投稿されていました。 @aleclarson Thanks, it worked for me for macOS and electron 1.6.12. I’ve improved the script a bit to automate it: GitHub 上のシェルスクリプトを保存します。ファイル名は任意で結構。ファイルを、package.jsonがある階層に配置してください。用意が整ったら、シェルスクリプトを実行します。 まとめ Next.js環境でSassを使う方法をお伝えしてきました。共通スタイルにおいては、効率的な作業ができるのではないでしょうか。ただしReactは、コンポーネントベースの開発を勧めるライブラリであるため、各コンポーネントで読み込むなり、styled-jsx記述をするなりして、CSS Modules化を検討することも忘れないでください。
-
いますぐ使えるinput,select,textarea要素のCSSイディオム集
コーディングで手間がかかる要素といえば、フォーム周りではないでしょうか？ブラウザ固有のUIがあったり、ユーザーの操作によって状態に変化があったりと一筋縄にはいきません。 そのような訳で、フォーム周りのコーディングが面倒だと感じている人は少なくないはずです。私がその筆頭に君臨します。デザインに引っ張られることで、毎案件で一貫性がないソースコードを披露してしまう始末。大概フォーム周りは後回しにしてきました。 それが最近ようやく、まとまりのあるコーディングをするようになったと感じています。その一端をご覧ください。 イディオムとは いわゆる慣用句のことで、プログラミングやマークアップにおける定型文をイディオムといいます。 慣用句は、ふたつ以上のものが結合して、まったく別の機能を持つことを表します。 したがって、小さな要素の集まりからなるコンポーネント単位のソースコードも同様です。 きっとあなたも決まった書き方をするコンテンツがあると思います。それがイディオムです。 イディオム集 イディオム集には、input,select,textarea要素を用意しました。スタイルはSCSS形式で記述しています。「いますぐ使える」を目的としたため、コピペで使える状態です。したがって共通している箇所は適宜修正する必要があります。またサイズやボーダー、カラーはデザインに合わせて修正してください。 Input要素 テキストボックス See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. サーチテキストボックス See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. チェックボックス See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. ラジオボタン See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen.…
-
flexboxでリキッドレイアウト（固定＋可変）にする方法
このエントリーでは、flexboxでリキッドレイアウトを表現する方法をお伝えします。可変カラム＋固定カラムが横並びになるレイアウトにするとき使えるスタイルです。 リキッドレイアウトとは リキッドレイアウトは、可変カラムと固定カラム構成の名称です。ブラウザのサイズやデバイスの違いを柔軟に表示する概念です。 2カラム、あるいは3カラム構成からなるレイアウトが一般に見られるのではないでしょうか。 たとえば、サイドメニューが固定幅で、メインコンテンツが可変幅などが代表的です。 flexboxのリキッドレイアウトが使えるケース レスポンシブデザインに最適 固定、可変する要素があるとき フォームのラベルと入力要素が並ぶとき 使い方（2カラム） 2カラムレイアウトを例にHTML/CSSを記述します。各々のレイアウトに置き換えてご覧ください。 HTMLでは、梱包要素のwrapperクラスと固定カラムのsideクラス、可変カラムのmainクラスが確認できます。 CSSでは、まず梱包要素のwrapperクラスにdisplay: flex;を適用することでフレックスコンテナボックスにすることが目的です。それにより小要素は横並びになります。 続いて、sideクラスにwidth: 300px;の横幅を与えて固定値とします。 最後に、mainクラスにflex: 1;の指定で可変を実現します。flexプロパティはflexのスタイルカスタマイズする省略プロパティです。CSSショートハンドといいます。リキッドレイアウトを実現するにあたって厳密にプロパティを指定する必要性が無いため割愛しますが、気になる方は別途調べるとよいでしょう。[flex – CSS: カスケーディングスタイルシート] まとめ 以上がflexboxでリキッドレイアウトにする方法でした。必要なHTMLは、梱包要素と固定カラム、可変カラムです。必要なCSSは、梱包要素にdisplay: flex;と固定カラムにwidth: ~~px;、可変カラムにflex: 1;と覚えてください。 きっと活用できるケースがあると思い記事にしました。マークアップの一助となれば幸いです。
-
Node.js + Babelで「ReferenceError: regeneratorRuntime is not defined」となる場合
ES6で開発し、Babelでトランスパイルしたものをnode transpiled.jsの形で実行していますが、 「ReferenceError: regeneratorRuntime is not defined」のエラーが表示されるようになりました。。。 環境 package.json .babelrc 原因 await-aysncが原因らしいです。 Webpackの設定などで解決する情報はありましたがNode.js + Babelで解決するのに手間取ったので備忘録として。 対策１ 調べたところによると.babelrcを以下のようにすると良いと発見したので早速変更 .babelrc Error: Cannot find module ‘@babel/preset-env’ もちろんインストールしていないのでエラー yarn add @babelとしても同じエラーが。。。 yarn add @babel/preset-envでインストール？ と試してみるが次は以下のエラー Error: Cannot find module ‘@babel/core’ yarn add @babel/coreと不足しているパッケージをインストールし続けるのは違う、と思ったので別の方法を模索。。。 対策2 babel-polyfillをインストールしてトランスパイル対象のファイルにimport babel-polyfill;を記述することで解決。 という情報を発見。 そんなにシンプルに解決するのか半信半疑でしたが試してみることに。 yarn add –dev babel-polyfillとしエントリーファイルにimport babel-polyfillを追加してyarn build 以外と呆気なく解決。。。