Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Increments株式会社
Organization

3月にリリースした機能を紹介します

こんにちは!Qiita開発チームです。
今月から毎月リリースした機能をOrganization記事で紹介していこうと思います。
リリースノートはこちらです。

Organization記事が書けるようになりました

今までは記事は個人に紐づいていましたが、Organizationにひもづく「Organization記事」が投稿できるようになりました。この記事自体もOrganization記事として投稿されています。

なお、Organization記事はOrganization Proオプションを有効化することで投稿可能になります。
Organization Proについてはこちら
Organization Proは現在クローズドベータ版として公開しています。

ベータ版として公開していた記事ページのUI更新を正式版としてリリースしました

記事ページのUIをリニューアルしました。
従来の記事ページはクラス名を使ってスタイルを当てていました。スタイルの管理は、各ページごとにSassで書かれており、デプロイ時にコンパイル・バンドルを行っています。
SassはCSSをより楽に書くことができますが、開発効率が下がってしまうなど、使い方によっては不便になってしまう場合があります。
Qiitaでは、Sassでクラス名をネストして書かれていることが多く、ちょっとしたスタイルの修正をする場合でも探すのに時間がかかってしまい、属人的な作業となってしまっている一面がありました。
例として、アドベントカレンダーのページの「購読中のカレンダー」のスタイルを見てみます。
「購読中のカレンダー」にはac-CategoryTab, ac-CategoryTab--subscribingのクラス名がつけられており、それによってスタイルを当てています。そして、実際のスタイルの定義が以下のようになっています。

.ac {
  &-CategoryTab {
    // 略...

    &--subscribing {
      border-color: $ac-brand-3;

      &.is-active {
        background-color: $ac-brand-3;
      }
    }

    // 略...
  }
}

Sassを使うことで楽に書くことができてはいますが、git grep ac-CategoryTabをしても上記のファイルを見つけることはできません。結果として、膨大なファイルから見つけなければならない状態になってしまっています。

そこで、今回のUIのリニューアルに伴い、Sassで書かれているスタイルを一部CSS in JSに置き換えました。スタイルをコンポーネント内に閉じ込めることによって、スタイルの検索性やオーバーライドを軽減するようにしています。
今回は一部のみの置き換えでしたが、すべてのスタイルをCSS in JSに置き換えることを最終ゴールとし、開発を行っていきます。

Sass、CSS in JSに関する記事をIncrementsのデザイナーが投稿していますので、ぜひ御覧ください。

ベータ版として公開していたストック機能のリニューアルを正式版としてリリースしました

ストック機能機能をリニューアルしました。

大きく以下2点が変わっています。

  • ストックにカテゴリーの概念追加
  • ストックページフルリニューアル

ストックにカテゴリーの概念追加

これまでのストックデータは、ユーザーと記事の中間テーブルとして保持していました。
今回のリニューアルでは、さらに以下二つのデータモデルを追加しました。

  • ユーザーに紐づくストックカテゴリー
  • ストックとストックカテゴリーの紐付け

様々な事情により、既存のストックデータはそのまま残す必要がありました。
実は複雑なデータ構造になっています。

REST APIではリソースの数だけエンドポイントが増えるため、各データを取得するのが大変になってしまいます。
QiitaではGraphQLを導入しているため、ひとつのエンドポイントでこれらストック関連のデータを一括取得することが可能です。

フロントエンドにはApollo Clientを導入しており、GraphQLのquery, mutationを簡単に実行できるようにしています。
ストック関連のquery, mutation実行をカスタムフックとしてラップしておくことで、各フィードやユーザーページでもストック機能を呼び出しやすくなりました。

ストックページフルリニューアル

これまでのストックページでもタグによる絞り込みやキーワード検索は可能でした。
しかし、キーワード検索は記事検索ページへの遷移となっており、決して使いやすいものではありませんでした。

リニューアルしたストックページでは、以下3つの条件でストックした記事をシームレスに検索できます。

  • ストックカテゴリー
  • 記事のタグ
  • キーワード

これら3つの検索条件はRedux Storeに保持しています。
useEffectで、検索条件の変更を検知→ストック記事一覧取得のquery実行→リスト更新までの一連の処理を行うようにしています。

各コンポーネントは、検索条件更新するだけ、query実行して結果表示するだけ、のように責務を単純にして今後の機能追加しやすい構成にしています。

キーワード検索にはElasticsearchを利用しています。
現在、部分一致検索には対応できていません。
(例:「Qiit」では「Qiita」を含む記事がヒットしない。「Qiita」まで入力する必要がある。)

将来的には N-gram tokenizer 等を導入して部分一致検索にも対応する予定です。

記事に埋め込み可能なスクリプトを追加しました

記事に埋め込み可能なスクリプトを追加しました。
QiitaのMarkdownプロセッサーは

でOSSとして公開しています。qiita-markdownはredcarpetをforkした greenmatというgemとhtml-pipelineをベースとしてMarkdownのパースとサニタイズを行っています。
今までは filter_script.rbでscriptタグのみ一部のサイトのスクリプトの利用を許可していましたが、今回新たに filter_iframe.rbを作成し、iframeも特定のサイトのものであれば利用を許可できるようにしました。
今後Qiitaに対応してほしい埋め込みスクリプトなどがあれば、是非qiita-markdownにPRやIssueをいただければ検討をすることができるので、よろしくお願いします。

フィードのサイドバーを整理しました

フィードのサイドバーを整理しました。
以前のサイドバーはフィードごとに表示されるコンテンツが異なっており、またユーザーにとって不要なコンテンツも含まれていました。また、フィードごとに異なっているため、サイドバーのコンテンツを探す必要もありました。そのため、今回のリニューアルに合わせてサイドバーの構成を見直し・整理をし、記事フィードすべてで同じサイドバーを表示するようにしました。
サイドバーの変更に関しては、リリースノートを御覧ください。

その他の改善

  • エディタが特定の条件下で強制的にスクロールされてしまう問題を修正
  • エディタでDecimal型のListを利用する際に、数字がインクリメントされないように変更
  • シンタックスハイライトのリストを、他の部分をクリックすることで閉じられるように修正

最後に

Organization記事はOrganization Proオプションを有効化することで投稿可能になります。

Organization Proは現在クローズドベータ版として公開しており、無償でご利用いただけます。
Organization Proへの問い合わせはこちらでお願いいたします。

これからも改善に取り組んでいきます。ご意見ご要望がありましたらいつでもお寄せください。

0
Improve article
Send edit request
Article information
Show all likers
Report article
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
increments
「エンジニアを最高に幸せにする」ために Qiita、Qiita Team、Qiita Jobs を開発・運営しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login