「Website」タグ付き投稿 5 件

Electronのウェブサイトには、APIドキュメント、チュートリアル、Electron関連のnpmパッケージなどを瞬時に検索できる新しい検索エンジンが搭載されました。

Electronのような新しいテクノロジーやフレームワークを学ぶことは、最初は大変に感じるかもしれません。クイックスタートを過ぎると、ベストプラクティスを学ぶこと、適切なAPIを見つけること、夢のアプリを構築するのに役立つツールを見つけることが難しくなることがあります。私たちは、Electronのウェブサイトを、アプリをより迅速かつ簡単に構築するために必要なリソースを見つけるための、より優れたツールにしたいと考えています。

electronjs.orgの任意のページにアクセスすると、ページの上部に新しい検索入力欄が表示されます。

検索エンジン​

最初にウェブサイトに検索機能を追加しようとしたとき、バックエンドとしてGraphQLを使用した独自の検索エンジンを開発しました。GraphQLは使いやすく、検索エンジンも高性能でしたが、すぐに検索エンジンの構築が簡単な作業ではないことに気づきました。複数単語の検索やタイプミス検出などは、正しく機能させるためには多くの作業が必要です。ゼロから開発するのではなく、既存の検索ソリューションであるAlgoliaを使用することにしました。

Algoliaはホスト型の検索サービスであり、React、Vue、Bootstrap、Yarnなど、人気のあるオープンソースプロジェクトで急速に採用されています。その他多数。

AlgoliaがElectronプロジェクトに適している理由の一部を以下に示します。

• InstantSearch.jsは、入力中に結果を約1ミリ秒で表示します。
• タイプミス許容により、widnowと入力しても結果が表示されます。
• 高度なクエリ構文により、"正確な引用符付き一致"と-除外が可能です。
• APIクライアントはオープンソースで、よく文書化されています。
• 分析により、ユーザーが最も検索しているもの、および検索しているが見つからないものがわかります。これにより、Electronのドキュメントを改善するための貴重な洞察が得られます。
• Algoliaはオープンソースプロジェクトで無料で利用できます。

APIドキュメント​

達成したいことが分かっているが、正確な方法がわからない場合があります。Electronには750を超えるAPIメソッド、イベント、プロパティがあります。人間がすべてを覚えるのは不可能ですが、コンピューターは得意です。ElectronのJSON APIドキュメントを使用して、このすべてのデータをAlgoliaにインデックス化しました。これにより、必要なAPIを簡単に検索できます。

ウィンドウのサイズを変更しようとしていますか？resizeを検索して、必要なメソッドに直接ジャンプできます。

チュートリアル​

Electronには、APIドキュメントを補完するチュートリアルのコレクションが常に増えています。これで、関連するAPIドキュメントとともに、特定のトピックに関するチュートリアルを簡単に検索できるようになりました。

セキュリティのベストプラクティスを探していますか？securityを検索してください。

npmパッケージ​

npmレジストリには70万を超えるパッケージがあり、必要なパッケージを見つけるのは容易ではありません。これらのモジュールの発見を容易にするために、electron-npm-packagesを作成しました。これは、レジストリにある3400以上のモジュールのコレクションで、Electronでの使用のために特別に構築されています。

Libraries.ioのメンバーは、コード、コミュニティ、ドキュメント、使用状況などの指標を組み合わせてソフトウェアプロジェクトをスコアリングするシステムであるSourceRankを作成しました。私たちはsourceranksモジュールを作成し、npmレジストリ内のすべてのモジュールのスコアを含め、これらのスコアを使用してパッケージの結果をソートします。

Electronの組み込みIPCモジュールに代わるものを探していますか？is:package ipcを検索してください。

Electronアプリ​

Algolia を使用したデータのインデックス作成は簡単なので、electron/appsから既存のアプリリストを追加しました。

musicまたはhomebrewを検索してみてください。

検索結果の絞り込み​

以前にGitHubのコード検索を使用したことがある場合は、extension:jsやuser:defunktのようなコロン区切りのキーバリューフィルタをご存知かもしれません。このフィルタリング手法は非常に強力だと考えているため、Electronの検索にis:キーワードを追加しました。これにより、単一の種類の結果のみを表示するようにフィルタリングできます。

• is:api thumbnail
• is:tutorial security
• is:package ipc
• is:app graphql

キーボードナビゲーション​

キーボードショートカットが人気です！新しい検索は、指をキーボードから離さずに使用できます。

• /で検索入力にフォーカスします。
• escで検索入力にフォーカスし、クリアします。
• 下矢印で次の結果に移動します。
• 上矢印で前の結果、または検索入力に移動します。
• Enterで結果を開きます。

このキーボード操作を可能にするモジュールもオープンソース化しました。これはAlgolia InstantSearchで使用することを目的としていますが、さまざまな検索実装との互換性を確保するために汎用化されています。

皆様からのフィードバックをお待ちしております​

新しい検索ツールに問題が発生した場合は、お知らせください！

フィードバックを送信する最善の方法は、適切なリポジトリでGitHubに問題を報告することです。

• electron/electronjs.orgはElectronのウェブサイトです。どこに問題を報告すればよいかわからない場合は、これが最適な選択肢です。
• electron/algolia-indicesは、検索可能なすべてのElectronデータがコンパイルされている場所です。
• electron/search-with-your-keyboardにより、キーボードで検索インターフェースを操作できます。
• algolia/instantsearch.jsは、入力しながら検索を可能にするブラウザ側のクライアントです。
• algolia/algoliasearch-client-javascriptは、Algoliaのサーバーにデータアップロードを行うためのNode.jsクライアントです。

謝辞​

これらの新しい検索機能の構築に貢献してくださったEmily JordanとVanessa Yuen、SourceRankスコアを提供してくれたLibraries.io、そして開始を支援してくれたAlgoliaチームに特別な感謝を申し上げます。🍹

国際化された新しいElectronウェブサイトの公開以来、英語圏以外の開発者にとってもElectron開発エクスペリエンスをさらに使いやすくするために努力してきました。

そこで、いくつかのエキサイティングなi18nアップデートをご紹介します！

🌐 言語の切り替え​

翻訳されたドキュメントを読む多くの人が、それを元の英語のドキュメントと照らし合わせて参照することが多いことをご存知ですか？これは、英語のドキュメントに慣れるため、そして時代遅れまたは不正確な翻訳を避けるためです。これは国際化されたドキュメントの欠点の1つです。

英語のドキュメントへのクロス参照を容易にするため、最近、Electronドキュメントのセクションを英語と、ウェブサイトで表示している言語との間でシームレスに切り替える機能を提供しました。言語の切り替えは、ウェブサイトで英語以外のロケールを選択している限り表示されます。

⚡️ 翻訳ページへのクイックアクセス​

ドキュメントを読んでいる間にタイプミスや誤訳に気づきましたか？Crowdinにログインして、ロケールを選択し、修正したいファイルを見つける必要はもうありません。代わりに、ドキュメントの一番下までスクロールして、「このドキュメントを翻訳する」（またはあなたの言語で同等のもの）をクリックするだけです。ほら！Crowdinの翻訳ページに直接移動します。さあ、翻訳の魔法をかけましょう！

📈 いくつかの統計​

Electronドキュメントのi18nへの取り組みを公表して以来、世界中のElectronコミュニティメンバーからの翻訳への貢献が大幅に増加しました。現在までに、**1,066人のコミュニティ翻訳者によって、25言語で1,719,029個の文字列が翻訳されました**。

既存のテンポ（執筆時点の過去14日間のプロジェクトアクティビティに基づく）が維持される場合、各言語へのプロジェクトの翻訳に必要な時間を示すグラフを以下に示します。

📃 翻訳者向けアンケート​

Electronの改善に時間をかけて貢献してくれた皆さんに、心から感謝いたします❤️！翻訳者コミュニティの努力を適切に認められるように、翻訳者に関する情報（CrowdinとGithubのユーザー名間のマッピングなど）を収集するためのアンケートを作成しました。

素晴らしい翻訳者の皆様は、数分お時間をとってこのアンケートにご回答ください：https://goo.gl/forms/b46sjdcHmlpV0GKT2。

🙌 Nodeの国際化への取り組み​

Electronのi18nイニシアチブの成功により、Node.jsは改良されたi18nへの取り組みを、私たちが使用しているパターンをモデルとして決定しました！🎉 Node.js i18nイニシアチブは現在立ち上げられ、大きな勢いを得ていますが、初期の提案とそれに関する理由についてはこちらで読むことができます。

🔦 貢献ガイド​

Electronをより国際的にフレンドリーにする取り組みへの参加に関心のある方は、便利な貢献ガイドがありますので、ぜひご利用ください。国際化を楽しみましょう！📚

Electronには、electronjs.orgに新しいウェブサイトがあります！静的なJekyllサイトをNode.jsウェブサーバーに置き換え、サイトの国際化の柔軟性を高め、よりエキサイティングな新機能への道を切り開きました。

🌍 翻訳​

世界中の開発者にとってElectronアプリ開発をアクセスしやすくすることを目標に、ウェブサイトの国際化プロセスを開始しました。GitHubと統合するローカリゼーションプラットフォームであるCrowdinを使用しており、コンテンツがさまざまな言語に翻訳されると、プルリクエストが自動的に作成および更新されます。

これまでこの取り組みは静かに進めてきましたが、75人を超えるElectronコミュニティメンバーがすでにプロジェクトを独自に見つけて参加し、ウェブサイトの国際化とElectronのドキュメントの20以上の言語への翻訳に取り組んでいます。フランス語、ベトナム語、インドネシア語、中国語などの翻訳をリードし、世界中の人々から毎日の貢献が見られます。

言語を選択し、翻訳の進捗状況を確認するには、electronjs.org/languagesにアクセスしてください。

複数の言語を話していて、Electronのドキュメントとウェブサイトの翻訳に協力することに関心がある場合は、electron/electron-i18nリポジトリにアクセスするか、GitHubアカウントを使用してサインインできるCrowdinで翻訳をすぐに開始してください。

現在、CrowdinのElectronプロジェクトでは21の言語が有効になっています。さらに多くの言語のサポートを追加するのは簡単です。そのため、翻訳に協力することに関心がありますが、あなたの言語が表示されていない場合は、お知らせください。有効化します。

翻訳済みドキュメントの生データ​

生markdownファイルでドキュメントを読むことを好む場合は、どの言語でも読むことができます。

git clone https://github.com/electron/electron-i18n
ls electron-i18n/content

アプリページ​

本日現在、どのElectronアプリでも、Electronサイトに独自のページを簡単に持つことができます。いくつかの例として、サイトの日本語バージョンに表示されているEtcher、1Clipboard、またはGraphQL Playgroundをご覧ください。

素晴らしいElectronアプリが数多くありますが、必ずしも見つけやすくはなく、すべての開発者が適切なウェブサイトを構築してアプリを販売および配布する時間やリソースを持っているわけではありません。

PNGアイコンファイルと少量のアプリメタデータのみを使用することで、特定のアプリに関する多くの情報を収集できます。GitHubから収集されたデータを使用して、アプリページには、公開リポジトリを持つすべてのアプリのスクリーンショット、ダウンロードリンク、バージョン、リリースノート、READMEが表示されるようになりました。各アプリのアイコンから抽出されたカラーパレットを使用して、大胆でアクセシビリティの高い色を生成し、各アプリページに視覚的な差別化を与えています。

アプリインデックスページには、カテゴリとキーワードフィルターが追加され、GraphQL GUIやP2Pツールなど、興味深いアプリを見つけることができます。

サイトに掲載したいElectronアプリをお持ちの場合は、electron/electron-appsリポジトリにプルリクエストを送信してください。

Homebrewによるワンライナーインストール​

macOS用のパッケージマネージャーであるHomebrewには、caskと呼ばれるサブコマンドがあり、ターミナルで単一のコマンド（例：brew cask install atom）を使用してデスクトップアプリを簡単にインストールできます。

人気のElectronアプリのHomebrew cask名を収集し始め、caskを持つすべてのアプリページにインストールコマンド（macOSユーザー向け）を表示するようになりました。

Homebrew cask名を持つすべてのアプリを表示するには、electronjs.org/apps?q=homebrewにアクセスしてください。まだインデックスに登録されていないcaskを持つアプリをご存知の場合は、追加してください！

🌐 新しいドメイン​

サイトをelectron.atom.ioから新しいドメインのelectronjs.orgに移行しました。

Electronプロジェクトは、ウェブテクノロジーを基盤とするGitHubのオープンソーステキストエディターであるAtom内で生まれました。Electronは当初atom-shellと呼ばれていました。Atomはそれを最初に使用したアプリでしたが、この魔法のようなChromium + Nodeランタイムがあらゆる種類のアプリケーションに使用できることにすぐに多くの人が気づきました。MicrosoftやSlackなどの企業がatom-shellを使用し始めると、プロジェクトに新しい名前が必要であることが明らかになりました。

そして「Electron」が誕生しました。2016年初頭、GitHubはAtomとは別に、Electronの開発とメンテナンスに特化した新しいチームを結成しました。それ以来、Electronは数千人のアプリ開発者によって採用されており、現在では多くの巨大企業（その多くが独自のElectronチームを持っている）に依存されています。

AtomやGitHub DesktopなどのGitHubのElectronプロジェクトのサポートは、依然として私たちのチームにとって最優先事項ですが、新しいドメインに移行することで、AtomとElectronの技術的な違いを明確にすることを期待しています。

🐢🚀 Node.jsの普及​

以前のElectronウェブサイトは、人気のRubyベースの静的サイトジェネレーターであるJekyllを使用して構築されていました。Jekyllは静的ウェブサイトを構築するための優れたツールですが、ウェブサイトはそれを超える規模になっていました。適切なリダイレクトや動的コンテンツレンダリングなどのより動的な機能が必要になったため、Node.jsサーバーが明らかな選択肢でした。

Electronエコシステムには、PythonからC++、Bashまで、多くの異なるプログラミング言語で記述されたコンポーネントを持つプロジェクトが含まれています。しかし、JavaScriptはElectronの基礎であり、コミュニティで最も多く使用されている言語です。

ウェブサイトをRubyからNode.jsに移行することにより、ウェブサイトへの貢献を希望する人々の参入障壁を下げることを目指しています。

⚡️ より容易なオープンソースへの参加​

システムにNode.js（8以上）とgitがインストールされていれば、簡単にローカルでサイトを実行できます。

git clone https://github.com/electron/electronjs.org
cd electronjs.org
npm install
npm run dev

新しいウェブサイトはHerokuでホストされています。デプロイメントパイプラインとReview Apps機能を使用しており、プルリクエストごとにアプリの実行コピーが自動的に作成されます。これにより、レビュー担当者は、ライブコピーのサイトに対するプルリクエストの実際の影響を簡単に確認できます。

🙏 貢献者への感謝​

Electronの改善に時間と労力を費やして貢献してくれた世界中の人々に特別な感謝を述べたいと思います。オープンソースコミュニティの情熱は、Electronの成功に計り知れないほど貢献しました。ありがとうございました！

本日、Electronのドキュメントの改善について発表します。新しいリリースには、Electronの公開APIを詳細に記述したJSONファイルがすべて含まれるようになりました。このファイルを作成したのは、開発者がElectronのAPIドキュメントを新しい興味深い方法で使用できるようにするためです。

スキーマの概要​

各APIは、name、description、typeなどのプロパティを持つオブジェクトです。BrowserWindowやMenuなどのクラスには、インスタンスメソッド、インスタンスプロパティ、インスタンスイベントなどを記述する追加のプロパティがあります。

BrowserWindowクラスを記述するスキーマの抜粋を次に示します。

{
  name: 'BrowserWindow',
  description: 'Create and control browser windows.',
  process: {
    main: true,
    renderer: false
  },
  type: 'Class',
  instanceName: 'win',
  slug: 'browser-window',
  websiteUrl: 'https://electron.dokyumento.jp/docs/api/browser-window',
  repoUrl: 'https://github.com/electron/electron/blob/v1.4.0/docs/api/browser-window.md',
  staticMethods: [...],
  instanceMethods: [...],
  instanceProperties: [...],
  instanceEvents: [...]
}

そして、メソッドの説明の例を示します。この場合は、apis.BrowserWindow.instanceMethods.setMaximumSizeインスタンスメソッドです。

{
  name: 'setMaximumSize',
  signature: '(width, height)',
  description: 'Sets the maximum size of window to width and height.',
  parameters: [{
    name: 'width',
    type: 'Integer'
  }, {
    name: 'height',
    type: 'Integer'
  }]
}

新しいデータの使用​

開発者がこの構造化データをプロジェクトで簡単に使用できるように、新しいElectronリリースのたびに自動的に公開される小さなnpmパッケージであるelectron-docs-apiを作成しました。

npm install electron-api-docs --save

すぐに試したい場合は、Node.js REPLでモジュールを試してみてください。

npm i -g trymodule && trymodule electron-api-docs=apis

データの収集方法​

ElectronのAPIドキュメントは、ElectronコーディングスタイルとElectronスタイルガイドに準拠しているため、プログラムで解析できます。

electron-docs-linterは、electron/electronリポジトリの新しい開発依存関係です。これは、すべてのMarkdownファイルをlintし、スタイルガイドのルールを適用するコマンドラインツールです。エラーが見つかった場合は、リストされ、リリースプロセスは停止します。APIドキュメントが有効な場合、electron-json.apiファイルが作成され、Electronリリースの一部としてGitHubにアップロードされます。

標準JavaScriptと標準Markdown​

今年初めに、Electronのコードベースは、すべてのJavaScriptにstandardリンターを使用するように更新されました。StandardのREADMEは、この選択の理由を要約しています。

標準スタイルを採用することは、個人的なスタイルよりもコードの明確さとコミュニティの慣習の重要性を高く評価することを意味します。これは、プロジェクトや開発文化の100％には当てはまらないかもしれませんが、オープンソースは初心者にとって敵対的な場所になる可能性があります。明確で自動化された貢献者の期待を設定することで、プロジェクトはより健全になります。

また、最近standard-markdownを作成し、ドキュメント内のすべてのJavaScriptコードスニペットが有効であり、コードベース自体のスタイルと一致していることを確認しました。

これらのツールを組み合わせることで、継続的インテグレーション（CI）を使用して、プルリクエストのエラーを自動的に検出できます。これにより、コードレビューを行う人間の負担が軽減され、ドキュメントの正確性に対する信頼性が向上します。

コミュニティの取り組み​

Electronのドキュメントは常に改善されており、素晴らしいオープンソースコミュニティに感謝しています。この記事の執筆時点で、約300人がドキュメントに貢献しています。

この新しい構造化データを使用して人々が何をするのか楽しみです。考えられる用途としては、以下のようなものがあります。

• https://electron.dokyumento.jp/docs/の改善
• TypeScriptを使用するプロジェクトでのより効率的なElectron開発のためのTypeScript定義ファイル。
• Dash.appやdevdocs.ioなどのツール用の検索可能なオフラインドキュメント。

今週、Electron のドキュメントを electronjs.org に掲載しました。最新のドキュメントは /docs/latest からご覧いただけます。以前のバージョンのドキュメントも保持しているため、ご使用のバージョンに対応するドキュメントは /docs/vX.XX.X からご覧いただけます。

利用可能なバージョンを確認するには /docs を、すべての最新ドキュメントを1ページにまとめたもの（cmd + f 検索に便利）を見るには /docs/all をご覧ください。

ドキュメントの内容に貢献したい場合は、ドキュメントが取得される Electron リポジトリ で行うことができます。マイナーリリースごとにドキュメントを取得し、Electron サイトリポジトリ （Jekyll で作成）に追加します。

ドキュメントをあるリポジトリから別のリポジトリに取得する方法の詳細を知りたい場合は、以下をお読みください。そうでない場合は、ドキュメントをお楽しみください！

技術的な詳細​

Electron のコアリポジトリ内のドキュメントはそのまま保持されます。つまり、electron/electron には常に最新バージョンのドキュメントがあります。Electron の新バージョンがリリースされると、Electron ウェブサイトリポジトリである electron/electronjs.org に複製されます。

script/docs​

ドキュメントを取得するには、コマンドラインインターフェースが script/docs vX.XX.X のスクリプト を実行します。--latest オプションの有無は、インポートするバージョンが最新バージョンかどうかによって異なります。ドキュメント取得スクリプト は、いくつかの興味深い Node モジュールを使用します。

• nugget は リリース tarball の取得 と一時ディレクトリへの保存に使用されます。
• gunzip-maybe は tarball の解凍 に使用されます。
• tar-fs は tarball から /docs ディレクトリのみをストリーミング し、ファイルのフィルタリングと処理 （through2 の助けを借りて）を行い、Jekyll サイトで適切に動作するようにします（詳細は後述）。

テスト は、すべての部品が期待通りに配置されたことを確認するのに役立ちます。

Jekyll​

Electron のウェブサイトは Jekyll サイトであり、次のような構造でドキュメントに Collections 機能を使用しています。

electron.atom.io
└── _docs
    ├── latest
    ├── v0.27.0
    ├── v0.26.0
    ├── so on
    └── so forth

フロントマター​

Jekyll が各ページをレンダリングするには、少なくとも空のフロントマターが必要です。すべてのページでフロントマターを使用するため、/docs ディレクトリのストリーミング中に、ファイルが README.md ファイルかどうか（その場合は、1つのフロントマター構成を受け取る）、またはマークダウン拡張子を持つ他のファイルかどうか（その場合は、わずかに異なるフロントマターを受け取る）を確認します。

各ページは、この一連のフロントマター変数を受け取ります。

---
version: v0.27.0
category: Tutorial
title: 'Quick Start'
source_url: 'https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md'
---

README.md は、URL がぎこちない /readme/ ではなく index.html の共通ルートを持つように、追加の permalink を受け取ります。

permalink: /docs/v0.27.0/index.html

設定とリダイレクト​

サイトの _config.yml ファイルでは、ドキュメントの取得時に --latest フラグが使用されるたびに、変数 latest_version が設定されます。また、サイトに追加されたすべてのバージョンのリストと、ドキュメントコレクション全体に使用する permalink も追加します。

latest_version: v0.27.0
available_versions:
  - v0.27.0
collections:
  docs: { output: true, permalink: '/docs/:path/' }

サイトのルートにある latest.md ファイルは、このフロントマターを除いて空です。これにより、ユーザーは、特定の最新バージョン番号を使用する代わりに（もちろん、それも可能です）、electron.atom.io/docs/latest を訪れることで、最新バージョンのドキュメントのインデックス（別名 README）を見ることができます。

---
permalink: /docs/latest/
redirect_to: /docs/{{ site.data.releases[0].version }}
---

レイアウト​

docs.html レイアウトテンプレートでは、条件付きでヘッダーとパンくずリストの情報が表示または非表示になります。

{% raw %} {% if page.category != 'ignore' %}
<h6 class="docs-breadcrumb">
  {{ page.version }} / {{ page.category }} {% if page.title != 'README' %} / {{
  page.title }} {% endif %}
</h6>
{% endif %} {% endraw %}

利用可能なバージョンを表示するページを作成するには、サイトのルートにあるファイル versions.md で設定内のリストをループ処理するだけです。また、このページに permalink：/docs/ を指定します。

{% raw %} {% for version in site.available_versions %} - [{{ version
}}](/docs/{{ version }}) {% endfor %} {% endraw %}

これらの技術的な詳細がお役に立てば幸いです！ドキュメントサイトに Jekyll を使用する方法の詳細を知りたい場合は、GitHub のドキュメントチームが Jekyll で GitHub のドキュメントを公開する方法 を確認してください。