Learn Japanese with Nogikoi

I experienced first hand that it is much more motivating to study Japanese when you can combine it with something you love. That's why I started on developing a tool that combines the joy of Nogizaka content with some useful functions to study the language.

For now, it is called Learning Japanese with Nogikoi



It is mostly aimed towards Japanese learners that are at an intermediate level, but as the tool will develop, I hope to make it useful for as much people as possible.

What does it do?
At the moment, it loads a video and the subtitle file that belongs with it (Aegisub - ass format). The subtitle is parsed into individual lines and each line is further broken down into individual words automatically. When clicking on a word, it gives you the information (which is fetched from Jisho).

Why Nogikoi?
I have thought a lot of the best content to use with this tool, and Nogikoi simply has the most benefits. I know many people like the stories but have trouble reading them. So this is a way for people to enjoy the stories anyway. It also contains "real" Japanese (as opposed to textbook Japanese), and since it's text based and not audio based, there's no confusion about words or sentences that are hard to hear. From a more technical point of view, Nogikoi videos are smaller in size than the average variety show, so it's easier to host them and faster to load them. For the subs, I am using the subs from Marsubber, who generously provided the one in the demo and will continue to generate more content in the future.

The demo
At the moment, the tool is only a very early demo, but the idea should be clear. You can have a look at:
learnjapanesewithnogikoi.net

Things I am planning to implement
- Option to switch to the English subtitle, if these are available.
- Community translations, which enables the user to submit a translation of a certain line, which then can be up- or downvoted (depending on the quality of the translation).
- Something game related, like a leveling system or achievement system.
- Better segmenting. The words are now split with a script called TinySegmenter, which does an okay job, but could use some refinement. If someone knows of a better segmenter (written in Javascript or PHP), please let me know!
- Better design.

Concerns
I am not sure if including Nogikoi content in the tool is illegal, but it probably is. So advice how to deal with this, or work around it are welcome. I am not too worried since Nogikoi material is on Youtube as well, but it would be a bummer if the tool got taken down.

If you have the time, please check it and if you have suggestions or feature requests, let me know!

Edit: could a mod please correct the typo in the title? Thanks. aangepast en graag gedaan, Dutchie, .

 

What if the .ass file be pre-modified to include delimiters (don't know the correct term), to get rid of the runtime 'segmenter' altogether?

So instead of some like
[TIME],[STYLE],[ETC],兄の誕生日なんて

It would be edited to add a delimiter (in this case, double backslash \\)
[TIME],[STYLE],[ETC],兄\\の\\誕生日\\なんて

Alright, there would actually still be a segmenting part... but this would likely be shortened to just splitting the string with the double backslash as a parameter. Then again, the .ass pre-modifying itself will take time...

 

@TAMU That's certainly a nice solution. It depends a bit on the route I'll go with the tool. Lots of content but automated and therefore sometimes flawed, or less content but better quality. If I don't find a better segmenter, I think it'll be the latter. Thanks!

 

This is really good! Thanks for taking the time to develop this and share it with us.

I really like the timeline idea and find it intuitive and easy to use. There's a good mix between incentivising the user to understand as much of the dialogue as they can themselves, and having the translations easily accessible when they are needed. I've already been through the dialogue and learned a lot of new words.

I noticed a few cases (e.g. 遅く) where the `explanationContainer` reports "No results for..." even where the word is in Jisho. This happens where none of the elements of the array returned by the ajax have an `is_common` attribute equal to true. One strategy in that case is to check the array for an element whose `slug` attribute is equal to the `word` argument to the ajax, e.g...
data.data.filter((i) => i.slug === word);
...will return an array consisting of the (hopefully single) element for which `slug` is the same as the searched `word`.

Thanks again - I look forward to learning more from this.

 

@nogijinja Thanks for checking it out and for your detailed suggestion! I applied your idea, so if the word directly matches, it will now show even if it's not a common word.

 

Regarding the segmentation issue, I think TAMU's suggestion of adding custom separators to the input text is the most accurate and reliable, but users could also create their own "segments" by selecting text which is then used as the term to search for - see here for an example.

The `range` test checks that no more text is selected than is contained in the source div, to handle the case where a selection including text outside the source div ends in the source div and so triggers the event.

 

Thanks, that's a nice method as well, but I think it isn't as user friendly as I'd like. It needs a lot of work to make it an accessible method on mobile as well. I bookmarked it anyway, because it might be useful for future expansions.

 

Oh yes, that might require a different coding approach for touch devices.

One small thing I noticed though. For example, in 1366x768 I try to scroll the page a bit down to see the bottom part of the video (to the part where the buttons and subtitles are), but because of a seemingly 'auto-focus' on the upper right section, the page will scroll back up before I could do so. However, in a larger resolution or if I full screen the browser (to open up the space where the tabs, toolbars, etc are) this does not happen. Maybe set the vid to fit or scale to the height of the screen? Or remove the auto-focus?

Also, the 'Subtitle' and 'Learn' headers could be docked, or have their own area so they don't get lost when scrolling.

Honestly, I'm curious about the direction this tool will further take as it's legit one of the best ideas I've seen in a while. Take your time, and please keep us posted for the next update

 

Yeah, the layout and design still leave a lot to be desired. 768 is exactly the breakpoint for the autoscroll to kick in.

 

Quick update:
- I switched to a dark purple design.
- I went with @TAMU 's advice and dropped the segmenter. Even though it's more work, the quality is better. (if you're bored and want to help out, let me know!)
- I'm currently busy to get the layout working on different screen sizes.
- Saito Asuka demo story is done.

Plans:
- Add stories from the Nogikoi true face event.
- Add user translation function.
- Add flashcard deck creation (with export to csv so you can use it with Anki etc.).

Questions:
- I am not sure if the subtitles on the video are overkill, since they are already in the video's and also next to them. Should I get rid of them?
- Once I implemented the option to make an account, what kind of functions would you like to see?

 

Does the jp sub is needed to make the lines appear on the side of the video? If yes, then you can't change it since there are only few of nogikoi vids that have sound. If no, then you can get rid of them.
Also, iirc you mentioned about putting English subtitle (aside from direct meaning from jisho) later on. Are you gonna still do that or that's just an option?

 

Yeah I need to have the sub file for the lines. I just wondered if I should display them on the video as well, because maybe it's a bit redundant.

As for the English subtitles, I am thinking about 2 things:
- Option to show the english subtitle if there is one available (needs to be translated).
- Option for users to input an English translation to a single line, with upvote function so other users can vote for the translation they think is best.

I like the second option because it engages the user to be active rather than passive which is better for learning. The upvoting should prevent users from learning bad translations.

 

I just noticed this, but are there plans to include romaji? It might help learning-wise too.

I like the translation vote idea. Reminds me of those bar interpretations on Genius.
And maybe as an admin you can just override with an 'official' one especially in a common line.

If you don't mind me asking, how is the Jisho search integration done? Is it like a function call of some sort?

 

There are no plans to include romaji. Partial because I am of the opinion that romaji should be dropped asap when you start learning Japanese, in favor of learning hiragana/katakana/kanji.

I use one of Jisho's API endpoints to fetch the word.

 

Alright, cool. I think overall more people should try it for more points of view.

Are you intending to make it exclusively for Nogikoi? I was wondering if it could be tied up with a sub release or something. Like a song translation? Since the official lyrics ought to be out there. Or just about any Nogi clip probably, as long as we are 100% certain what every spoken word is - this might be too much though.

 

Yeah that's exacty why I chose Nogikoi. It's text based so there's no worry about mishearing things. In theory it could be expanded to all kinds of content, but I think it helps to have a focus. And there is really a lot of Nogikoi content.

 

I could help by lending some of my Nogikoi translation if needed and you want to. But the voting idea is great though. In some cases, line based translation that not including the whole context of the story might be dangerous and could mislead them. There's a chance that they don't even realize it. Admin must do a routine monitoring in order to prevent that.

Idk how's things at your place but here, new language learners tend to make mistakes then spread it.

 

Quick update! I'm working hard on implementing a bunch of features:

- Add translations and upvote others.
- Save translated sentences as flashcards.
- Use them to learn Japanese.

Expect the beta version to be launched somewhere in October.

 

Beta version is live!

https://learnjapanesewithnogikoi.net

 

sorry if i sound like bossy, but can you make it furigana instead of just kanji? because there some words that when i clicked on it, its say no information on that words. if its furigana, users can still read it and can try to find the translation using other alternative like google translate