会津ラボ

Illustration of a bird flying.
  • 【Electron+Next.js】デスクトップアプリジェネレーターNextronで簡単にElectronアプリ開発をしよう

    【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年の私が、もっとも感嘆したソースコード

    マークアップエンジニア歴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】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」の使い方

    スライダー&カルーセルで左寄せとかできる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翻訳を使う

    [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
  • Adobe XDのレイヤー名をリネームする。「Rename it」プラグインの使い方

    Adobe XDのレイヤー名をリネームする。「Rename it」プラグインの使い方

    コーディングにおいて、まず取り組むことといえば、画像の書き出し作業だろう。この作業がリズムよく実施できるか否かによって、その後の進捗に影響するといっても過言ではない。少なくとも私は、その認識をもって一気にクリアしたい工程である。 Adobe XDの場合、書き出したファイル名は、レイヤー名に関わる。レイヤー名がそのままファイル名になるということだ。レイヤー名が未変更状態だと、「長方形 xxx」だとか「線 xxx」などの名称が反映されている。 したがってファイル名は、命名規則に沿った名称に変えなければならない。書き出し作業を面倒に感じるのは、きっとこの名前を付けて保存する工程があるからに違いない。 レイヤー名が命名規則に沿ったものであれば、苦労はないが、そこはマークアップエンジニアの守備範囲であることが多い。コーディングの都合で、グループにしたいレイヤーや分割して書き出したい場合が考えられるためである。 それではどのタイミングでリネーム作業をすれば良いのか?いかに効率よく行えばよいかは、そのときの都合や好みによるため一概に何がよいとは言い難い。状況にあわせて書き出しウィザードで名前を付けて保存したり、XD内のレイヤー名を修正したりすればよい。だがそのどちらもシームレスに行えるものではないと感じてしまう。 そこでもうひとつの選択肢になり得る「Rename it」プラグインを紹介したい。 Rename it プラグインについて Rename itは、レイヤー名リネームをサポートしてくれる。アートボード内のオブジェクト操作に関連してリネームが行えるため意識を逸らすことがない。 特徴 レイヤー名を変更できる 命名パターンが用意されている(レイヤー名、連番、アルファベット、etc.) レイヤー名を置換できる 使い方 Rename itは、ダイアログ操作によりリネームを行うことになる。まずはプラグインをインストールしてもらいたい。 インストール Rename itをインストールするには、Adobe XDツールバー「プラグイン」>「プラグインを見つける…」をクリックするとプラグインウインドウが開く。 つづいて、ウインドウ内の入力フォームに「Rename it」を入力すれば、対象プラグインのみリストアップされるはずだ。インストールボタンをクリックして完了させよう。 リネームする場合 オブジェクトを選択 ショートカットキーを押下「⌃+⌥+R」 リネーム文字列を入力 Renameボタンをクリック アートボード上のリネーム対象オブジェクトを選択した後に、ショートカットキー「⌃+⌥+R」押下。するとリネームダイアログが表示される。 Name フィールドに文字を入力して、Renameボタンをクリック。以上でリネーム完了となる。果たして、レイヤー名が変わっていることを確認できる。 置換する場合 複数オブジェクトorアートボードを選択 ショートカットキーを押下「⌃+⌥+⌘+R」 Find&Replaceに文字列を入力 Renameボタンをクリック 複数のオブジェクトを選択するか、アートボードそのものをアクティブにすることで置換対象として認識される。選択が済めば、おもむろにショートカットキー「⌃+⌥+⌘+R」を押下して構わない。置換ダイアログが表示される。 Findに検索文字列、Replaceに置換文字列を入力する。それにより選択中のレイヤーから文字列がマッチしていれば、一括で置換が完了する。テキストエディタの文字列置換と変わらない感覚だろう。 まとめ 「Rename it」プラグインによるリネーム方法をお伝えしてきたが、作業フローに組み込むに足る内容だっただろうか。 Rename itでも、やはり完璧なシームレスとはいかないが、アートボード操作中にリネームを行える。僅かでもフローが連動していれば、効率UPにつながるはずだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

    June 7, 2019
  • [Mac]便利なopenコマンドをご紹介

    [Mac]便利なopenコマンドをご紹介

    Mac固有のopenというコマンドをご存知でしょうか? このコマンドは汎用性が高く便利なコマンドですのでご紹介します。 フォルダ、ファイルを開く まずはフォルダについて、cdコマンドでフォルダを移動して作業している中で、「このフォルダをFinderで表示したい」という時があります。せっかくターミナルでその作業フォルダに居るのにFinderを開いてフォルダを掘り下げていくのは二度手間です。そんなとき、openコマンドが役に立ちます。 以下のように作業フォルダ、もしくはフォルダのパスを指定してopenコマンドを実行するとFinderで開くことができます。 さらにopen対象をファイルにすれば適切なアプリケーションでファイルを開くことができます。 URLを開く フォルダ、ファイルでも十分便利ですが、URLも開くことができます。 URLを指定すればブラウザを起動し、そのページを開きます。私はあまり使いませんが一応ご紹介まで。 アプリケーションを開く 前述の通り、txtファイルを指定することでテキストエディタで開くことは出来ましたが、「別のエディタで開きたい」ということもあると思います。 その際はopenコマンドに-aオプションを指定することでアプリケーションを開くことができます。 エイリアスを設定する コマンドラインからCotEditorでテキストファイルを開くことはできましたが、毎回CotEditorのパスを入力するのは手間ので、エイリアスを設定しましょう。 ホームディレクトリにある.bashrcにエイリアス設定を追加します。 これでエイリアスの設定ができましたのでcotコマンドでCotEditorを開くことができます。 まとめ いかがだったでしょうか。私はマークダウンエディタで開くためにTyporaのエイリアスを設定したり、VSCodeのエイリアスを設定したりしています。非常に便利ですのでMacをお使いのユーザーはぜひお試しください。

    June 6, 2019
  • React Hooksに対応した複数のonChangeハンドラを処理する書き方

    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アプリの多重クリックを防止する最適解とは?

    June 3, 2019
  • JWT(JsonWebToken)を使った認証付きGraphQL APIを作る

    JWT(JsonWebToken)を使った認証付きGraphQL APIを作る

    以前にGraphQL+MongoDB+graphql-composeという構成のGraphQL APIの実装についてご紹介させていただきました。 この構成のGraphQL APIにユーザ認証が必要になりましたのでJWT(JsonWebToken)を使った認証機構を追加しました。 JWT認証を作る JWTのパッケージをインストールします。 auth.jsを作成しJWT認証を実装していきます。 内容を見ていきます。まず、/login以外のURLで認証が必要になるように設定します。 JWTをリクエストヘッダに含んだ状態でアクセスしてもらうのでヘッダにトークンが存在しない(もしくはフォーマットが違う)場合はフォーマットエラーを返します。 ヘッダにトークンが含まれていればトークンをチェックして、可否を返します。今回は”secret”をシークレットワードとしています。 server.js server.jsを修正します。 先ほど実装したauth.jsをimportしましょう。 /loginをPOSTで設定し、リクエストパラメータ(user_id, password)を受け取って認証します。 今回はサンプルなので固定値でチェックし、ログインできればJWTを作成して返却します。 authentication(app)をgraphqlの前に追加することで/graphqlはログインが必要となります。 サーバを起動しPostmanからログインAPIを叩いてみますが・・・。 パラメータが取得できません。。。 bodyParser 毎回忘れるのですが、bodyParserのurlencodedを設定しないとパラメータ取得ができません。以下をserver.jsに追加します。 もう一度Postmanで試します。 これでログイン認証に成功し、JWTを取得することができました。 取得したJWTをヘッダに設定してGraphQLのQueryをPOSTしてみます。 無事、データを取得することができました。 ヘッダを設定しない場合は以下のようにエラーとなりますので、これで認証付きGraphQL APIの完成です。 まとめ GraphQLにアクセスする前にログインAPIを叩くのではなくGraphQLで認証する方法もあるようです。 そちらについても機会があれば検証を行い、記事にしてみたいと思います。 今回使用したコードはこちらです。 https://github.com/aizulab-igarashi/graphql_compose_auth

    May 31, 2019
  • Markdownエディタ「Typora」「boostnote」どっち使ったらいい?比較してみた

    Markdownエディタ「Typora」「boostnote」どっち使ったらいい?比較してみた

    私はいま、Typoraかboostnoteかで悩んでいる。これらはMarkdownエディタあるが、より使い勝手のいいツールを求めてエディタ沼にハマってしまっているわけだ。 このところライティングするようになって、Markdownエディタの重要性を再認識している。Markdownエディタを使う理由は、なんといっても骨子を組み立てる段階で意味付けできることだろう。 マークアップエンジニアにとって慣用語の「セマンティックWeb」に似ていなくもない。アウトラインを構成し、コンテンツに意味をもたせ、書き手読み手に正しく理解してもらう思想は馴染み深く感じてしまう。 Markdownエディタに求めることは、効率がよく記述を続けられて、意識を妨げないことだろう。操作に意識が割かれてアイデアが遮られるようであってはならない。 これは記事に起こして比較してみようではないか。と考えた次第である。この主題に興味がもてるようならば、お付き合いいただき参考にしてもらえると有り難い。 Markdownエディタとは Markdownエディタとは、Markdown記法に対応したテキストエディタのことでプレビュー機能が備わっている。意味付けした要素にスタイルが適用されて確認できる機能だ。 テキストドキュメント作成に重宝することから、ビジネスパーソンに広く利用される。エンジニアにも、Markdown記法は浸透していてREADME.mdを作成するシーンには欠かせないツールになっている。 テキストドキュメントの用意に際して、エクスポート機能を備えたエディタもある。別ファイル形式で共有するニーズに応えたものだろう。アジェンダや議事録の共有に役立ちそうだ。 Typora vs boostnote Markdownエディタについて、理解を深めることができた。それではさっそくTyporaとboostnoteを比較してみよう。 トレンドで比較 どちらとも言えない接戦を観せている。平均値ではboostnoteに軍配が上がるが、今日現在ではわずかしか違わない。当エントリーに興味を寄せるあなたにおいても、この程度の点差では判断しかねることだろう。 そもそもモノゴトは、平均値で傾倒するわけではない。いずれかの特徴が基になっていつの間にか常用しているのではないだろうか。 チャートを注視してみるとそれぞれに特徴があることがわかる。 boostnoteは、比較的一定を保ち推移している。一方のTyporaは、ときどき活気を見せる。 検索結果ボリュームで比較 Typoraの関連ページがボリュームで勝っている。boostnoteより3.5倍超インデックスされていて関心の高さが窺える。 これはTyporaのローンチ時期が大きな要因だろうと思う。先行によるリードは侮れない。 しかしながらGoogleいわく、「検索結果ボリュームは正確な数値ではない」と明示している。あてにならない数字ということだ。 とはいえ漠然と関心を寄せた人が、boostnoteよりTyporaが多いことは確かなようだ。 UIで比較 双方ともにカラムレイアウトで、エディタとしては一般的なインターフェースをしている。boostnoteの左カラムは開閉式になっていて、閉じたときの雰囲気はTyporaと変わりないように見える。 いずれにしてもエクスペリエンスを感じることができる。UIが作り込まれているからこそ質の高いUXを提供できるのだろう。 ツールとのコミュニケーションが得やすいというのは、エクスペリエンスが高い所以である。なにができるのか、なにをしてくれるのか、これからなにが発生するのか、ツールと話せることが重要だ。 たとえば、話題が噛み合う人物とのやり取りを想像してみてほしい。モチベーションの高い人物とのコミュニケーションは、ワクワクさせてくれる。そこから得られるエクスペリエンスは少なくない。 このように質の高いツールとならば良い関係を築ける。Typoraとboostnoteにはその資質があるのではないだろうか。 機能で比較 これまでトレンド、検索結果ボリューム数、UIで比較してきた。とはいえもっとも気になるのが機能面だろう。 互いにポイントとなる事柄をリストアップしてみた。 Typora OS依存なし 常時シームレスプレビュー ソースコード/タイプライター/フォーカスモードがある エクセル&スプレッドシートの表組みをコピペできる スクリーンショット機能がある 複数テーマが用意されている コードブロックがシンタックスハイライトされる メニューバー項目が日本語 boostnote OS依存なし ライブ/シームレスプレビューの切替ができる 「Markdown note」と「Snippet Note」がある Snippet Noteにソースコードをメモ書きしておける Snippet Noteはインデントおよびタブサイズを設定できる コードブロックにコピーボタンがある コードブロックに色の対比があって判別しやすい 国産 UIにおいては、それほど違いを感じなかった両ツールだが、機能面ではちゃんと個性をアピールしているのがわかる。…

    May 29, 2019
←Previous Page
1 … 9 10 11 12 13 14
Next Page→

会津ラボ

Proudly powered by WordPress