会津ラボ

[Golang + Docker]GinをDocker上で試してみる

先日、社外のエンジニアと話す機会がありました。その中でGo言語の話になり、Go言語に対しての良い印象を受けたのでそろそろバックエンド開発をGo言語にシフトしようかな、と思いました。私はGoほぼ未経験ですので今回はDocker上にGo言語環境を容易し、Webサーバで「HelloWorld」を返す程度のものを作成してみようと思います。ディレクトリ構成ディレクトリの中身は以下の２ファイルのみです。それぞれ見ていきましょう。 docker-compose.yml Dockerイメージとしてgolangの最新版を使用します。これだけでGo言語環境が使用できます。ポートフォワードの設定は8080、コンテナ名は任意ですが今回はgo_containerとしました。また、ディレクトリ直下のファイルをすべてコンテナ内の/go以下に配置しています。実装はローカルのVim上で行い、実行をDockerコンテナ内で行う形で進めます。 main.go main.goを実装していきます。その前に今回使用するGoパッケージをインストールします。まず以下のコマンドでDockerコンテナを起動してアタッチします。無事コンテナに入ることができたらGoのWebアプリケーションフレームワークのGinをインストールします。インストールが完了したらmain.goを実装していきます。 git.Defaultでrouterを作成し、 routerにGETの/helloAPIを追加します。レスポンスは「Hello World!!」とします。最後にポート8080を指定して起動します。起動が確認できたらブラウザでlocalhost:8080/helloにアクセスしてみます。レスポンスが確認できました。まとめ Dockerを利用することで環境構築に時間をかけずにGo言語へ入門することができました。まずはGinを利用してCRUDのAPI開発を行なってみて少しずつGo言語での開発に慣れていきたいと思います。

July 16, 2019
CSSボックスモデルとは？margin,padding,border領域の解釈とアンチパターン

CSSには、余白を与えるプロパティが用意されている。marginとpaddingだ。いずれもスペースを空けるために使うことは、周知のとおりだが、これを正しく使い分けできていないサイトを見掛ける。marginを使うべき箇所にpaddingを用いたり、またその逆もあったりする。なぜmarginとpaddingを誤って使ってしまうのだろうか？スタイルシートには、margin,paddingそれぞれの定義がなされているにも関わらずだ。それについて私の見解は、コーディングでCSSボックスモデルを意識していないためではないかと考えている。 CSSボックスモデルは、スタイルレイアウトするうえでとても重要な概念で、Webサイトコーディングにおいて必要不可欠な知識だといえる。ボックスモデル知識の有無がコーディングクオリティに影響するし、もしマスターすることができれば、あなたのマークアップ能力が大きく向上するだろう。このエントリーは、CSSボックスモデルの理解を深めてもらうことが目的である。ボックスモデルについてボックスモデルとは、矩形からなる領域のこと。文章や画像などのコンテンツとそれを梱包する周辺領域で構成されている。 content(コンテンツ)領域 content領域は、内容物に依存して矩形領域を形成する。文章や画像、動画があることで成り立つ包含ブロックである。つまり文章などのコンテンツ量に応じて、その存在を認めることができるか否かが決まる。もちろん空要素であってもボックスモデルは存在するわけで、目視できないというわけだ。さらに横幅（width）と縦幅（height）のCSSプロパティ指定によってもcontent領域サイズを変えられる。 padding(パディング)領域 padding領域は、content領域を囲って矩形領域を形成して「要素内の余白」を担う。 padding領域には、上下左右に区分されていて、それぞれpadding-top,padding-right,padding-bottom,padding-leftで拡張できる。これらを省略してpaddingの一括指定でもよい。 border(ボーダー)領域 border領域は、padding領域を囲って矩形領域を形成して「要素の境界線」を担う。そしてborder領域は、上下左右に区分されていて、それぞれborder-top,border-right,border-bottom,border-leftで拡張できる。これらを省略してborderの一括指定でもよい。 margin(マージン)領域 margin領域は、border領域を囲って矩形領域を形成して「要素外の余白」を担う。そしてmargin領域は、上下左右に区分されていて、それぞれmargin-top,margin-right,margin-bottom,margin-leftで拡張できる。これらを省略してmarginの一括指定でもよい。ボックスモデルのアンチパターンこれまでボックスモデルについて説明してきたが、概念的なもののため、分かりづらく感じたかもしれない。説明とはそういうものだとご容赦いただきたい。そこで既存サイトのアンチパターンで説明してみようと思う。既存サイトは、コーダーの解釈でスタイルが済んでいて、ボックスモデルの理解の良し悪し判断できる。そしてアンチパターンならば、margin,padding,borderの関係がイメージしやすいかもしれないというわけだ。さてアンチパターンだが、サンプルを探すのに苦労しなかった。自社サイトでいくつか発見することができたから、それを紹介しよう。ブルーのハイライトがcontent領域で、オレンジのハイライトがmargin領域を表している。この要素の悪いところは、marginの使い方だ。marginは「要素外の余白」を担うものだった。要素同士を離すために使うのがベスト。ところが下と左を空けるためにmarginを使っている。誤りとは言い切れないが、違和感を感じてしまう。このようなケースなら、梱包要素でpaddingによる「要素内の余白」が適切ではないだろうか。この要素の悪いところは上記パターンと同様に、marginの使い方だ。左の余白は梱包要素の「要素内の余白」で表現すればよい。そして上の余白は、ただただダメだ。この要素はliタグで、それを囲むulタグが存在する。ulタグの上部余白とするのがよいだろう。このケースもmarginが問題だ。ただborder-leftを表現しなければならない都合上、padding-leftを使うわけにもいかない。paddingで左余白を付けてしまうと境界線は左付きになってしまうからだ。このようなケースは時々に遭遇する。ボックスモデルは理解していても、妥協を余儀なくされるものかとも思うが、代替案はある。 position: relative;で基準位置から右に80pxズラして、80px分はみ出さないようにdisplay: inline-block;としている。あるいは梱包要素でoverflow: hidden;とするのもよいだろう。ボックスモデルを説明するエントリーだから、代替案を示してはいるが、ベーシックパターンを採用しなければならないときもある。とても厄介なところだ。だがそもそも、HTML構造でなんとかなることが少なくない。遭遇した場合は、じっくり考えてみてほしい。この要素の悪いところは、paddingだ。要素内の余白を担うpaddingで、要素同士を離している。marginで余白を設けるべきところだ。だがそれよりもpaddingを適用しているのが、imgタグであるところが、ただただダメだ。梱包要素で余白を担当させればよい。それならばmarginだろうが、paddingだろうが使い道はあるはずだ。ここまで来るとお分かりいただけると思うが、悪いところは、marginだ。要素同士を離すというわけでも無いのだから、marginではないことが分かる。したがって要素内の余白を担うpaddingを適用すればよい。まとめ便宜上「ボックスモデルのアンチパターン」という表現をしてきたが、そもそもボックスモデルにアンチパターンというものはなく、コーダーのソースコードに発生するものだ。無思慮に取り組むと上記アンチパターンが起こり得ることを知ってもらえたならば嬉しく思うとともに、このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

July 10, 2019
ElmでBootstrapを使う[elm-bootstrap]

以前にElmで簡単なTodoリストを作成しました。【elm】2019年にわざわざ学ばなくてもいい言語でTodoアプリを作る今回はこのTodoリストの見栄えを良くしたいと思うのですが私はあまりスタイルが得意ではありません。。。ですのでBootstrapを利用してスタイルを整えたいと思います。 Elmにはelm-bootstrapというBootstrapのパッケージがありますのでこちらを使います。 http://elm-bootstrap.info/ インストールパッケージをインストールします。インストールコマンドはelm installなので以下のようにパッケージ名を指定してインストールします。インストールが無事完了するとelm.jsonにパッケージ名が追加されているかと思います。 Button まずはボタンから。 View.elmを編集します。以下を追加してBootstrapパッケージをimportしましょう。次にview関数のdivタグを修正します。 CDN.stylesheetを追加し、ボタンをBootstrapのButtonに変更しています。 Buttonの記述は少し複雑ですがBootstrapを使ったことがある人であれば意味は通じると思います。インラインスタイルなどはonClickと同じようにButton.attrsに追加することで反映されます。 ElmReactorを起動して結果を確認しましょう。 http://localhost:3000/src/Main.elm にアクセスし、結果を確認します。ボタンが見慣れたBootstrapのものに変更されています。 Table 次にTableをBootstrap化します。先ほどと同じようにまずはimportを行います。テーブルを表示する関数はviewTableと、tbodyを表示するviewTrに分けていますので、まずはviewTableから変更します。 Buttonの時と同じようにTable.tableとし、BootstrapのTableを使用します。 optionとしてstripedとhoverを設定していますが不要であれば削除しましょう。ほぼElmの記述と同じですのでここで詰まることはないかと思います。続いてviewTr関数です。こちらもほとんどElmの記述のままです。変更が完了したらElmReactorで確認します。 Bootstrapのテーブルが反映されています。まとめ ElmでのBootstrap適用についてご紹介致しました。 elm-bootstrapを利用することでElmの記述からかけ離れることなく、Bootstrapを採用することができると思います。ぜひ試してみてはいかがでしょうか。

June 28, 2019
デザインから再利用可能な範囲を認識するマークアップエンジニアの考え方

Webサイトをコーディングするとき、いかにレイアウトを範囲認識するかで、コーディングの出来栄えが左右する。コンポーネントとする範囲が広大だと、上階層CSSセレクタに依存してしまい使い回せず、再利用性に欠けたものになってしまうためだ。もちろん一意的なレイアウトならば、それで構わないのだが、CSS設計が謳われる昨今では、コンポーネント単位で捉え、ほかを汚染しない再利用を考慮した作りが是とされている。このエントリーでは、会津ラボサイトを使ってレイアウトの捉え方を説明していく。参考となれば良いのだが、あくまで一例であることは理解いただきたい。範囲を考えるまずデザインを見て、再利用可能な範囲を考えよう。考える作業は、意識内で行ってもよいが、紙にプリントして色ペンで囲うとわかりやすい。視覚的に認識することでコーディング高速化に寄与することだろう。とても、おすすめだ。会津ラボサイトをコンポーネント単位で見た図である。枠線で囲ったところが、再利用可能な範囲というわけだ。枠線の単位でCSSセレクタ名を与えれば、ほかを汚染することもなくなる。緑線、赤線の関係は、緑線のコンポーネントに赤線のコンポーネントが入り子構造になっていることを示しているが、CSSセレクタまで入り子構造にするわけではなく、それぞれ独立した再利用可能な状態を保たなければならない。 HTML構造を考える再利用可能な範囲が理解できたところで、それに沿ったHTML構造を考えよう。枠線は再利用可能な範囲だった。いかなる箇所に配置しても利用できるHTML構造でなければならない。そのことを念頭にHTMLを組み立てるわけだが、前工程を紙に起こしているのであれば一目瞭然だと思う。それでは会津ラボサイトのコンテンツを構成するソースコードをご覧いただこう。下記①〜⑨は、単独で成り立つもので、⑩〜⑫は、①〜⑨のコンテンツを内包することで成り立つものとなっている。 ① 会津ラボが掲げるスローガンを構成していて、h1タグを使っているのがポイントだ。 ② グローバルメニューを構成している。 ③ ユーティリティメニューを構成している。 ④ ヒーローエリアを構成している。 ⑤ カード型コンテンツを構成している。 ⑥ 見出しエリアを構成している。 ⑦ 最新情報などのアーカイブコンテンツを構成している。 ⑧ バナーコンテンツを構成している。 ⑨ フッターコンテンツを構成している。 ⑩ ヘッダーコンテンツを構成しているわけだが、そのなかに①②③を内包している。上述からの変更点は、①②③のトップレベル要素にheader-xxxの要領でclassを付与したことだ。①②③のコンポーネントは、再利用性を担保するため位置に関わることは記述していない。配置された先で余白や幅の指定が邪魔になるからだ。もし余白や幅の指定が不要ならば、class付与しなければよい。このケースだと、headerコンポーネント内の余白調整は、headerコンポーネントに任せることとなり、それぞれheader-xxxが追記されたというわけだ。 ⑪ カード型コンテンツを並べたエリアを構成していて、⑤を内包している。 ⑤も同様に余白や幅のスタイルは持たず、gridコンポーネントの中で良しなにしてもらう魂胆だ。ところが新たにclass付与はしていない。もしもfeatureコンポーネントをgridコンポーネントの小要素として余白を与えてしまうと、境界ボーダー1px分だけ片一方のコンテンツ幅が短くなってしまう。そんな理由からgridコンポーネント直下の配置は避けて、横並びした要素に内包するようにしたわけだ。 ⑫ ここは新着情報エリアを構成していて、⑥⑦を内包している。⑥⑦にあたっては、配置先で余白や幅の必要がないため、article-xxxのようなclassは付与していない。まとめデザインのレイアウトから再利用可能な範囲を認識して、それをHTML構造にする一連の工程を説明してきた。これは私自身いまでも難しく思うし、やり甲斐を感じる工程である。以前、電車通勤していたころ、中吊り広告を見て範囲を考えるなんてことをしていた。メモ帳に書いてみたりもした。もし暇なときは挑戦してみてはどうだろう。レイアウト認識を習慣付けておけば、仕事でも役立つはずだ。このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

June 27, 2019
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学習を強力にサポートするオンラインエディタであるが、さらに他人のソースコードをダッシュボード上に保存しておける。この機能も大変有り難い。結局のところ学習期は、他人のソースコードがもっとも優れた教材なのだと思う。オンラインエディタは、あなたの学習を効率化して、習得を加速させるツールになるはずだ。

June 24, 2019
【Electron+Next.js】デスクトップアプリジェネレーターNextronで簡単にElectronアプリ開発をしよう

Electronデスクトップアプリのレンダラープロセス設計において、求められるスキルセットはWebアプリ案件とそれほど違うところはない。静的コンテンツで済むのであれば、HTML&CSSとわずかなJavaScript(jQuery)があればよい。コンテンツ更新が頻発するのなら、SPAを考慮したい。ReactやVue.js、Angularなどが候補になるだろう。 SSRフレームワークで知られるNext.jsやNuxt.jsを得意とするなら、十分に活用できるはずだ。ただしレンダラープロセスのウインドウ生成には、起点となるHTMLファイルを定義する都合があるため静的HTMLにエクスポートする必要がある。そもそもdevelopment時点ではHTMLファイルがない。pagesフォルダ配下のjsファイルがルーティングと関連付くかたちでページ生成されるためである。ごく単純なSPA構築ライブラリと相違するポイントであって、Electronとともに使うときには、非常に難解な要素といえる。それでもElectron+Next.jsが候補されているなら、もっとも効率のよい始め方がある。Next.jsを基に開発が進められる「Nextron」を使ってみてはどうだろう。 Nextronとは Nextronは、デスクトップアプリジェネレーターである。利用者は、Electron+Next.js環境が整った状態で開発を開始することができて、CLIでプロジェクト初期化や開発、ビルドの設定がされているため手間が省ける。さらにNextronには、さまざまなケースを想定したexampleが用意されていて、要件を満たしてくれる。プロジェクト要件に近いexampleから初期化できるわけだ。大変有り難い仕様になっている。特徴使い方 Nextronをインストール Nextronを-gオプションでインストールする。これによりnextronコマンドを使用できるようになる。 nextronインストールの無事を確認してみよう。プロジェクトを初期化 Nextron環境を初期化しよう。下記プロジェクト名は任意で構わない。 Nextronを–globalにインストールしない場合の初期化方法も用意されている。依存関係をインストール Nextron環境に依存関係するパッケージモジュールをインストールしよう。果たして、node_modulesフォルダが生成されていることだろう。開発モードを実行不測のことがなければ、ウインドウが立ち上がる。開発モードでは簡易Webサーバーが起動している。「http://localhost:8888/home」にアクセスすれば、ブラウザでも確認できるはずだ。ビルドを実行「dist」フォルダが生成される。フォルダ配下にインストーラーや実行ファイルがあることを確認しよう。まとめ Electron+Next.js 要件が求められるプロジェクトならば、Nextronはよい選択ではないだろうか。環境構築が初めてならなおさらだ。自身で依存関係パッケージモジュールをかき集めるには、とても骨が折れる。それならNextron環境で、プロジェクトにマッチするexampleを活用するのが賢明と思える。exampleの記述には、Electronたらしめるipc通信に関することがhelpersにまとめられている。Web制作者にとって馴染みないipc通信をサポートするメソッドが使えるのは大変有り難い次第だ。これほどの作り込まれたNextronは、デスクトップアプリジェネレーターといって申し分ない。ぜひ検討してみてほしい。

June 21, 2019
マークアップエンジニア歴10年の私が、もっとも感嘆したソースコード

他人のソースコードから得られる知識は、想像以上に多くて眺めているだけでも大変勉強になる。私はマークアップエンジニアということもあり、Webサイトのソースコードを閲覧する習慣がある。Webサイト訪問ついでにソースコードを覗く訳だ。ユニークな記述があれば、悪怯れることもなく我がものとしてしまう。なんと傍若無人なことか。ほかにもオンラインエディタやgithubなども守備範囲である。他者のソースコードを容易に閲覧・学習することができることは有り難い限りだ。さて、そんななか他者のソースコードに感嘆の声をもらしたことはないだろうか？私には、思い及ばないアプローチのコーディングに関心してしまった経験がある。思わず隣席のエンジニアに自慢してしまうほどだった。その内容をご覧にいれようと思うが、マークアップエンジニアでなければ興味をもてないかもしれない。そこはご容赦いただきたい。ソースコード HTML CSS 説明このソースコードのどこに感嘆したのかはflexboxの折り返した状態と同様のことが再現できていたことだ。各.boxは、内包するテキストの分量が違うため、高さが異なる。無思慮にfloatで横並びさせると高さの異なる.boxに引っかかり、まともに左端へ折り返すことができない。ところが、上述のスタイルだと、不測のこともなく左端へ折り返してくれる。この件について、「flexboxでいいじゃん」と思ったのならば、それはもっともな意見だ。flex-wrapならば、引っかかることなく左端へ折り返すだろう。そのとおりである。しかし上述ソースコードを認めたのがIE8などが要件に含まれるような時代のことで、flexboxなど使えるものではなかった。そして当時このようなレイアウトは、jQueryプラグインで高さを揃える対策がとられていた。heightLine.jsやfixHeight.jsと聞いてピンと来るなら同じ時代を過ごした戦友なのだと思う。ただJavaScriptによる対策だと、読み込みまでのタイムラグがあるため、わずかなチラつきが生じる。私はこれが気に食わなかった。そんななかの上述ソースコードだったから、感嘆したのも頷ける。まとめ私の思い出話になってしまったわけだが、数年たったいまでも記憶しているほどの内容だったということだ。確かにHTMLにもCSSにもJavaScriptにも関心したものはあったはずだが、すでに我が身に消化して記憶すらしていない。自身のソースコードも他者に閲覧されていることを自覚して、世に発信しなければと考えるようになったのも、この頃からだったと思う。私も、他者に影響や知覚させれるほどのものをコーディングしていきたいと改めて思い直すとして、このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

June 20, 2019
【Electron】PC内のローカルフォルダの画像を表示する

Electronデスクトップアプリ内に表示される画像は、レンダラープロセスに関連付いたHTML&CSSやJavaScriptから参照できるフォルダに配置するのが一般的である。しかしPC内のローカルフォルダを参照しなければならない場合どうすればよいだろうか。このエントリーは、上記要件に遭遇した際の対応を記したものだ。フォルダ構成 mainフォルダにメインプロセスの起点となるindex.jsを配置 rendererフォルダにレンダラープロセスの起点となるindex.htmlを配置プロジェクトフォルダ内の画像を表示 rendererフォルダの「aizulab_logo.png」を読み込む PC内ローカルフォルダの画像を表示 Documentsフォルダの「aizulab_logo.png」を読み込む例外 webpack-dev-serverの簡易Webサーバーを必要とするケースも考えられる。たとえばSSR開発をサポートするNext.jsやNuxt.jsは、そもそも起点とするHTMLファイルがない。pagesフォルダ配下のjsファイルがルーティングと関連付くかたちで、ページが生成されるためである。したがって、Electronの開発時には簡易Webサーバーを参照するようにして、ビルド時にはエクスポートした静的ファイルを参照させる。開発時に簡易Webサーバーを設ける必要がある場合、PC内ローカルフォルダ参照がルートパスであるため簡易Webサーバーのルートを指し示してしまう。それでは、該当する画像を表示させることができない。これに対処するには、のように「file://」プロトコルを使ってほしい。これはWindowsの場合でも同様である。ところが、Windowsだと背景画像にすることができなかった。背景画像にしたかった理由は、縦横比は保持して拡大縮小させたかった。つまりbackground-size:cover;を適用するつもりだったのだ。これをimgタグで実現させなければならない。この対処には、で、縦横比を保持して拡大縮小させることができる。もしこれらの事象に見舞われたら試してほしい。そしてこのエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

June 20, 2019
スライダー＆カルーセルで左寄せとかできる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ならば一貫性のあるソースコードが書けるはずだ。このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

June 17, 2019
[translate-shell]コマンドラインからGoogle翻訳を使う

私はvimを使ったり、gitのCLIを使ったり、ターミナルで作業することが多いのですが、関数名に使用する英単語が合っているか調べたい時があります。 Google翻訳で確認したいのですが、それだけのためにブラウザを起動するのは億劫なのでコマンドラインから翻訳できるtranslate-shellを使うようにしています。 https://www.soimort.org/translate-shell/ インストールと使用方法 MacではHomebrewでインストールできます。インストールが完了したらtransコマンドが使用できます。 transコマンドはオプションとして言語と単語が指定してGoogle翻訳を行います。試しに会津ラボの「ラボラトリー」という単語を翻訳してみましょう。 {en=ja}とすることで英語から日本語への翻訳になります。もちろん逆も可能です。まとめ長文の翻訳はできませんがスペルのチェックなどのちょっとした用途にはブラウザを開く手間が減るので使い勝手が良いです。普段ターミナルで作業している方はぜひ試してみてください。

June 12, 2019